层叠样式表(Cascading Style Sheets, CSS)用于描述HTML元素的样式:
#d1 { opacity:0.5; left:50px; width: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.
块元素都可以视为盒子状, 从外到内依次是:
内容content
元素的position属性指定其定位方式,可以选择的方式有:
static默认值,由浏览器决定位置,不受top,bottom,left,right元素的影响fixed元素相对浏览器窗口固定, 不受页面滚动的影响, 比如回到顶部按钮.relative元素相对其默认位置进行定位absoulate元素相对其父元素的位置定位
HTML元素允许重叠, 其z-index属性指定顺序, 越大的越靠上.若未指定z-index,则后定义的元素在上面.
浮动允许元素在页面缩放时移动:
.thumbnail{ float:left;} float属性指定元素是向左还是向右浮动.
clear属性用于禁止浮动元素出现在自身左右两边:
居中对齐是常用的功能之一,可以使用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中，颜色值通常以以下方式定义:
十六进制
#ff0000RGB
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用于设置背景图片左上角的定位,可以使用预定义值,百分比, 坐标.
详情参见