<strong></strong>或者<b></b>标签：加粗字体
<em></em>或者<i></i> 标签：倾斜字体
<del></del>或者<s></s> 标签：删除字体
<ins></ins>或者<u></u> 标签：下划线
div和span标签
共同点：没有语意的，都是盒子
不同点：
div标签：用来布局，一行只有一个，只占一行。
span标签：用来布局，一行有多个。
<img />标签：图片标签，单标签
属性如下：
src：图片路径 作用：必须属性
alt:替换文本， 作用：图像显示不出来的时候用文字代替。
title：提示文本 作用：鼠标放到图片上显示文字。
width：像素值 作用：修改宽度
height:像素值 作用：修改高度
border： 作用：图片别框
属性没有前后顺序，必须属性放在前面。
属性必须写在标签的后面。
属性格式：属性名="属性值"
标签名与属性,属性与属性之间均已空格分开
超链接标签：
<a></a>标签：
属性：
href：必须属性，用于指定连接目标地址
target：用于指定页面打开方式，
“_self”默认窗口打开，“_blank”新窗口打开
表格标签：不是用来布局，而是用来展示数据。
<table></table>标签：表格标签
<tr></tr>标签：代表一行
<td></td>标签：代表一格
<th></th>标签：代表第一行单元格，突出重要性，加粗居中显示
<thead></thead>标签：表格头部
<tbody></tbody>标签：表格主体
<tfoot></tfoot>标签：表格底部
<caption></caption>标签:用于展示表格标题，通常作为第一个子元素
属性：
border:表格的边框，默认的0
width：宽度
height：高度
cellspacing:单元格与单元格之间的距离
cellpadding：单元格与内容之间的距离
align是表格位置: left左侧/center中间/right右侧
注意：
当给表格设置居中整个表格会居中（文字不会居中）当指定tr 或者td 文字居中
合并单元格：
colspan:列合并
rowspan：行合并
列表标签：列表用来布局的。
无序列表：没有顺序，ul里面只能包含li
css引入方式：
css的三种样式表：
1.行内样式表（行内式）
2.内部样式表（嵌入式）
3.外部样式表（链接式）
内部样式表：
是写到html页面内部，是将所有css代码抽取出来，
单独放到一个<style>标签中
<style>标签理论上可以放在html文档的任何地方，
但一般会放在<head>标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有完全分离
使用内部样式表设定css，通常也被称为嵌入式引入
行内样式表：
是在元素标签内部的style属性中设定css样式，合适于修改简单样式
<p style="color:red;"></p>
style其实就是标签的属性
在双引号中间，写法要符合css规范
可以控制当前的标签设置样式
只有对当前元素添加简单演示的时候，可以考虑使用
因为在某一行写，通常也被称为行内样式表
外部样式表：
样式单独写到css文件中，之后吧css文件引入到html页面中使用
引入外部样式分为两步：
1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中
2.zaihtml页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
rel:定义当前文档与被链接文档之间的关系，在这里需要指定stylesheet，
表示被链接的文档是一个样式表文件。
href：定义链接外部样式文件的URL
使用外部样式设定css，通常也被称为外链式或链接式引入
Emmet语法：
是Zen coding，它使用缩写，来提高html/css的编写速度，
Vscode内部已经集成该语法
1.快速生成html结构语法
2.快速生成css样式语法
css复合选择器：
什么是复合选择器？
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
复合选择器可以更准确，更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器，子选择器，并选择器，伪类选择器
后代选择器：
后代选择器又称为包含选择器，可以选择父元素里面子元素
写法就是把外层标签写前面，内存标签写后面，中间用空格分隔
当标签发生嵌套时，内层标签就成为外层标签的后代
元素1 元素2{样式声明}
选择元素1里面的所有元素2（后代元素）
元素1和元素2中间用空格隔开
元素1是父级，元素是子级，最终选择的是元素2
元素2可以使儿子也可以是孙子，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器
子选择器：
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，
简单理解就是选亲儿子元素
语法：
元素1>元素2{样式声明}
表示选择元素1里面的所有直接后代（子元素）元素2
元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子
并集选择器：
并集选择器可以选择多组标签，同时为他们定义相同的样式，
通常用于集体声明
并集选择器是个选择器通过英文逗号,连接而成，
任何形式的选择器都可以作为并集选择器的一部分
语法：
元素1,元素2{样式声明}
语法表示选择元素1和元素2
注意：
元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
并集选择器喜欢竖着写
最后一个不要逗号
交集选择器：
更精准定位
元素1.元素2{样式声明}
伪类选择器：
用于向某些选择器添加特殊效果，
比如给链接添加特殊效果，或选择第一个，第n个元素
伪类选择器书写最大的特点是用冒号（:）表示
a:link 选择所有未被访问的链接
a:visited 选择所有已被 访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
注意：
为了生效，link-visited-hover-active LVHA顺序
需要给链接单独指定样式
focus伪类选择器：
:focus用于选取焦点的表单元素
css的元素显示模式:
块元素：
独占一行的是块元素
背景图像固定（背景附着）
background-attachment属性：
设置背景图像是否固定或者固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
参数：
scroll：背景图像是随对象内容滚动的
fixed：背景图像固定的
背景复合写法：
为了简化背景属性的代码，合并写在同一个background中。
没有特定的书写顺序，一般习惯约定顺序：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
背景色半透明：
background：reda（0,0,0,0.3）
最后一个参数是alpha透明度，取值范围在0~1之间
（0是100%透明，1是100%不透明）
习惯把0.3的0省略，写为background：reda（0,0,0,.3）
背景半透明是指盒子，盒子的内容不受影响
css3新增属性，是ie9+版本器才支持
实际开发，我们不太关注兼容性写法，可以放心使用
css的三大特性：
1.层叠性：
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式
层叠主要解决样式冲突的问题。
层叠性原则：
样式冲突，遵循的原则就是就近原则，那个样式离结构近，就执行那个样式
样式不冲突，不会层叠
2.继承性：
css中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。
简单理解就是：子承父业
恰当的使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式
（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高继承
body {
font:12px/1.5microsft yahei
}
行高可以跟单位也可以不跟单位
如果子元素没有设置行高，这回继承父元素的行高为1.5
此时子元素的行高是：当前子元素的字体大小*1.5
body行高1.5这样写最大的优势就是里面子元素可以根据自己文字大小自动调整行高
3.优先级：
当同一个元素指定多个选择器，就会有优先级产生
选择器相同，则执行层叠性
选择不同，则根据选择器权重执行
选择器权重：
继承或者*：0,0，0,0
元素选择器：0,0,0,1
类选择器，伪类选择器：0,0,1,0
ID选择器：0,1,0,0
行内样式 style="":1,0,0,0
!important重要的：无穷大
|
|
收藏
淘帖
踩
