CSS语法：
CSS基础选择器：
- 标签选择器：
定义：把HTML标签作为选择器，按标签名称分类
作用：可以把某一类标签全部选出来
优点：能快速为页面中同类标签统一设置样式
缺点：不能设置差异化样式，只能选择全部的当前标签 - 类选择器：
作用：差异化选择不同的标签，单独选一个或者几个标签
语法：用class属性来调用（class：类）
.类名 {属性1：属性值1 ...}
多类名选择器：各个类之间用空格隔开
可以把一些标签元素相同的样式（共同的部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省CSS代码，统一修改也比较方便
- id选择器：
定义：为标有特定id的HTML元素指定特定的样式（HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义）
语法：
#id名 {属性1：属性值1 ...}- id选择器和类选择器的区别：
类可以有多个，id只能有一个
类选择器在修改样式中使用的多，id选择器一般用于页面唯一性元素上，经常和JavaScript搭配使用 - 通配符选择器：
定义：通配符选择器使用 “ * ” 定义，表示选取页面中所有的元素（标签）
语法：
*{属性1: 属性值1 ...}
使用：不需要调用，自动给所有元素使用样式，特殊情况使用：清除所有标签的内外边距
总结：
CSS字体属性：
- 作用：用于定义字体系列、大小、粗细、文字样式
- 字体系列：使用
font-family属性定义
p {font-family:"微软雅黑";} - 字体大小：使用
font-size属性定义字体大小
p {font-size:20px;} - 字体粗细：使用
font-weight属性设置文本字体的粗细
p {font-weight:bold;}
- 文字样式：使用
font-style属性设置文本的风格
p {font-style:normal;}
- 字体复合属性：不能更换顺序，
font-size和font-family不可以省略，其他的可以不写
body {font:font-style font-weight font-size/line-height font-family;} - 字体属性总结：
CSS文本属性：
- 作用：定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
文本颜色：color属性div { color: skyblue; }
- 对齐文本：
text-align属性用于设置元素内文本内容的对齐方式div { text-align: center;}
- 装饰文本：
text-decoration属性规定添加到文本的修饰可以给文本添加下划线、删除线、上划线等div { text-decoration：underline;}
- 文本缩进：
text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进
em：是一个相对单位，就是当前像素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小div { text-indent: 20px;} /* 向右缩进20像素 */p { text-indent: 2em;} /* 向右缩进两个字的距离 */ - 行间距：
line-height属性用于设置行间距离（行高），可以控制文字行与行之间的距离p { line-height: 26px;} - 文本属性总结：
CSS引入方式：
- 内部样式表（嵌入式）：
写到HTML页面内部，将所有CSS代码抽取出来，单独放到一个<style>标签中
<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中
代码结构清晰，但是并没有实现结构与样式完全分离
``
- 行内样式表（行内式）：
在元素标签内部的style属性中设定CSS样式，适合于修改简单样式
<div style="color:skyblue; font-size:14px;">天蓝色，14像素</div>外部样式表（链接式）：
适合样式比较多的情况：样式单独写到CSS文件里，之后把CSS文件引入到HTML页面中使用
1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中
2.在HTML页面中，使用标签引入这个文件
link rel="stylesheet" href="css文件路径"
CSS引入方式总结：
Emmet语法：
- 快速生成HTML结构语法
生成标签，直接输入标签名，按tab键即可，比如div，然后tab键，就可以生成<div></div>
如果想要生成多个相同标签，加上*号就可以了，比如div*3就可以快速生成3个div
如果有父子级关系的标签，就可以用 ">" 比如ul>li就可以了
如果有兄弟关系的标签，用 "+" 就可以了，比如div+p
如果生成带有类名或者id名的，直接写.demo或#nav按tab键就可以了
如果生成的div类名是有顺序的，可以用自增符号 "$"
如果想要在生成的标签内部写内容可以用 {...} 表示- 快速生成CSS样式语法
CSS基本采取简写形式即可
比如w200按 tab 键可以生成width:200px;
比如lh26按 tab 键可以生成line-height:26px;复合选择器：
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 由两个或多个基础选择器，通过不同的方式组合而成的
- 常用：后代选择器、子选择器、并集选择器、伪类选择器等
- 后代选择器：
定义：又称为包含选择器，可以选择父元素里面子元素
写法：把外层标签写在前面，内层标签写在里面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代
语法：元素1 元素1的后代 { 样式声明; }- 子选择器：
用法：只能选择作为某元素最近一级子元素
语法：元素1 > 元素2 { 样式声明; }- 并集选择器：
定义：并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明
写法：各选择器通过英文 (,) 连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法：元素1，元素2 { 样式声明; }- 伪类选择器：
定义：用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或选择第1个，第n个元素
写法：用冒号（ : ）表示，比如:hover 、:first-child- 链接伪类选择器：
a:link：选择所有未被访问的链接
a:visited：选择所有已被访问的链接
a:hover：选择鼠标指针位于其上的链接
a:active：选择活动链接（鼠标按下未弹起的链接）focus伪类选择器：
用法：用于选取获得焦点的表单元素
写法：
`input:focus {background-color:yellow;}`
- 复合选择器总结：
元素显示模式：
定义：元素（标签）以什么方式显示，比如`<div>`自己独占一行，比如一行可以放多个`<span>`
- 块元素：
常见：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>...
特点：
独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及合资，里面可以放块元素和行内元素- 行内元素：
常见：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>...
特点：
相邻行内元素在一行上，一行可以显示多个
宽、高直接设置是无效的
默认宽度是它本身内容的宽度
行内元素只能容纳文本或其它行内元素- 行内块元素：
常见：<img/>、<input/>、<td>...
特点：
和相邻行内元素（行内块）在一行，但是它们之间有空白间隙，一行可以显示多个
默认宽度就是它本身内容的宽度
高度、行高、外边距以及内边距都可以控制- 元素显示模式总结：
- 元素显示模式转换：
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;CSS的背景：
- 背景颜色：background-color:颜色值 / 十六进制 / RGB代码;
- 注：一般情况下元素背景颜色默认值是透明（transparent）
- 背景图片：
background-image:none | url(url)- 背景平铺：
background-repeat:repeat | no-repeat | repeat-x | repeat-y- 背景图片位置：
background-position:x y;- 背景图像固定：
background-attachment:scroll | fixed- 背景属性复合写法：
background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置- 背景总结：
2 条评论
?未来展望类?
《金刀出鞘》动作片高清在线免费观看：https://www.jgz518.com/xingkong/108215.html