css样式属性

CSS3 框大小

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

CSS3 用户界面

appearance 允许您使一个元素的外观像一个标准的用户界面元素 3
box-sizing 允许你以适应区域而用某种方式定义某些元素 3
icon 为创作者提供了将元素设置为图标等价物的能力。 3
nav-down 指定在何处使用箭头向下导航键时进行导航 3
nav-index 指定一个元素的Tab的顺序 3
nav-left 指定在何处使用左侧的箭头导航键进行导航 3
nav-right 指定在何处使用右侧的箭头导航键进行导航 3
nav-up 指定在何处使用箭头向上导航键时进行导航 3
outline-offset 外轮廓修饰并绘制超出边框的边缘 3
resize 指定一个元素是否是由用户调整大小 3

CSS Backgrounds(背景)

background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

CSS Text(文本)

hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

CSS Fonts(字体)

font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

CSS 链接(link)

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
L(link)OV(visited)E and H(hover)A(active)TE

CSS 列表样式(ul)

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

CSS Table(表格)

CSS 盒子模型

CSS Border(边框)

border-image 设置所有边框图像的速记属性。 3
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3
box-shadow 附加一个或多个下拉框的阴影 3
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。

CSS 轮廓（outline）属性

outline 在一个声明中设置所有的轮廓属性 outline-color outline-style outline-width
outline-color 设置轮廓的颜色 color-name hex-number rgb-number invert
outline-style 设置轮廓的样式 none dotted dashed solid double groove ridge inset outset
outline-width 设置轮廓的宽度 thin medium thick length inherit

CSS margin(外边距)

margin 简写属性。1:上-右-下-左 2:上-右-下 3:上-下
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

CSS padding（填充）

padding 同margin
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

CSS 尺寸 (Dimension)

height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

CSS Display(显示)

display:none 隐藏了，该元素原本占用的空间也会从页面布局中消失。
visibility:hidden 元素虽然被隐藏了，但仍然会影响布局
display:block -- 显示为块级元素
display:inline -- 显示为行内元素
display:inline-block -- 显示为行内块元素，表现为同行显示并可修改宽高内外边距等属性

块级元素(block)特性：

- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , - hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

行内元素(inline)特性：

- 和相邻的行内元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom- (margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

行内元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , - label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

CSS Position(定位)

static 元素的默认值，即没有定位，遵循正常的文档流对象。
relative 相对定位元素的定位是相对其正常位置。
fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
absolute 绝对定位的元素的位置相对于最近的已定位父元素，absolute 定位使元素的位置与文档流无关，因此不占- 据空间。
absolute 定位的元素和其他元素重叠
sticky 粘贴定位略

CSS Overflow

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

CSS Float（浮动）

clear 指定不允许元素周围有浮动元素。 left right both none inherit
float 指定一个盒子（元素）是否可以浮动。 left right none inherit

CSS 对齐

div水平居中 margin: auto;.center {margin: auto;width: 50%;border: 3px solid green;padding: - 10px;}
文本居中对齐 text-align: center
图片居中对齐使用 margin: auto; 并将它放到块元素中img {display: block;margin: auto;width: 40%;}
左右对齐 - 使用定位方式 position: absolute; 属性来对齐元素:.right {position: absolute;right: 0px;- width: 300px;border: 3px solid #73AD21;padding: 10px;}
左右对齐 - 使用 float 方式
垂直居中对齐 - 使用 padding .center { padding: 70px 0;border: 3px solid green; text-align: center;}-
垂直居中 - 使用 line-height

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

垂直居中 - 使用 position 和 transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS 组合选择符

后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

css样式属性

CSS3 框大小

CSS3 用户界面

CSS Backgrounds(背景)

CSS Text(文本)

CSS Fonts(字体)

CSS 链接(link)

CSS 列表样式(ul)

CSS Table(表格)

CSS 盒子模型

CSS Border(边框)

CSS 轮廓（outline）属性

CSS margin(外边距)

CSS padding（填充）

CSS 尺寸 (Dimension)

CSS Display(显示)

块级元素(block)特性：

块级元素主要有：

行内元素(inline)特性：

行内元素主要有：

CSS Position(定位)

CSS Overflow

CSS Float（浮动）

CSS 对齐

CSS 组合选择符

推荐阅读更多精彩内容