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都具有最大优先级。