CSS预习

CSS1

1. css字体属性

CSS Fonts(字体）属性用于定义字体系列，大小，粗细和文字样式。

1. 1. 字体系列

CSS使用font-family属性定义文本的字体系列。

p{ font-family: "微软雅黑";}
div{font-family:Arial,"Microsoft Yahei","微软雅黑";}

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能显示
• 最常见的几个字体：body{font-family:“Microsoft Yahei”,tahoma,arial;}

1. 2. 字体大小

CSS使用font-size属性定义字体大小

p{
font-size: 20px;
}

• px（像素）大小设是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为16px
• 不同浏览器可能默认显示的文字大小不一样，我们尽量给一个明确大小，不要默认大小
• 可以给body指定整个页面大小

1. 3. 字体粗细

CSS使用font-weight属性设置文本字体的粗细

p{
font-weight: bold;
}

属性值	描述
normal	默认值
bold	定义粗体（加粗的）
100-900	400等同于normal。700等同于bold,数字后面不跟单位

1. 4. 文字样式

CSS使用font-style属性设置文本的风格

p{
font-style: normal;
}

属性值	作用
normal	默认值，浏览器显示标准字体样式
italic	浏览器显示斜体

2. CSS文本属性

2. 1. 文本颜色

color属性用于定义文本的颜色

div{
color: red;
}

表示	属性值
预定义的颜色值	red,green,blue等
十六进制	#FF0000,#FF6600等
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

2. 2. 对齐文本

text-align属性用于设置元素内文本内容的水平对齐

div{
text-align: left;
}

属性值	解释
left	左对齐
right	右对齐
center	居中对齐

2. 3. 装饰文本

text-decoration属性规定添加到文本的修饰。

div{
text-decoration: underline;
}

属性值	描述
none	默认，没有装饰线
underline	下划线，链接a自带下划线，可删
overline	上划线
line-through	删除线

2. 4. 文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div{
text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p{
text-indent: 2em;
}

em是一个相对单位，就是当前元素1个文字的大小。

2. 5. 行间距

line-height属性用于设置行间距。

p{
line-height: 26px;
}

3. CSS引入方式

3. 1. CSS的三种样式表

• 行内样式表（行内式）
• 内部样式表（嵌入式）
• 外部样式表（连接式）

3.1.1内部样式表

内部样式表是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个style标签中

<style>
  div{
     color: red;
     font-size: 16px;
     }
</style>

• style 标签理论上可以放在HTML文档的任何地方，但一般会放在文档的head标签中
• 通过这种方式，可以方便控制当前整个页面的元素样式设置
• 代码结构清晰，但没有实现结构与样式的分离

3.1.2 行内样式表

行内样式表是在元素标签内部的 style 属性中设定的CSS样式，适合修改简单样式。

<div style-"color: red; font-size: 12px;">三生三世十里桃花</div>

• style 其实就是标签的属性
• 在双引号中间，写法要符合CSS规范
• 可以控制当前的标签设置样式

3.1.3 外部样式表

引入外部样式表分两步：

1. 新建一个后缀名为.css 的样式文件，把所有CSS代码都放到这个文件中
2. 在HTML页面中，使用link 标签引入这个文件
   <link rel="stylesheet" herf="css文件路径">

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet”，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL,可以是相对路径，也可以是绝对路径

Chrome调试工具

Chrome浏览器提供了一个非常好用的调试工具

使用调试工具

• Ctrl+滚轮 可以放大开发者工具代码大小
• 左边是HTML元素结构，右边是CSS样式
• 右边CSS样式可以改动数值和查看颜色
• Ctrl+0 复原浏览器大小
• 如果点击元素，发现右侧没有样式引入，极可能是类名或者样式引入错误
• 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误

CSS2

1. Emmet语法

1.1 快速生成HTML结构语法

• 生成标签，直接输入标签名按tab键
• 如果想要生成多个相同标签，加上就可以了，比如div3可快速生成3个div
• 如果有父子级关系的标签，可以用>,比如ul>li 就可以了
• 如果有兄弟关系的标签，用+ 就可以了，比如div+p
• 如果生成带有类名或者id名字的，直接写.demo或者#two tab 键就可以了
• 如果生成的div类名是由顺序的，可以用自增符号$
• 如果想要在生成的标签内部写内容可以用（）表示

2. CSS的复合选择器

2.1 什么是复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

• 复合选择器可以更准确，高效地选择目标元素（标签）
• 复合选择器是由两个或多个基础选择器，通过不同方式组合而成
• 常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等

2.2 后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
语法：

元素1 元素2 {样式声明}

上述语法表示选择元素1里面所有的元素2
例如：

ul li{样式声明} /* 选择ul里面所有的li标签元素 */

2.3 子选择器（重要）

子选择器只能选择作为某元素的最近一级子元素。

语法：

元素1>元素2{样式声明}

上述语法表示选择元素1 里面所有直接后代元素2

例如：

div>p{样式声明} /*选择div里面使用最近一级p标签元素*/

元素2必须是亲儿子，其亲孙子，重孙子之类的不归他管

2.4 并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

语法：

元素1,元素2{样式声明}

上述语法表示选择元素1和颜元素2
例如：

ul,div{样式声明}/*选择ul 和 div 标签元素*/

• 元素1 和元素2中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体声明

2.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，不然给链接添加特殊效果，或选择第一个，第n个元素。
伪类选择器最大的特点是用冒号（：）表示，如：:hover,:first-child.
伪类选择器由很多，包括链接伪类，结构伪类等。

a:link    /*选择所有未被访问过的链接*/
a:visited  /*选择所有已访问过的链接*/
a:hover    /*选择鼠标指针位于其上的链接*/
a:active   /*选择活动链接（鼠标按下未弹起的链接）*/

2.5.1 链接伪类选择器

注意事项

1. 伪类确保生效，请按照LVHA的顺序声明：link,:visited,:hover,:active
2. 记忆方法：lv包包hao
3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

链接伪类选择器实际开发中的写法：

/*a是标签选择器 所有的链接*/
a{
color: gray;
}

/*:hover是链接伪类选择器 鼠标经过*/
a:hover{
color: red;  /*鼠标经过时，由原来的灰色变为红色*/
}

2.5.2 focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况 input 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus{
background-color:red;
}

选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个用法

2. 元素显示模式

2.1 什么是元素显示模式

作用：网页标签很多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

于是显示模式就是元素以什么样的方式进行显示，比如 div 中间独占一行，比如一行可以放多个 span

HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素由 h1~h6, p , div ,ul, ol , li 等
块元素特点：

• 比较霸道，自己独占一行
• 高度，宽度，外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或者块级元素

注意：

• 文字类的元素内不能使用块级要素
• p 标签主要用于存放文字，因此 p 里面不能放块级元素，特别是不能放 div
• 同理， h1~h6 等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素由有 a , strong , b , em ,del , s , ins , u , span 等，其中span标签是最典型的行内标签。

行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高，宽直接设置时无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意

• 链接里面不能再放链接
• 特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签—— img ,input , td , 他们同时具有块元素和行内元素的特点。

行内块元素的特点：

1. 和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个
2. 默认宽度就是他本身内容的宽度
3. 高度，行高，外边距及内边距都可以控制

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度和高度	他本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	他表示内容的宽度