CSS简介
| 选择器 | 声明 | |
| h1 | {font-family: | arial;} |
| 特性 | 值 | |
- 选择器：它指定声明应用于哪个或哪些元素
- 声明：它用于设置元素的样式。声明又由以冒号分隔的两个部分组成
- 特性：所选元素希望被影响的特性。
- 值：它是特性的值。
一个CSS规则可以应用于多个不同元素：
h1, h2, h3 { font-weight: bold; font-family: 'Arial Unicode MS'; font-size: 1.5em; color: #000000; background-color: #FFFFFF; }
一个基本的示例
页面文件（ch07_eg01.html）：
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <
link rel="stylesheet" type="text/css" href
="ch07_eg01.css" /> </head> <body> <h1> Basic CSS Font Properties</h1> <p> The following table shows you the basic CSS font properties that allow you to change the appearance of text in your documents.</p> <table> <tr> <th> Property </th> <th> Purpose </th> </tr> <tr> <td class="code"> font-family </td> <td> Specifies the font used. </td> </tr> <tr> <td class="code"> font-size </td> <td> Specifies the size of the font used. </td> </tr> <tr> <td class="code"> font-style </td> <td> Specifies whether the font should be normal, italic or oblique. </td> </tr> <tr> <td class="code"> font-weight </td> <td> Specifies whether the font should be normal, bold, bolder, or lighter </td> </tr> </table> </body> </html>
链接的css文件（ch07_eg01.css）：
/* Style sheet for ch07_eg01.html */ body { color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; } h1 { font-size: 18pt; } p { font-size: 12pt; } table { background-color: #efefef; border-style: solid; border-width: 1px; border-color: #999999; } th { background-color: #cccccc; font-weight: bold; padding: 5px; } td { padding: 5px; } td.code { font-family: courier, courier-new, serif; font-weight: bold; }
继承
添加CSS规则的位置
css规则还可以出现在两个位置：
- 在<head>元素内，通过<style>元素包含特性
<head> <title></title> <style type="text/css"> body { color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; } </style> </head>
- 作为元素的style属性的值，称为内联样式规则
<td style="font-family: courier, courier-new, serif; padding: 5px; border-style: solid; border-width: 1px; border-color: #999999;">
<link>
rel
type
href
hreflang
media
<style>
外部css样式表的优点
CSS特性
控制字体
字型：serif scans-serif
font-family
font-size
- 绝对大小：xx-small x-small small medium large x-large xx-large
- 相对大小：smaller larger
- 单位：px em ex pt in cm pc mm
- 百分比计算：相对于包含该文本的元素的比例
font-weight
normal bold bolder lighter [100*n,n=1..9]
font-style
normal italic oblique
font-variant
normal small-caps
font-stretch
相对值：normal wider narrower
固定值：ultra-condensed ex
font-size-adjust
宽高比
文本格式化
color
text-align
vertical-align
text-decoration
text-indent
text-shadow
text-transform
letter-spacing
word-spacing
white-space
direction
unicode-bidi
文本伪类
first-letter
first-line
选择器
通用选择器
*{ }
Tag选择器
h1,h2,p{}
类选择器
id选择器
子选择器
另外一个元素的直接子元素
后继选择器
相邻兄弟选择器
利用子选择器和相邻兄弟选择器降低标记中类的相关性
属性选择器
长度
绝对单位
pt pc in cm mm
相对单位
px em ex
百分比
框模型简介
演示框模型的示例
Border
border-color
border-style
border-bottom-style
border-right-style
border-top-style
border-left-style
border-width
利用简写表达边框的特性
padding
margin
面积
height width
line-height
max-width min-width
max-height min-height
overflow