1. Css书写位置介绍
1.1 内嵌式写法
1.2 外联式写法
写法：<link rel=“stylesheet” href="">
- 新建一个文件，后缀名以.css命名（css文件）
- 在html页面中通过<link rel=“stylesheet” href="">标签将css文件引入
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="1.css">
</head>
1.3 行内式写法
通过给标签设置style属性来设置样式。
<p style="color:red; font-size: 30px;">p中的文字</p>
<span class="one" style="color:red; font-size:30px">span1</span>
1.4书写方式之间的区别
①内嵌式写法：
- 代码可维护性较差，没有实现css代码与html结构的完全分离
- 影响的范围只有当前页面
②行内式写法：
- 代码可维护极差，css代码与html结构没有实现分离
- 影响的范围只有当前标签
③外联式写法：
- 代码可维护性高，css与html结构完全分离
- 影响范围广，当前整个网页站点
2.Html标签的分类
显示方式不同进行的分类
2.1 块级元素
典型代表：
div,form,ul,p,li,h1…
特点：
①元素自己独占一行显示（与宽度无关）
②设置宽度和高度
③当嵌套一个块级元素，“子”元素如果不设置宽度，那么该子元素的宽度为“父”元素的宽度
2.2 行内元素
典型代表：
span，a，font，strong…
特点：
①元素在一行上显示
②不能直接设置宽度和高度
2.3 行内块元素
典型代表：
image，input（表单控件）
特点：
①元素在一行上显示
②可以设置宽度和高度
2.4 元素之间的转换
display:inline 将元素转化为行内元素
display:block 将元素转化为行内块元素
display:block 将元素转为块元素
3.Css特性
3.1 层叠性
样式的覆盖。样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。
层叠性发生的前提：样式冲突
.two{
color: green;
}
.one{
color: red;
}
</style>
3.2 继承性
继承性发生的前提是标签之间属于一种嵌套关系
-
文字颜色可以实现继承
-
文字大小可以实现继承
-
字体可以实现继承
-
行高可以实现继承
(与文字有关的属性都可以实现继承)
特殊性：
<a href="#"></a> 不能继承“父”元素中的文字颜色（层叠掉了）
<h1></h1> 标题标签不能继承父元素中的文字大小
3.3 优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
例如：
0 1 10 100 1000 1000以上
3.3.1优先级的特点
继承的权重为0
3.3.2权重会叠加
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
①继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
②行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
③权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
④所有都相同时，声明靠后的优先级大。
⑤CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
8566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
