一、什么是样式表（css）

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

1.选择器语法

完整的样式声明是由选择器、大括号和属性组成。属性是key:value键值对形式，不同的属性使用分号(;)隔开，最后一个属性可以省略分号。

image.png

  • 选择器：根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）
  • 属性：属性是key:value1 value2 ..键值对形式。

二、CSS引用的方式

css有三种引用方式，分别为内联、内部样式代码块、链入外部css文件，如果一个标签三种方式都使用了，则生效原则是就近原则，继承规则是继承未覆盖的样式。

1.内联定义 (Inline Styles)

内联定义即是标签对象的style属性定义样式表属性。示例如下：

  1. /*使用标签的style属性引用样式,格式style="key1:value1 value2;key2:value"*/
  3.   <div style="background-color: red;border: solid red">div标签的背景颜色是红色</div>

缺点：

  1. 如果该标签需要很多样式，则代码很长，不利于阅读。
  2. 代码只能该标签使用，不能实现服用

    2.定义内部样式块对象 (Embedding a Style Block)

    在HTML文档的和标记之间插入一个块对象。示例如下： ```css /在选择器的大括号内写入样式信息，则该选择器选中的标签，拥有此样式信息/

  1. **缺点：**
  3. 1. 复用范围太小，只实现了此页面范围内的代码复用，没有实现所有页面范围内的代码复用。
  4. <a name="UTcrb"></a>
  5. ### 3.链入外部样式表文件 (Linking to a Style Sheet)
  6. 你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
  7. ```css
  8. /*使用link标签引入外部的css文件（外部文件的样式写法与style块的写法一致）*/
  10. <link rel="stylesheet" href="listHead" type="text/css">

三、选择器

css选择器全部有9种，常用的有四种，分别为标签选择器、id选择器、类选择器、组合选择器，不常用的有通配选择器、包含选择器、子对象选择器、属性选择器、伪类及伪类对象选择器。

1.常用选择器

（1） 标签选择器

以DOM对象的类型作为选择符，选中所有此类型的所有标签。

  1.   /*标签选择器,body里的所有div标签对象都被选中*/
  3.     div{
  4.       border-style: solid;
  5.       border-color: red;
  6.     }

（2）id选择器

以DOM对象的唯一标识符的 ID 作为选择符，选中拥有此id的唯一标签。

  1. /*id属性为唯一标识符，选中拥有此id的标签对象*/ 
  3.         #divId{
  4.       border-style: solid;
  5.       border-color: red;
  6.     }

（3）类选择器

以DOM对象的class属性 作为选择符，选中拥有此class属性的所有标签。

  1. /*class的值可以有多个，例如class="colorClass divClass"*，选中class类型一样的标签对象/
  3.       .divClass{
  4.       border-color: blue;
  5.     }

（4）组合选择器

以多个选择器以逗号分隔组成，选中符合其中任何一个选择器的所有标签。

  1. /*此选择器的作用类似于选择器1 or 选择器2 or 选择器 3，选中所有符合选择器的所有标签*/
  3.   #divId,#div2Id{
  4.      background-color: red;
  5.    }

2.不常用选择器

（1）通配选择器

选定文档目录树(DOM)中的所有类型的单一对象。

  1. /*假如通配选择器不是单一选择符中的唯一组成，“*”可以省略。*/
  3. *[lang=fr] { 
  4.   font-size:14px; width:120px; 
  5. } 
  6. *.div {
  7.   text-decoration:none; 
  8. } s

（2）包含选择器（后代选择器）

选择所有被 E1 包含的 E2 。

  1. /*选择table嵌套的所有td标签对象*/
  3. table td {
  4.   font-size:14px;
  5. }

（3）子对象选择器

选择所有作为 E1 子对象的 E2 。

  1. /*选择其嵌套的所有的子对象标签，和包含选择器不同的是只能选择子对象，而包含不仅可以选择子对象还能选择子孙对象*/
  3. body > p { font-size:14px; } 
  4. /* 所有作为body的子对象的p对象字体尺寸为14px */ 
  6. div ul>li p { font-size:14px; }

（4）属性选择器

选择一个对象拥有此属性的所有标签

  1. /*语法*/
  2. 1. E [ attr ] { sRules } 
  3. 2. E [ attr = value ] { sRules } 
  4. 3. E [ attr ~= value ] { sRules } 
  5. 4. E [ attr |= value ] { sRules } 
  7.  #divId[class=divClass]{
  8.      background-color: blue;
  9.   }

（5）伪类及伪对象选择器

  1. /*挺难，还没有学习*/
  3. div:first-letter {
  4. font-size:14px; 
  5. } 
  7. a.fly :hover {
  8. font-size:14px; color:red; 
  9. }

四、常用样式

1.字体样式

  1. /*字体颜色*/
  2. color：red； 
  4. /*字体大小*/
  5. font-size：20px; 字体大小
  7. 颜色可以写颜色名如：black, blue, red, green 等 
  9. 颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

2.宽度、高度样式

  1. width:19px; 
  3. height:20px; 
  5. 宽度可以写像素值：19px； 
  7. 也可以写百分比值：20%；

3.背景颜色样式

  1. background-color:#0F2D4C
  3. 颜色可以写颜色名如：black, blue, red, green 等 
  5. 颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

5.边框样式

  1. /*边宽：1px,线型：实线，颜色：红色*/
  2. border：1px solid red;

6.div居中样式

  1. /*两者结合使用，效果为居中*/
  3. margin-left: auto;
  4. margin-right: auto;

7.文本居中样式

  1. /*文本居中*/
  3. text-align: center;

8.去除超链接下划线

  1. /*去重文本的下划线*/
  3. text-decoration: none;

9.表格细线

  1. /*设置表格外廓线*/
  2. table {
  3.   border: 1px solid black; /*设置边框*/
  4.   border-collapse: collapse; /*将边框合并*/
  5. }
  7. /*设置单元格的线*/
  8. td,th 
  9. {
  10.   border: 1px solid black; /*设置边框*/ 
  11. }

10.去除列表修饰

  1. ul { list-style: none; }