插入样式表
内联样式表
|
<head> <style type="text/css"> body {background-image: url("images/back40.gif");} </style> </head> |
嵌入样式表
|
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p> |
引入样式表
|
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> |
选择器
类型选择器
类型选择器匹配文档语言元素类型的名称。
|
h1 {font-family: sans-serif;} * {color:red;} .important {color:red;} .important.warning {background:silver;} <p class="important warning"> #intro {font-weight:bold;} |
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
|
a[href] {color:red;} 只对有 href 属性的锚（a 元素）应用样式 a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} p[class~="important"] {color: red;} 根据部分属性值选择 |
|
类型 |
描述 |
|
[abc^="def"] |
选择 abc 属性值以 "def" 开头的所有元素 |
|
[abc$="def"] |
选择 abc 属性值以 "def" 结尾的所有元素 |
|
[abc*="def"] |
选择 abc 属性值中包含子串 "def" 的所有元素 |
后代选择器
后代选择器可以选择作为某元素后代的元素。可以越级
|
h1 em {color:red;} |
子元素选择器
作为某元素子元素的元素。不能越级
|
h1 > strong {color:red;} |
兄弟选择器
紧接在h1后面出现的p段落，h1和p拥有共同的父元素。仅选择了p
|
h1 + p {margin-top:50px;} |
伪类选择器
|
a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */ |
|
p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;} |
|
属性 |
描述 |
CSS |
|
:first-letter |
向文本的第一个字母添加特殊样式。 |
1 |
|
:first-line |
向文本的首行添加特殊样式。 |
1 |
|
:before |
在元素之前添加内容。 |
2 |
|
:after |
在元素之后添加内容。 |
2 |
CSS背景
|
属性 |
描述 |
|
background |
简写属性，作用是将背景属性设置在一个声明中。 |
|
background-attachment |
背景图像是否固定或者随着页面的其余部分滚动。fixed |
|
background-color |
设置元素的背景颜色。 |
|
background-image |
把图像设置为背景。background-image: url(04.gif); |
|
background-position |
设置背景图像的起始位置。 |
|
background-repeat |
设置背景图像是否及如何重复。repeat/ repeat-x/ repeat-y/ no-repeat |
CSS文本字体
|
属性 |
描述 |
|
color |
设置文本颜色 |
|
direction |
设置文本方向。 |
|
line-height |
设置行高。 |
|
letter-spacing |
设置字符间距。 |
|
text-align |
对齐元素中的文本。 |
|
text-decoration |
向文本添加修饰。 |
|
text-indent |
缩进元素中文本的首行。 |
|
text-transform |
控制元素中的字母。 |
|
unicode-bidi |
设置文本方向。 |
|
white-space |
设置元素中空白的处理方式。pre/ nowrap |
|
word-spacing |
设置字间距。 |
|
属性 |
描述 |
|
font |
简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
|
font-family |
设置字体系列。 |
|
font-size |
设置字体的尺寸。 |
|
font-style |
设置字体风格。 |
|
font-variant |
以小型大写字体或者正常字体显示文本。 |
|
font-weight |
设置字体的粗细。 |
盒模型
border-style 属性
|
值 |
描述 |
|
none |
定义无边框。 |
|
hidden |
与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
|
dotted |
定义点状边框。在大多数浏览器中呈现为实线。 |
|
dashed |
定义虚线。在大多数浏览器中呈现为实线。 |
|
solid |
定义实线。 |
|
double |
定义双线。双线的宽度等于 border-width 的值。 |
|
groove |
定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
|
ridge |
定义 3D 垄状边框。其效果取决于 border-color 的值。 |
|
inset |
定义 3D inset 边框。其效果取决于 border-color 的值。 |
|
outset |
定义 3D outset 边框。其效果取决于 border-color 的值。 |
|
inherit |
规定应该从父元素继承边框样式。 |
外边距合并
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
CSS定位< position>
|
值 |
描述 |
|
absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
|
static |
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
|
inherit |
规定应该从父元素继承 position 属性的值。 |
相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
position: relative;
|
#box_relative { position: relative; left: 30px; top: 20px; } |
绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
position: absolute;
|
#box_relative { position: absolute; left: 30px; top: 20px; } |
固定定位
相对于浏览器窗口来对元素进行定位。
position:fixed;
|
#box_relative { position: fixed; left: 30px; top: 20px; } |
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float:left;
清理
clear:both;
CSS 表格
|
div#tableContainer{ display: table; /* 定义整个表格 */ } div#tableRow{ display: table-row; /* 定义表格中的一行 */ } div#mian{ display: table-cell; /* 定义表格中的单元格 */ } |