第三次网页前端培训笔记（CSS P8-10）

1、CSS主要内容及概述

1.1 主要内容

 

1.2 概述

CSS（层叠样式表）是用来美化网页用的，如果没有网页CSS则毫无用处，所以依赖于HTML展示其功能。

2、CSS基本使用

2.1 CSS基本语法

 

注意：

• css声明要以分号结束，声明以大括号括起来
• 建议一行书写一个属性
• 若值为若干个单词，则要给值加引号，如 font-family:"agency fb"

2.2 注释

/ * 注释内容 * /

 

2.3 CSS的使用

CSS的三种使用方式：

1. 行内样式（内嵌式）     直接通过style属性定义，写在标签上的样式
2. 内部样式 （嵌入式）    定义在style标签上，style标签一般设置在head标签中
3. 外部样式 （引入外联样式文件）    定义在外部的css文件中，通过link标签引入

 

 （行内样式）

 

（内部样式）

 （外部样式）

（外部样式引入） 

 注意：当有多重样式时，越精准越优先（就近原则）

3、CSS选择器

3.1 基础选择器

• 通用选择器     选择所有 *
• 元素选择器     选择指定标签
• ID选择器      选择设置过指定id属性值的元素 #
• 类选择器      选择设置过指定class属性值的元素 .
• 分组选择器     当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

 

优先级(权重越大，精准度越大，优先级越高)：id选择器 > 类选择器 > 元素选择器

3.2 组合选择器

• 后代(派生)选择器（以空格隔开）     选择指定元素的所有指定后代元素
• 子元素选择器（以大于号隔开）     选择指定元素的第一代子元素
• 相邻兄弟选择器（以加号隔开）     选择指定元素的下一个指定元素，两者有相同的父元素（只会找一个）
• 普通兄弟选择器（以波浪号隔开）     选择指定元素后面的所有指定元素，两者有相同的父元素