前端菜鸟笔记 Day-5 CSS 高级

文章大纲来源： 【Day 5】CSS 高级

• CSS 选择器
• CSS 拓展
• CSS 单位
• CSS 参考手册

CSS 选择器

内容引用： CSS 选择器

元素选择器

html { ... }

选择器分组

h2, p { ... }

类选择器

.important { ... }
p.warning  { ... }
.important.warning { ... }
/* 选择同时拥有这两个类名的元素 */

ID选择器

#intro { ... }

属性选择器

a[href] { ... }
a[href][title] { ... }
a[href="..."] { ... }
p[class="important warning"] { ... }
/* 完全匹配的属性内容 */
p[class~="important"] { ... }
/* 部分匹配的属性内容 */

后代选择器

h1 em { ... }

子元素选择器

h1 > strong { ... }

相邻兄弟选择器

h1 + p { ... }

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

语法是 selector : pseudo-class {property: value} 。

a:link { color: #FF0000 }        /* 未访问的链接 */
a:visited { color: #00FF00 }    /* 已访问的链接 */
a:hover { color: #FF00FF }    /* 鼠标移动到链接上 */
a:active { color: #0000FF }    /* 选定的链接 */
p:first-child { font-weight: bold; }

CSS 拓展

内容引用： CSS 高级

水平对齐

• 使用 margin:auto 水平对齐

margin-left:auto;
margin-right:auto;

• 使用 position 左或右对齐

position:absolute;
right:0px;

• 使用 float 左或右对齐

float:right;

尺寸

height
width
line-height
max-height
max-width
min-height
min-width

CSS 单位

内容引用： CSS 单位

相对长度

指定了一个长度相对于另一个长度的属性，对于不同的设备相对长度更适用。

em
ex
ch
rem
vw
vh

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。

绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

cm
mm
in
px
pt
pc

CSS 参考手册

使用时如果有疑问可以随时查看[【CSS 参考手册

】]( http://www.w3school.com.cn/cs... 。

个人静态博客：

• 气泡的前端日记： https://rheabubbles.github.io