语法
1 2 3 4 5 6 7 8 9 10 11
| //直接写在HTML中小范围用,一般放css文件中再引用 <style> div { //选择器,{}包围属性值 backgroud: black; //属性: 值,以;换行结尾 border: 2px solid red; }
.news-input { color: green; } </style>
|
选择器
用于限定样式作用的范围
元素选择器
1 2 3 4
| div { //选择器,{}包围属性值 backgroud: black; //属性: 值,以;换行结尾 border: 2px solid red; }
|
多个选择器使用同一样式用 ,
分隔:
1 2 3
| div, p, h1 { backgroud: black; }
|
类选择器&ID选择器
.
类选择器:用来定义一类元素
#
ID选择器:一般用来定位页面中唯一的元素
属性选择器
1 2 3 4 5 6 7 8
| <div> <p class="text-white" title="此处有显示">白色字体</p> <p class="bg-dark">黑色背景</p> <div class="input-group news-input"> <input type="text" class="form-control" placeholder="请输入你的邮箱" /> <button title="点击此处" class="btn btn-dark btn-lg">注册</button> </div> </div>
|
使用 []
包含元素选择器:
1 2 3
| [title="点击此处"] { color: green; }
|
[title^="点击"]
:匹配 title
中的值以 点击
开头
[title*="此"]
:匹配 title
中的值包含 此
[title$="此处"]
:匹配 title
中的值以 此处
结尾
后代选择器
1 2 3 4 5 6
| <div class="a">这是A <div class="b">这是B <div class="c">这是C1</div> <div class="c">这是C2</div> </div> </div>
|
后代选择器以 空格
隔开,如 .a .b {...}
1 2 3 4 5 6 7 8 9 10 11 12
| div { padding: 10px; background: rgba(255, 0, 0, .2); //a表示不透明度,1完全不透明,0完全透明 }
.a { border: 2px solid black; }
.a .b { //匹配a类下的b background: rgba(0, 255, 0, .2); }
|
相邻选择器&通用相邻选择器
两者都只能从上往下选:
+
相邻选择器: .a + div {...}
,以 a
类为基准,选择之后一个 div
~
通用选择器: .a ~ div {...}
,以 a
类为基准,选择之后所有同级 div
伪类选择器
1 2 3 4 5 6
| button:hover { background: #fff; -webkit-transition: color 200ms; -o-transition: color 200ms; transition: color 200ms; //200ms颜色过渡 }
|
:
为标志,可以定义某个元素对应的动作状态,常用的有:
:focus
:可以输入的,具有焦点输入的元素
:link
:未访问的
:visited
:已访问过的
:hover
:鼠标移动到上面
:active
:鼠标点击时
伪元素选择器
1 2 3 4
| <body> <p>it is a test</p> <a class="help">点这里注册</a> </body>
|
css3开始以 ::
标记,区分伪类选择器
1 2 3 4 5 6 7
| p::first-letter { //定义第一个文字 font-size: 50px; }
.help::after { //在help类内容后头添加[?] content: [?] }
|
::first-letter
:第一个文字
::before
:段落前
::after
:段落最后 (content加内容)
::first-child
:第一个元素
::last-child
:最后一个元素
::nth-child(n)
:选择第n子元素,详细说明可见::nth-child
选择器权重
style 属性(内联) > ID 选择器 > 类选择器 / 属性选择器 / 伪类选择器 > 元素选择器
1 2 3
| div { color: red !important; }
|
可以覆盖行内样式的只有 !important
,我们一般不会首先使用这类核武器,它会碾压所有的样式规则,因为他拥有终极的权重,这也意味着 !important
是最不灵活的。
权重的计算
我们可以将纵轴的四级用数字的方式记录为 0, 0, 0, 0
,即行内样式, ID选择器, 类选择器, 元素选择器。这样无论选择器有多复杂我们都可以精确的计算出来,比如说如下例子中的 <a>
元素我们可以有很多中选择方式,但不同的选择方式的权重是不同的。
1 2 3 4 5
| <p> <span> <a id="sober" class="black">我是个清醒的链接</a> </span> </p>
|
选择器 |
权重 |
a |
0,0,0,1(最低) |
p a |
0,0,0,2 |
p > span a |
0,0,0,3 |
.black |
0,0,1,0 |
[class=”black”] |
0,0,1,0 |
a.black |
0,0,1,1 |
#sober |
0,1,0,0 |
a#sober.black |
0,1,1,1 |
p a#sober.black |
0,1,1,2(最高) |
属性
字体属性
1 2 3 4 5 6
| p { font-family: "微软雅黑", "Microsoft Yahei"; //优先使用微软雅黑,不存在就往后找,都没有则启用浏览器默认字体 font-weight: 600; //粗体,100-900 font-size: 18px; //也可以用百分比,按父元素大小比例显示 }
|
文本属性
1 2 3
| p { text-align: center; }
|
主要是文本排版相关,主要有以下属性:
text-align
:文本对齐方式
line-height
:行高,即行间距
text-decoration
:文本装饰:默认为 none
,常用 underline
,overline
,line-through
display
属性
1 2 3
| .block-box { display: block; }
|
block
:块,默认占整宽,气场最足,哪怕限制了宽度,他依然会用 margin
填充剩下的部分。
inline
:行内元素,指定 padding: 10px
时只会左右推开,上下不受影响
inline-block
:行内块,指定 padding: 10px
时会上下左右推开
none
:隐藏不显示
盒子模型
懒得码字,盗一张aardio论坛看到的图:
继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <style> .g-pa { font-size: 25px; }
.pa { color: royalblue; } </style>
<div class="gg-pa"> 曾爷爷:本尊展示 <div class="g-pa"> 爷爷:我要祖传 font-size <div class="pa"> 爸爸:我要祖传 color,继承 font-size <div class="me"> Yo,这行继承 color + font-size </div> </div> </div> </div>
|