常见css样式笔记

-------------------text（文本）---------------------------

text-indent（缩进）:2em（px） 首行缩进
text-align（对齐）:center（居中） 居中对齐
left 左对齐
right 右对齐
text-decoration（装饰）: overline 上划线
line-through 中划线
underline 下划线
text-overflow:ellipsis（省略号） 溢出文本显示为省略标记

-------------------font（字体）---------------------------

font-size（大小） 字体大小
font-weight（粗细）:normal（正常） 字体粗细
bold（粗体字符）
bolder（更粗的字符）
font-family:“宋体” 字体系列

-------------------border（边框）-------------------------

border-top 边框顶端
border-right 边框右边
border-bottom 边框下边
border-left 边框左边
border-style: none（无边框） 边框样式
solid（实线边框）
dashed（虚线边框）
border-collapse:collapse 边框合并
border-color 边框颜色
border-radius（半径）:10px 边框圆角
简写属性（常用）
border:边框的粗细 边框的样式 边框的颜色

----------------display（显示）---------------------------

display:inline（行内的） 排成一行
display:none 隐藏元素

----------------vertical（垂直的）------------------------

vertical-align:middle（中间） 垂直对齐

-----------------------line------------------------------

line-height:“50px” 行高

-----------------list（列表）----------------------------

list-style:none（无） 列表样式

----------------outline（轮廓）--------------------------

outline:none 轮廓

----------------overflow（溢出）-------------------------

overflow:ellipsis（省略）
overflow:hidden（隐藏）

----------------margin（边缘）---------------------------

margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 左边距

----------------float（浮动）---------------------------

float: top 向上浮动

----------------position（定位）---------------------------

position: absolute（绝对的） 绝对定位

----------------超出区域文字变为省略号--------------------

1、强制文本单行显示：white-space:nowrap;
2、设置溢出文本显示为省略标记：text-overflow:ellipsis;
3、设置溢出隐藏：overflow:hidden;

-----------------------隐藏元素区别----------------------

display:none
隐藏的元素不会占用任何空间，也就是说改元素不但会被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility（能见度）:hidden
可以隐藏某个元素，但隐藏的元素仍需占用于未隐藏之前一样的空间。也就是说该元素虽然被隐藏了，但仍然会影响布局。

---------------------伪类选择器---------------------------

a:link{color:#ccc;} 未访问的链接

a:link{color:#ccc;} 已访问的链接

a:link{color:#ccc;} 鼠标划过链接

a:link{color:#ccc;} 已选中的链接

注： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

first-child 选择父元素的第一个子元素

last-child 可匹配其中的最后一个

first-of-type 匹配一组兄弟元素中的某种类型第一个元素

last-of-type 可匹配其中的最后一个

before 可以在元素的内容前面插入新内容

after 可以在元素的内容之后插入新内容

first-letter 会匹配块级元素内容的第一行的首字符

（本文会不断进行更新和完善，目前自己也在慢慢学习中）