Web前端-CSS必备知识点
css基本内容，类选择符，id选择符，伪类，伪元素，结构，继承，特殊性，层叠，元素分类，颜色，长度，url，文本，字体，边框，块级元素，浮动元素，内联元素，定位。
链接：
<link rel="stylesheet" type="text/css" href="sheet.css" title="default">
link标签：
<link rel="stylesheet" type="text/css" href="sheet.css" title="default">
样式：
h1 { color: red; };
@import指示引入多个外部样式表的链接
<style type="text/css">
@import url(styles.css);
p { color: red };
</style>
css注解
/* dashucoding */
内联样式：
<p style="color: red;" >dashucoding</p>
规范：
选择符 + 声明
p { color: red; } // 选择符 属性 值
p { font-weight: bold; }
伪类和伪元素
| 属性 | 说明 |
|---|---|
:link |
超链接是一个未访问过的地址 |
:visited |
访问过的网页 |
:active |
处于活跃的状态 |
a { color: red; }; a:visited { color: red; };
伪元素：
:first-letter 和 :first-line 首字母 和 首行
p:first-letter { color: red; }
css有个特点是继承，可以依赖于祖先-后代关系。
!important有这个标记，表示这条规则优先
p { color: red !important; }
元素分类：
三种类型：块级元素，内联元素，列表项元素
块级元素有段落，标题，列表，表格，div，body等。内联元素有a，em，span等。列表项元素有li元素。
dispaly: block | inline | list-item | none
颜色：
rgb(100%, 100%, 100%) 红蓝绿 ，白色
单位：
em 给字体的font-size值
文本：
文本缩进
text-indent <长度> | <百分比>
p { text-indent: -4em; }
text-align属性
用于元素中文本行的对齐方式
text-align: left | center | right | justify
white-space空白
white-space pre | nowrap | normal
p { white-space: normal; } 将如何空白压缩成单个空白符
white-space属性值为pre，可以将元素内的空白忽略。
p { white-space: pre; }
行高：
line-height文本行的基线间的距离。
纵向对齐，vertical-align
vertical-align: baseline使元素的基线同父元素的基线对齐。
vertical-align: sub; vertical-align: super;
低端对齐： vertical-align
顶端对齐：vertical-align
vertical-align: top; vertical-align: text-top;
中间对齐：
vertical-align: middle;
文字间隔：
word-spacing 长度 | normal
word-spacing: 0.3em;
字母间隔：
letter-spacing: 长度 | normal
文本转换：
text-transform uppercase | lowercase | capitalize | none
文本修饰：
text-decoration: none | overline | line-through
框：
width 长度 | 百分比 | auto
height 长度 | auto
margin 长度 | 百分比 | auto
margin: top right bottom left
margin-top
margin-right
margin-bottom
margin-left
border-width // thin medium thick
border-style: none;
padding
浮动与清除
float: left | right | none
<img src="" style="float: right"; alt="dashu">
float: none 用于防止元素浮动
清除浮动元素
clear left | right | both | none
clear原理是增加元素的上边界，使它在低于浮动元素的位置结束，清除元素的上边界宽度当有效地忽略。
list-style-type disc
disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none
list-style-type
disc 为实心圆
circle 为空心圆
square 实心或空心方块
列表项图像
list-style-image <url> | none
列表项位置：list-style-position
list-style-position: inside | outside
定位：
position: static | relative | absolute | fixed | inherit
溢出：
overflow: visible | hidden | scroll | auto | inherit
溢出剪切：
overflow-clip: rect | auto | inherit
元素剪切：
clip rect | auto | inherit
元素可见性：
visibility: visible | hidden | collapse | inherit
相对定位：
position: relative;
绝对定位：
position: relative;
固定定位：
position: fixed;
层叠定位：
z-index: integer | auto
轮廓：
outline, outline-color, outline-style, outline-width
边框：
border-top-color, border-right-color, border-bottom-color
border-left-color, border-top-style
border-right-style, border-left-style
实例：
<table cellspacing=0 border cellpadding="10">
<tr>
<td rowspan=2>dashu</td>
<td colspan=2>dashu2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。