CSS(一)：CSS定义和常用选择器

目录

CSS

CSS语法

选择器

 1、id选择器

2、class选择器

3、标签选择器

4、后代选择器

5、分组选择器

6、通配符选择器

CSS

定义：指层叠样式表，用于设定网页中元素的显示方式

无论使用哪一种方式定义CSS样式表，样式表中的declaration都由一个样式属性（非标签属性，即样式属性不能当标签属性直接用在标签中）和一个样式属性值组成，样式属性和样式属性值使用冒号分开；声明之间使用分号间隔；

• 注意

1. 如果一个样式属性有多个样式属性值，则样式属性值之间使用逗号间隔
2. 在CSS中样式属性及其样式属性值对大小写不敏感，且不忽略空格
3. 如果属性值由多个单词组成，则建议使用引号引起来——如果用在style标签属性中，则使用单引号，否则使用双引号

• CSS定义位置：标签内部style标签属性；style标签内部；CSS文件内部

CSS语法

1.         声明：color: red; 样式属性:样式属性值;
2.         样式属性值:
3.         样式属性值有空格，则需要使用引号或单引号引起来
4.         样式属性值有多个，逗号间隔
5.         样式属性值不区分大小写

选择器

定义：浏览器通过选择器为满足条件的HTML元素添加CSS样式 

1. id选择器：以id标签属性的属性值为选择器；匹配：标签的id与id选择器相同的标签
2. class选择器：以class标签属性的属性值为选择器
3. 标签选择器：以标签名为选择器 

 1、id选择器

<span id="zzu">郑州大学</span><!--id选择器：以id标签属性的属性值为选择器；匹配：标签的id与id选择器相同的标签-->        <style>#zzu{text-align: center;font-family: "book antiqua";}</style>

2、class选择器

<span class="y">What are you doing?</span>
<span class="y">How are you?</span><!--class选择器：以class标签属性的属性值为选择器--><style>.y{color: aqua;	}</style>

3、标签选择器

        <b>郑州大学</b><!--标签选择器：以标签名为选择器--><style>b{font-size: 72px;}</style>

4、后代选择器

        <!--后代选择器--><style>html body #zzu{background-color:#008000}</style>

5、分组选择器

     	<!--分组选择器 --><style>#c,.y{color: red;}</style>

6、通配符选择器

        <!--通配符选择器--><style>*{margin: 0px;padding: 0px;}</style>