一、CSS 背景属性
Property | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
二、所有CSS文本属性。
属性 | 描述 |
---|---|
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字体属性
Property | 描述 |
---|---|
font | 在一个声明中设置所有的字体属性 |
font-family | 指定文本的字体系列 |
font-size | 指定文本的字体大小 |
font-style | 指定文本的字体样式 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 指定字体的粗细。 |
1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em
四、所有的CSS列表属性
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type |
设置列表项标志的类型。
|
五、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。
六、边框的属性
border-style属性可以有1-4个值:
- border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
- border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
- border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
- border-style:dotted;
- 四面边框是 dotted
上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。
CSS 边框属性
属性 | 描述 |
---|---|
border | 简写属性,用于把针对四个边的属性设置在一个声明。 |
border-style | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom | 简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-bottom-color | 设置元素的下边框的颜色。 |
border-bottom-style | 设置元素的下边框的样式。 |
border-bottom-width | 设置元素的下边框的宽度。 |
border-left | 简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-left-color | 设置元素的左边框的颜色。 |
border-left-style | 设置元素的左边框的样式。 |
border-left-width | 设置元素的左边框的宽度。 |
border-right | 简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-right-color | 设置元素的右边框的颜色。 |
border-right-style | 设置元素的右边框的样式。 |
border-right-width | 设置元素的右边框的宽度。 |
border-top | 简写属性,用于把上边框的所有属性设置到一个声明中。 |
border-top-color | 设置元素的上边框的颜色。 |
border-top-style | 设置元素的上边框的样式。 |
border-top-width | 设置元素的上边框的宽度。 |
七、所有CSS 轮廓(outline)属性
"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
属性 | 说明 | 值 | CSS |
---|---|---|---|
outline | 在一个声明中设置所有的轮廓属性 | outline-color outline-style outline-width inherit | 2 |
outline-color | 设置轮廓的颜色 | color-name hex-number rgb-number invert inherit | 2 |
outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit | 2 |
outline-width | 设置轮廓的宽度 | thin medium thick length inherit | 2 |
八、所有的CSS边距属性
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
九、所有的CSS填充属性
属性 | 说明 |
---|---|
padding | 使用简写属性设置在一个声明中的所有填充属性 |
padding-bottom | 设置元素的底部填充 |
padding-left | 设置元素的左部填充 |
padding-right | 设置元素的右部填充 |
padding-top | 设置元素的顶部填充 |
十、CSS 分组 和 嵌套 选择器
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式:
- 为所有p元素指定一个样式
- 为所有class="marked"的元素指定一个样式
- 为所有class="marked"元素内的p元素指定一个样式
实例
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
十一、所有CSS 尺寸 (Dimension)属性
属性 | 描述 |
---|---|
height | 设置元素的高度。 |
line-height | 设置行高。 |
max-height | 设置元素的最大高度。 |
max-width | 设置元素的最大宽度。 |
min-height | 设置元素的最小高度。 |
min-width | 设置元素的最小宽度。 |
width | 设置元素的宽度。 |
十二、所有的CSS定位属性
"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。
属性 | 说明 | 值 | CSS |
---|---|---|---|
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto length % inherit | 2 |
clip | 剪辑一个绝对定位的元素 | shape auto inherit | 2 |
cursor | 显示光标移动到指定的类型 | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto length % inherit | 2 |
overflow | 设置当元素的内容溢出其区域时发生的事情。 | auto hidden scroll visible inherit | 2 |
overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content | 2 |
overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content | 2 |
position | 指定元素的定位类型 | absolute fixed relative static inherit | 2 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto length % inherit | 2 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto length % inherit | 2 |
z-index | 设置元素的堆叠顺序 | number auto inherit | 2 |
十三、CSS 中所有的浮动属性
"CSS" 列中的数字表示不同的 CSS 版本(CSS1 或 CSS2)定义了该属性。
属性 | 描述 | 值 | CSS |
---|---|---|---|
clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
float | 指定一个盒子(元素)是否可以浮动。 | left right none inherit | 1 |
十三、所有CSS伪类/元素
选择器 | 示例 | 示例说明 |
---|---|---|
:checked | input:checked | 选择所有选中的表单元素 |
:disabled | input:disabled | 选择所有禁用的表单元素 |
:empty | p:empty | 选择所有没有子元素的p元素 |
:enabled | input:enabled | 选择所有启用的表单元素 |
:first-of-type | p:first-of-type | 选择每个父元素是p元素的第一个p子元素 |
:in-range | input:in-range | 选择元素指定范围内的值 |
:invalid | input:invalid | 选择所有无效的元素 |
:last-child | p:last-child | 选择所有p元素的最后一个子元素 |
:last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
:not(selector) | :not(p) | 选择所有p以外的元素 |
:nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
:nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
:nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
:only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
:only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
:optional | input:optional | 选择没有"required"的元素属性 |
:out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
:read-only | input:read-only | 选择只读属性的元素属性 |
:read-write | input:read-write | 选择没有只读属性的元素属性 |
:required | input:required | 选择有"required"属性指定的元素属性 |
:root | root | 选择文档的根元素 |
:target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
:valid | input:valid | 选择所有有效值的属性 |
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
:first-line | p:first-line | 选择每个<p> 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
:before | p:before | 在每个<p>元素之前插入内容 |
:after | p:after | 在每个<p>元素之后插入内容 |
:lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
十四、媒体
@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印,将是10个像素的Times字体。请注意,font-weight在屏幕上和纸上设置为粗体:
<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style> </head> <body> .... </body> </html>
其他媒体类型
注意:媒体类型名称不区分大小写。
媒体类型 | 描述 |
---|---|
all | 用于所有的媒体设备。 |
aural | 用于语音和音频合成器。 |
braille | 用于盲人用点字法触觉回馈设备。 |
embossed | 用于分页的盲人用点字法打印机。 |
handheld | 用于小的手持的设备。 |
用于打印机。 | |
projection | 用于方案展示,比如幻灯片。 |
screen | 用于电脑显示器。 |
tty | 用于使用固定密度字母栅格的媒体,比如电传打字机和终端。 |
tv | 用于电视机类型的设备。 |
CSS 属性 选择器
具有特定属性的HTML元素样式
具有特定属性的HTML元素样式不仅仅是class和id。
注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。
属性选择器
下面的例子是把包含标题(title)的所有元素变为蓝色:
十五、属性和值选择器
下面的实例改变了标题title='runoob'元素的边框样式:
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值:
下面是包含指定值的lang属性的元素样式的例子,使用(|)分隔属性和值:
表单样式
属性选择器样式无需使用class或id的形式:
实例
{
width: 150 px ;
display: block ;
margin-bottom: 10 px ;
background-color: yellow ;
}
input [ type = " button " ]
{
width: 120 px ;
margin-left: 35 px ;
display: block ;
}