对于css的总结:
css是前端的样式层,可以利用一些样式技术,美化页面或者进行网页布局,根据style的书写位置可以分为:
- ·行内样式,
- 内嵌样式
- 外链样式
行内样式:主要是写在开始标签的<>里面,添加一个style的属性。style具有属性值
Style属性的属性值写法:
样式属性名字:样式属性:属性值。
内嵌样式:使用style标签,并写在head标签里面。
书写规则:
- 内嵌样式需要书写在style标签里面。而且style标签一般放置在head标签内部。
- Style的type属性可有可无。属性值为:text/css。
- 要通过选择器:列如:p{}。选择将来要添加的样式的标签。
- 选择器后面要紧随大括号。不是小括号,也不是中括号。
- 在大括号里面添加样式。(对于换行不敏感。)
- 每一个样式结束之后,在后面别忘记加分号。
- 语法格式:
样式的名字:样式的属性值;。
css比较重要的部分便是选择器了
选择器分为:标签选择器 类选择器 id选择器以及通配符选择器。
标签选择器:顾名思义就是直接选中标签。列如:
//直接选中p标签,并添加样式
p{
color:red
}
类选择器:是通过给标签添加一个class属性,然后通过这个属性间接选中元素,从而给元素添加样式。如:
<head>
<style>
.box{
background:blue
}
</style>
</head>
<body>
<div class="box"></div>
</body>
id选择器:和类选择器类似,也是通过给标签添加属性,从而间接的选中元素,这个属性叫id 。 如:
<head>
<style>
.box{
background:blue
}
</style>
</head>
<body>
<div class="box"></div>
</body>
通配符选择器:一般用来初始化样式。默认的选择所有的元素。使用方法如下:
<head>
<style>
//通配符选择器使用 *,来设置初始样式
//一般情况下清除外边距和内边距
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
css具有两大特性:
- 继承性
- 层叠性
继承性
Extend(延伸)
继承性:
有时候,我们法仙没有被选择器选中的标签,也添加上了样式。由于这个标签的祖先元素添加了样式。导致这个没有被选择器选中的标签也继承了样式。
注意:祖先元素的文字相关的样式,可以被后代元素所继承。
层叠性
如果网页中标签同时被多个选择器选中,添加相同样式,其实CSS会通过一些手段进行对比,将最后一个选择器层叠掉,覆盖其他选择器。
在CSS中权重高的选择器会层叠掉权重低的选择器。
基础选择器:根据选择器选择的范围大小划分权重,选择器选择范围越小,权重越高。
Id选择器>类选择器>标签选择器>通配符选择器。