先回顾昨日的内容,昨天讲了 w3c 的整个架构,由结构层>布局层>内容层三部分组成,了解了 css 的三种引入方式,行间式最简单直接;内联式解耦合,可读性强;外联式适合团队高效开发,耦合性低,复用性强,了解了三种选择器,并且 id 选择器>类选择器>标签选择器>通配选择器,还有通过多类名选择器来操作标签。还有常用的长度单位包括 px、cm、mm、em、vw、in,颜色属性有 rgb、rgba 等,还有操作文本样式的属性调整字体大小,字体风格,文本对齐,缩进,字间距,词间距等,其中 font 是综合性描述:font: 风格 大小/行高 字族(风格可以省略),比如font: 100 normal 60px/200px 'stsong';最后讲的就是 display,这是一个重点难点,display 目前只介绍了三个属性值:inline:不支持宽高,宽高由文本内容撑开,只能嵌套 inline 标签同行显示;block:像 p 标签,h 标签的 display 属性就是 block,支持所有的 css 样式,默认有宽高(自定义后取自定义值),能嵌套所有标签,异行显示;inline-block:支持所有css 样式,默认没有宽高(由内容撑开(可以自定义宽高))不建议嵌套任意标签,同行显示。
群组选择器可以同时控制多个选择器,语法:逗号分隔,控制多个
<!doctype html> <html> <head> <meta charset='utf-8'> <title>群组选择器</title> <style type='text/css'> .d1,div,#a { color: green; } </style> </head> <body> <div class='d1'>001</div> <div>002</div> <div id='d3'>003</div> </body> </html>
子代选择器用>连接 body > div { color: red; } 后代选择器用空格连接 .sup .sub { color: red; }
相邻选择器用+连接 .d1 + .d2 { color: red; } 兄弟选择器用~连接 .d1 ~ .d3 { color: red; }
<div class="d" id="dd"></div> div.d#dd { color: red; } <div class="d1 d2 d3"></div> .d1.d2.d3 { color: red; }
选择器 | 权重 |
---|---|
通配 | 1 |
标签 | 10 |
类、属性 | 100 |
id | 1000 |
!important | 10000 |
:before, :after { content: "ctn"; }
风格 | 解释 |
---|---|
solid | 实线 |
dashed | 虚线 |
dotted | 点状线 |
double | 双实线 |
groove | 槽状线 |
ridge | 脊线 |
inset | 内嵌效果线 |
outset | 外凸效果线 |
值得个数 | 方位 |
---|---|
1 | 上下左右 |
2 | 上下 | 左右 |
3 | 上 | 左右 | 下 |
4 | 上 | 右 | 下 | 左 |
赋值个数 | 方位 |
---|---|
1 | 上下左右 |
2 | 上下 | 左右 |
3 | 上 | 左右 | 下 |
4 | 上 | 右 | 下 | 左 |
成员 | 解释 |
---|---|
border-top-left-radius | 左上 方位 |
border-top-right-radius | 右上 方位 |
border-bottom-left-radius | 左下 方位 |
border-bottom-right-radius | 右下 方位 |
赋值个数(值类型:长度 | 百分比) | 解释 |
---|---|
1 | 横纵 |
2 | 横 | 纵 |
赋值个数(值类型:长度 | 百分比) | 解释 |
---|---|
1 | 左上 右上 左下 右下 |
2 | 左上 右下 | 右上 左下 |
3 | 左上 | 右上 左下 | 右下 |
4 | 左上 | 右上 | 右下 | 左下 |
格式 | 解释 |
---|---|
1 / 1 | 横向 | 纵向 |
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
值 | 描述 |
---|---|
inline | 内联 |
block | 块级 |
inline-block | 内联块 |
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论