`

css基础

    博客分类:
  • css
 
阅读更多

一.引入css的三种方式:

 1.内联属性(Inline style attribute)的使用方法是,对于想要设置样式的HTML元素,直接修改他的style属性,将css代码直接写在style属性里。

比如:

<html>
<body>
<h1 style="font-size: 12px;">我的字号被修改了</h1>
</body>
</html>

 

 2.直接写在style标签里.

例:

<html>
<head>
<style>
h1 {font-size: 12px;}
</style>
</head>
<body>
<h1>我的字号被修改了</h1>
</body>
</html>

 

 3.使用link标签引入外部css文件(一般写在head标签里面).如:<link rel="stylesheet" href="styles.css" />

根据自己的需要,设置相应的属性.

 

二.语法规则由两个主要的部分构成:SS选择器(selector),以及一条或多条声明(declaration).

 1.selector {declaration1; declaration2; ... declarationN }

选择器标明了我们要操作的HTML元素。 每个声明用分号隔开,最后一个声明不用。

而每一个声明由一个属性名和一个值组成。属性名和值被冒号分开。

如下:selector(选择器) {property(属性): value(值)}

 

 2.元素选择器就是以HTML标签(又叫HTML元素)作为目标的选择器。 这种选择器的目的,是改变某类元素的默认样式。

例如:div{ color:red}.

则<div>与</div>之间的元素都有div里面的属性,如果要里面的元素都有属性则 [标签名 里面标签名{}.]

 

 3.类选择器(Class Selector)是一种独立于HTML元素来指定样式的选择器.

例子:.warning{ color:red;} <h1 class="warning">我是警告标题</h1>.

通过class属性,将这个类与html元素关联在一起.类选择器还可以与其他选择器搭配使用h1.warning{color: red;}这样就只有hi里面的color样式改成了red.

 

 4.通配选择器:*.warning{ color: red;}这样的类选择器适用于所有元素。除了最开始没有用到的地方。

 

 5.ID选择器:前面加一个#,一般不写*.

例:#warning-title {font-weight: bold;} <h1 id="warning-title">这是一个警告标题</h1>.

分享到:
评论

相关推荐

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    【CSS基础学习】是网页设计领域中的重要环节,它是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS(层叠样式表)让网页设计者能够分离内容与表现,使得网页设计更加灵活且易于...

    css基础教程-适合初学者

    在IT领域,CSS...总结,学习CSS基础不仅涉及语法和选择器,还包括布局、响应式设计以及预处理器的使用。通过不断实践和了解这些概念,初学者可以逐步提升CSS技能,从而更好地设计和构建美观、功能完善的网页。

    DIV+CSS教程——第一天XHTML_CSS基础知识

    DIV+CSS教程——第一天XHTML_CSS基础知识

    CSS基础学习源码

    本“CSS基础学习源码”是一个适合初学者的资源包,提供了丰富的实践材料,帮助理解并掌握CSS的基础知识。 首先,我们来详细探讨CSS的基础概念: 1. **选择器与声明**:CSS的核心在于选择器和声明。选择器用于定位...

    CSS基础教程PDF

    ### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**,全称为 **Cascading Style Sheets**(级联样式表),是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观,如字体、颜色、间距、大小...

    CSS基础教程 源代码

    书名:CSS基础教程 作者:(英)柯林森 著,刘志忠 等译 来源:人民邮电出版社 出版时间:2007年09月 ISBN:9787115164629 定价:49元 内容介绍: 本书是优秀的CSS 入门书,重点讲述了如何使用CSS 实现基于Web ...

    CSS基础知识.pdf

    【CSS基础知识详解】 CSS,全称为Cascading Style Sheets,中文通常翻译为“层叠样式表”,是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性,让网页设计更加灵活多样。自IE 3.0开始,浏览器...

    CSS基础知识-1.pdf

    ### CSS基础知识解析 #### 一、CSS简介 - **1.1 HTML的局限性** HTML是一种用于构建网页内容的标准标记语言。它主要用于定义网页内容的结构和意义,例如使用`&lt;h1&gt;`标签来表示一级标题,使用`&lt;p&gt;`标签来表示段落...

    HTML+CSS基础知识点.pdf

    HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术,掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结: 1. HTML 是网页内容的载体,内容就是网页制作者放在页面上想要让...

    前端CSS基础-常规流练习.rar

    在"前端CSS基础——常规流中练习对应图片代码"中,你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如,可以使用`display`属性来改变元素的行为,将一个内联元素转换为块级元素,或者创建一个内联块级...

    HTML XHTML CSS基础教程(第6版) .zip

    《HTML XHTML CSS基础教程(第6版)》是由著名IT教育家Elizabeth Castro编著的一本经典教程,专门针对初学者设计。这本书详细介绍了网页开发的基础技术,包括HTML、XHTML和CSS,帮助读者掌握构建现代网页的核心技能...

    HTML与CSS基础教程知识点总结和文档

    **CSS基础** 1. **选择器与声明**:CSS通过选择器(如元素选择器、类选择器、ID选择器等)来定位HTML元素,然后用声明(属性:值)来设置样式。 2. **盒模型**:CSS盒模型包括内容、内边距、边框和外边距,影响...

    css基础.ppt

    css基础教程,适合新手使用,仅供参考

    HTML5&CSS3网页制作:CSS基础选择器.pptx

    CSS,层叠样式表,是用于控制网页元素样式的重要语言。在这篇关于"CSS基础选择器"的讲解中,我们将深入理解CSS选择器的概念以及如何使用它们来定位并应用样式到HTML...这样可以帮助你更好地理解和应用CSS基础选择器。

    CSS基础-介绍及语法

    CSS基础-介绍及语法,css入门必备资料

    css基础代码

    ### CSS基础代码详解 #### CSS入门精要:掌握核心概念与实践技巧 **CSS(Cascading Style Sheets)**,即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的标记语言。它使得网页设计更加灵活、高效...

    html + css 基础学习.zip

    html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习...

    CSS基础代码

    **CSS基础代码详解** 在网页设计中,CSS(Cascading Style Sheets)是不可或缺的一部分,它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码,非常适合CSS初学者作为学习素材。通过阅读和理解这些...

    DIV+CSS基础教程全攻略

    DIV+CSS基础教程全攻略,让你熟练如何更好的掌握DIV+CSS

    CSS基础知识

    【CSS基础知识】是针对初学者入门的一门课程,旨在教授如何使用CSS来控制网页的样式和布局。CSS,即层叠样式表(Cascading Style Sheets),是一种样式语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)...

Global site tag (gtag.js) - Google Analytics