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 组合选择符

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