层叠样式表(Cascading Style Sheets, CSS)用于描述HTML元素的样式:
#d1 {
opacity:0.5;
left:50px;
300px;
height:150px;
background-color:SlateGray;
/* content */
}
上面展示了一条CSS语句, #d1为选择器用于选择要修饰的元素, 花括号中包含对各项属性的描述.
选择器
选择器用于指定要修饰的元素,CSS中支持三种选择器:
-
id选择器
#id,根据HTML元素的id属性选择修饰对象 -
class选择器
.class, 根据根据HTML元素的class属性选择修饰对象 -
类型选择器
div, 根据HTML元素的类型来选择修饰对象.
可以联合使用多个选择器,用于选择子元素或兄弟元素:
-
后代选择器
div p用于选择div元素任意层子树中的p元素 -
子元素选择器
div>p用于选择div元素直接子树中的p元素 -
兄弟选择器
div~p用于选择和div元素拥有共同父元素,且在其后面的p元素 -
相邻兄弟选择器
div+p用于选择和div元素拥有共同父元素,且紧跟其后的p元素
伪类用于实现一些特殊CSS效果, 如定义<a>访问前后不同的效果:
-
未访问的链接
a:link -
已访问的链接
a:visited -
鼠标划过链接
a:hover -
已选中的链接
a:active
在CSS中hover样式必须在link和visited之后定义才有效, active必须在hover之后定义才有效.
first-class用于选取元素的第一个子元素div:first-class.
伪元素的语法类似于伪类,用于选取特殊的元素如首行p:first-line或首字母p:first-letter.
伪元素还可以用来向元素附近添加新元素:
-
向元素前插入新元素
p:before {content:url(before.gif);} -
向元素后插入新元素
p:after {content:url(after.gif);}
伪类也可以复合使用,如div > form:first-child
更多关于伪类伪元素的内容请参见菜鸟教程
更多关于选择器的内容请参见菜鸟教程
布局
根据HTML元素可以分为块元素和内部元素, 块元素占据页面全部宽度如div,p, 内部元素只占据必要的宽度如a.
块元素都可以视为盒子状, 从外到内依次是:
元素的position属性指定其定位方式,可以选择的方式有:
-
static默认值,由浏览器决定位置,不受top,bottom,left,right元素的影响 -
fixed元素相对浏览器窗口固定, 不受页面滚动的影响, 比如回到顶部按钮. -
relative元素相对其默认位置进行定位 -
absoulate元素相对其父元素的位置定位
HTML元素允许重叠, 其z-index属性指定顺序, 越大的越靠上.若未指定z-index,则后定义的元素在上面.
浮动允许元素在页面缩放时移动:
.thumbnail
{
float:left;
}
float属性指定元素是向左还是向右浮动.
clear属性用于禁止浮动元素出现在自身左右两边:
<br style="clear:both">
居中对齐是常用的功能之一,可以使用margin来设置居中:
{
margin-left:auto;
margin-right:auto;
}
左对齐或右对齐可以用position:absolute;来设置
{
position:absolute;
right:0px;
}
不过这样会出现元素重叠的方式,建议还是使用float来实现左右对齐:
{
float:right;
}
文本
font-family属性用于设置字体:
{font-family: "Courier New", Courier, monospace}
设置多个字体在浏览器不支持首选字体的情况下,会依次尝试后面的字体
更多字体请参见菜鸟教程
font-style可以设置斜体:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
font-size用于设置字体大小,可以使用像素作为单位:
p {font-size: 16px}
W3C建议使用em做为字体大小的单位, em为当前字体的大小当然也可以使用百分比.
p {font-size: 1.6em}
p {font-size: 160%}
text-align用于设置文本对齐:
p {text-align:center;}
对齐方式包括:
-
居中
center -
左右
left,right -
拉伸
justify, 扩大间距占满整行
text-decoration用于设置下划线等修饰:
p {text-decoration:underline;}
可用的修饰包括:
-
无
none -
下划线
underline -
上划线
ovewrline -
删除线
line-through
text-transform用于转换文本大小写:
p.uppercase {text-transform:uppercase;}
可以进行的转换有:
-
大写
uppercase -
小写
lowercase -
单词首字母大写
capitalize
背景
CSS可以设置的背景属性包括:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
CSS中，颜色值通常以以下方式定义:
-
十六进制
#ff0000 -
RGB
rgb(255,0,0) -
颜色名称
red
更多CSS颜色参见菜鸟教程
设置背景颜色:
div {background-color:SlateGray;}
设置背景图片:
div {background-image:url('chess.png')}
当背景图片较小时,需要设置背景图片平铺:
div {background-image:url('chess.png'); background-repeat:repeat-x;}
平铺默认为水平平铺(repeat-x), 也可以设置垂直平铺(repeat-y)或者不平铺(no-repeat)
background-position用于设置背景图片左上角的定位,可以使用预定义值,百分比, 坐标.
详情参见菜鸟教程