css层叠样式表(英文全称：Cascading Style Sheets)
样式表: 用来描述元素在页面中的展示效果,可以很方便的将页面的元素的展示效果分离出来单独控制.
层叠: CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式(样式优先级)。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果
css的载体
样式要作用于页面需要和页面关联,关联方式有三种:
行内样式(internal style): 直接写到标签内的style属性当中
<p style=‘color: red;’>这是段落</p>
内联样式(inline style): 写到当前页面中,用style标签承载控制
style标签写到head里面
<style>
p{color: red}
</style>
外部样式(external style): 以单独文件(.css)存放样式表,将需求的样式表用link标签引入,外部样式表的写法和内联样式一致
<link rel=‘stylesheet’ href=‘这里引用资源地址’>
优缺点：
行内样式: 直接作用到当前元素身上, 清晰明了, 不存在样式的冲突或不准确. 优先级最高, 但是不利于维护,代码冗长
内联样式: 需要选中元素才能设置样式, 不直观, 存在样式冲突(体现了层叠作用), 利于维护, 利于展示页面的层级结构,结构与样式分离, 可复用
常用的css属性
width：100px； /宽度/
height ：100px； /高度/
background-color；red； /背景颜色/
color：black； /字体颜色/
font-size：12px； /字体大小/
border：1px solid black； /边框/
关于颜色的写法：
| 方法 | 例如 |
|---|---|
| 1.英文单词 | 例如 black red green |
| 2.rgb(x,y,z) | 例如rgb（158，250，125） x,y,z的取值范围0~255 |
| 3.rgba（x,y,z,a） | 例如rgba（125，160，180，0.5） x,y,z的取值范围0~255 ，a的取值范围0~1，a是指alpha不透明程度 |
| 4.十六进制 | 例如#123abc ，特殊的三原色 |
css选择器权重
| 选择器类型 | 作用 |
|---|---|
| 标签选择器 | 选择对应标签名的标签 例如 div {…} |
| class选择器 | 选择对应class名字的标签 例如 .box {…} |
| id选择器 | 选择对应id名字的标签 例如 #box {…} |
| 通配符选择器 | 选到所有标签 例如 * {…} |
| 后代选择器 | 选到对应子集标签 例如 .box p {…} |
css选择器权重（哪个选择器分量重）
id选择器 > class选择器 > 标签选择器 > 通配符选择器
补充：
1. 后代选择器的强化版
例如: div>p{…}
从div里面选中p标签,不可以跳级,严格的父子关系,选中的元素永远是挨着大括号的元素
2.相邻(毗(pi4)邻)选择器
例如: li+li{…}
如果li同级相邻的为li标签,选择后面那个li标签同级关系,选中的元素永远是挨着大括号的元素
3.兄弟后代选择器
例如: a~li{…}/* shift+tab上面的那个键*/
如果a同级的有li标签,都能选择得到,选中的元素永远是挨着大括号的元素
css 取名方式
1.什么时候通过id取名？
如果网页中有唯一的表现形式，那这个表现就可以通过id取名，例如网站中的logo标志只有一个
2.什么时候通过class取名？
如果网页中有类似的表现形式，那么这类表现形式就通过class取名
css 命名规范
使用类选择器,尽量避免使用ID选择器定义样式
ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用.
1.命名以字母开头,不能单个字母,不允许带有广告的的单词: ad/adver/advertising等
2.全小写,以 – 作为连字符,不允许使用 _ 下划线, - 不要和数字连用
代码及效果图展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:100px ;/*宽度*/
height: 100px;/*高度*/
background-color:blue;/*背景颜色*/
color:yellow;/*字体颜色*/
font-size:12px;/*字体大小*/
border:1px solid black; /*边框*/
}
.box{
background-color: red;
}
#title{
background-color: pink;
}
</style>
</head>
<body>
<div class="box" id="title">
css规范
</div>
</body>
</html>
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
