1.什么是CSS
- 概念：CSS（Cascading Style Sheets）,称为CSS样式表或层叠样式表。
- 作用：主要是设置HTML页面的布局和外观显示样式。
-
样式规则：
- 选择器用于指定CSS样式的HTML标签，花括号内是对该标签设置的具体样式
- 属性与属性值以“键值对”的形式出现，用
:表示 - 多个“键值对”用
;表示
选择器{属性1：属性值1; 属性2:属性值2;... ...}
2.引入CSS样式表
2.1 行内式（内联样式）
- 概念：通过标签的
style属性来设置元素的样式。 - 语法：
-
style就是标签的属性 -
样式属性和值之间用
: -
样式多组属性值之间用
;隔开 - 只能控制当前的标签，造成代码冗余，且没有实现样式和结构的分离
-
<标签名 style="属性1:属性值1; 属性2:属性值2; ...">内容</标签名>
例如：
<div style="color: red; font-size: 12px;">你好，世界</div>
2.2 内部样式表（内嵌样式表）
- 概念：将CSS代码集中在HTML文档中的
head头部标签中，并用style标签定义。 - 语法：
- 在HTML5中的
"text/css"可以省略 -
style标签一般位于head标签中，理论上其他位置也可以放 - 只能控制当前页面，没有彻底的将样式和结构分离
- 在HTML5中的
<head>
<style type="text/css">
选择器{
属性1：属性值1；
属性2：属性值2；
... ...
}
</style>
</head>
例如：
<style>
div{
color: red;
font-size: 16px;
}
</style>
2.3 外部样式表（外链式）
- 概念：将所有的样式放在一个或多个以
.CSS为拓展名的外部样式表文件中，再通过link标签将外部样式表链接到HTML文件中。 - 语法：
-
link是单标签 -
link标签要放在head头部标签中，且指定link标签的三个属性
-
<head>
<link rel="stylesheet" type="text/css" href="CSS文件路径">
</head>
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里指定为"stylesheet"，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在此指定为"text/css"，表示链接的外部文件为CSS样式表，可以省略。 |
| href | 定义所链接外部样式表文件的URL |
代码规范：
1.样式表使用展开式，不要把属性写在同一行内；
2.使用小写字母来表示选择器、属性、属性值。
3.CSS基础选择器
3.1 CSS选择器作用
- 找到特定的HTML页面元素（HTML标签）
- CSS选择器分为 基础选择器 和 复合选择器。
3.2 CSS基础选择器
3.2.1 标签选择器（元素选择器）
- 概念：指用HTML标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
- 作用：将某一类标签全部选择出来，如所有的div标签。
- 优点：快速为页面同类型的标签统一样式
- 缺点：不能设计差异化样式。
- 语法：
标签名{属性1:属性值1; 属性2:属性值2; ... ...}
3.2.2 类选择器
- 概念：使用
.进行标识，后面紧跟类名。- 类名自定义时，不要是纯数字或中文命名，尽量使用英文字母表示。
- 在一个标签内，只能有一个
class标签。
- 作用：为元素对象定义单独或相同的样式，可以选择一个或者多个标签。
- 语法：
/* 类名选择器 */ .类名{ 属性1:属性值1; 属性2:属性值2; ... ... }<!-- 标签 --> <p class="类名"> </p> -
类选择器特殊用法-多类名
- 作用：给标签指定多个类名，从而达到更多的选择目的。
- 语法：
<标签名 class="类名1 类名2 ..."> - 类名和类名之间用空格隔开。
3.2.3 id选择器
- 概念：用
#进行标识，后面紧跟id名。- 元素的
id值相当于身份证号，是唯一的的。
- 元素的
- 作用：针对文档中某一个具体的元素进行设置
- 语法：
/* id选择器 */ #id名{ 属性1:属性值1; 属性2:属性值2; ... ... } <!-- 标签 --> <标签名 id="id名"> </标签名>
类选择器和id选择器的区别：
1.类名相当于人的姓名，在同一页面内是可以重复的； id名相当于人的身份证号码，是单独的，不能重复的。
2.类选择器在修改样式中，使用最多；id选择器经常和JS搭配使用。
3.2.4 通配符选择器
- 概念：用
*表示，*就是所有的，能匹配页面中所有的元素。 - 作用：对全局页面进行整体设置
- 匹配所有元素，会降低页面响应速度，不能随便使用。
- 语法：
*{属性1:属性值1; 属性2:属性值2; ...}
3.3 CSS基础选择器总结
| 选择器 | 作用 | 缺点 | 情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 所有相同的标签 | 不能差异化 | 较多 | p{color:red;} |
| 类选择器 | 1个或多个 | 根据需求使用 | 非常多 | .nav{color:red;} |
| id选择器 | 一次只能选择一个标签 | 不能差异化 | 只能用一次 | #nav{color:red;} |
| 通配符选择器 | 所有的标签 | 选择的太多 | 不推荐使用 | *{color:red;} |
团队约定：
- 尽量少使用通配符选择器
* - 少用id选择器
# - 不使用无具体语义定义的标签选择器,如
divspan。
4.CSS复合选择器
4.1 什么是复合选择器
- 概念：复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的，
- 常用分类：后代选择器、子选择器、并集选择器、伪类选择器。
4.2 后代选择器
- 概念：后代选择器又称包含选择器，可以选择父元素里面的子元素。
- 语法：把外层标签写在前面，内层标签写在后面，中间用
空格分隔。
元素1 元素2 ... { 样式声明 }
注意：元素2是元素1的后代即可，可以是儿子，也可是孙子等。
选择器可以是任意的基础选择器。
4.3 子选择器
- 概念：只能选择某元素的最近一级的子元素，即选亲儿子元素。
- 语法：元素和元素之间用
>分隔
元素1 > 元素2 > ... { 样式声明 }
注意：是最近一级的，不是最近一个。
4.4 并集选择器
- 概念：可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。
- 语法：元素与元素之间用
,隔开
元素1,元素2,...{ 样式说明 }如div,p,.nav>li{color:pink;} - 规范：
1.并集选择器习惯竖着写
2.最后一个选择器，不需要加,
4.5 伪类选择器
- 概念：用于向某些选择器添加特殊效果（链接添加特殊效果），或选择第1个，第n个元素。
- 语法：用冒号
:来表示，如:hover、:first-child
4.5.1 链接伪类选择器
- 语法：
-
a:link：选择所有未被访问的链接 -
a:visited：选择所有已被访问的链接 -
a:hover：选择鼠标指针位于其上的链接 -
a:active：选择活动链接（鼠标按下未弹起的链接）
-
- 注意：
1.为确保链接伪类选择器生效，按照LVHA的顺序来声明：:link、:visited、:hover、:active。
2.因为a链接在浏览器中具有默认样式，所以要对链接进行单独指定样式。
3.实际开发的写法：/* a是标签选择器 先给所有的链接设置 */ a { color: red; text-decoration: none; } /* :hover是链接伪类选择器 再单独设置 */ a:hover { color: green; text-decoration: underline; } ···
4.5.2 :focus伪类选择器
- 作用：用于获取焦点的表单元素。
焦点即光标，一般情况下<input>类表单元素才能获取，所以这个选择器主要是针对表单元素的。 - 语法：
input:focus{ background-color: pink; color:red }
注意：并不是只能是
input，也可以是类选择器:focus{}。
4.6 复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 选择后代元素 | 可以是子孙后代 | 较多 |
空格 .nav a
|
| 子选择器 | 选择最近一级元素 | 只能是亲儿子 | 较少 |
> .nav>p
|
| 并集选择器 | 选择相同样式的标签 | 用于集体声明 | 较多 |
, .nav,.header
|
| 链接伪类选择器 | 选择不同状态的链接 | 和链接相关 | 较多 | 重点记住a{} a:hover{} 实际开发 |
| :focus伪类选择器 | 选择获取光标的表单 | 和表单相关 | 较少 | input:focus |
5.元素显示
5.1 什么是元素显示模式
- 概念：元素显示模式就是元素（标签）以什么方式进行显示，如
<div>独占一行，<span>一行可以放很多。 - 作用：为了更好的布局网页。
- 分类：块元素和行内元素。
5.2 块元素
- 常见元素：
<h1>~<h6>、<div>、<p>、<ul>等，<div>标签是典型的块元素。 - 特点：
1.独占一行
2.高度、宽度、外边距和内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，可以在里面放行内或者块级元素
注意：文字类的元素不能使用块级元素。如
<p><h1>~<h6>，里面不能放其他块级元素。
5.3 行内元素
- 常见元素：
<span>、<a>、<em>等，<span>是典型的行内元素。 - 特点：
1.相邻行内元素在一行上可以显示多个
2.高、宽无法直接设置
3.默认宽度就是它内容的宽度
4.行内元素只能容纳文本或其他行内元素
注意：链接内不能再放链接。
5.4 行内块级元素
- 常见元素：
<img /> <input /> <td>，它们同时具有块级元素和行内元素的特点。 - 特点：
1.可以和相邻行内块元素在一行上，但是之间会有空白缝隙
2.默认宽度就是它本身内容的宽度（行内元素的特点）
3.高度、宽度、内边距和外边距都可以控制（块级元素的特点）
5.5 元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽高、内外边距 | 容器的100% | 任何元素 |
| 行内元素 | 一行可以放多个行内元素 | 不能直接设置宽高、内外边距 | 内容的宽度 | 容纳文本或其他行内元素 |
| 行内块级元素 | 一行可放多个行内块级元素 | 可以设置宽高、内外边距 | 内容的宽度 |
5.6 元素显示模式转换
- 概念：一个模式的元素需要另一种模式的特性
- 语法：
- 转换为块元素：
display:block; - 转换为行内元素：
display:inline; - 转换为行内块级元素：
display:inline-block;
- 转换为块元素：
网友评论