CSS常用属性
来自CloudWiki
目录
颜色和背景
color
- 设置元素前景色
- 可能的值:
颜色名称(比如 red)。 颜色代码(比如 #ff0000) rgb代码 (比如rgb(0,0,255))
- CSS中所有的颜色名:http://www.w3school.com.cn/cssref/css_colornames.asp
- 试一试W3C实例
- 代码:
<html> <head> <style type="text/css"> body {color:red;} h1{color:#2E8B57;} </style> </head> <body> <h1>山东商业职业技术学院</h1> <p>山东商业职业技术学院(Shandong Institute of Commerce and Technology),是经教育部批准设立的省属高职院校,学校是国家示范性高职院校、全国职业教育先进单位、全国毕业生就业典型经验(高校)50强高校</p> </body> </html>
background-color
- 设置元素背景色
body { background-color:yellow; } h1 { background-color:#00ff00; } p { background-color:rgb(255,0,255);}
- CSS中所有的颜色名:http://www.w3school.com.cn/cssref/css_colornames.asp
- 配色的注意事项
- 将以下代码粘贴到W3C实例
<html> <head> <style type="text/css"> body {background-color: #ADD8E6;} h1 { background-color: #4169E1;} p { background-color: #E0FFFF;} </style> </style> </head> <body> <h1>山东商业职业技术学院</h1> <p>山东商业职业技术学院(Shandong Institute of Commerce and Technology),是经教育部批准设立的省属高职院校,学校是国家示范性高职院校、全国职业教育先进单位、全国毕业生就业典型经验(高校)50强高校</p> </body> </html>
background-imge
- 设置元素背景图案
- 可能的值: url('URL') 指向图像的路径。
body {background-image:url(/i/eg_bg_04.gif);}
- 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
- 提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
- 在W3C实例中查看效果:
<html> <head> <style type="text/css"> body {color:#2E8B57;background-image:url(/i/eg_bg_04.gif);} h1{color:#2E8B57;} </style> </head> <body> <h1>山东商业职业技术学院</h1> <p>山东商业职业技术学院(Shandong Institute of Commerce and Technology),是经教育部批准设立的省属高职院校,学校是国家示范性高职院校、全国职业教育先进单位、全国毕业生就业典型经验(高校)50强高校</p> </body> </html>
字体属性
- 字体属性的功能是设置页面字体的显示样式
font-size
- font-size设置不同的 HTML 元素的尺寸:
h1 {font-size:250%;} h2 {font-size:20pt;} p {font-size:10px}
- 在W3C实例中修改你的代码。
<html> <head> <style type="text/css"> body {background-color: #ADD8E6;} h1 { background-color: #4169E1;} p { background-color: #E0FFFF;;font-size:150%;} </style> </style> </head> <body> <h1>山东商业职业技术学院</h1> <p>山东商业职业技术学院(Shandong Institute of Commerce and Technology),是经教育部批准设立的省属高职院校,学校是国家示范性高职院校、全国职业教育先进单位、全国毕业生就业典型经验(高校)50强高校</p> </body> </html>
font-family
<html> <head> <style type="text/css"> body {background-color: #ADD8E6;} h1 { background-color: #4169E1;font-family:KaiTi;} p { background-color: #E0FFFF;font-family:FangSong;} </style> </style> </head> <body> <h1>山东商业职业技术学院</h1> <p>山东商业职业技术学院(Shandong Institute of Commerce and Technology),是经教育部批准设立的省属高职院校,学校是国家示范性高职院校、全国职业教育先进单位、全国毕业生就业典型经验(高校)50强高校</p> </body> </html>
font-weight
- font-weight设置字体的粗细
- normal 默认值。定义标准的字符。
- bold 定义粗体字符。
- bolder 定义更粗的字符。
- lighter 定义更细的字符。
- 在W3C实例中修改你的代码。
<html> <head> <style type="text/css"> body {background-color: #ADD8E6;} h1 { background-color: #4169E1;font-family:KaiTi;} p { background-color: #E0FFFF;font-family:FangSong;font-weight: bold} </style> </style> </head> <body> <h1>山东商业职业技术学院</h1> <p>山东商业职业技术学院(Shandong Institute of Commerce and Technology),是经教育部批准设立的省属高职院校,学校是国家示范性高职院校、全国职业教育先进单位、全国毕业生就业典型经验(高校)50强高校</p> </body> </html>
文本属性
text-indent
- text-indent设置文本的首行缩进
- length 定义固定的缩进。默认值:0。
- % 定义基于百分比的缩进。
p { text-indent:50px; }
- 在W3C实例中修改你的代码。
text-align
- text-align 设置文本的对齐方式
值 | 描述 | 标题文字 |
---|---|---|
left | 把文本排列到左边。 | |
right | 把文本排列到右边。 | |
center | 把文本排列到中间。 | |
justify | 实现两端对齐文本效果。 |
h1 {text-align:center} h2 {text-align:left} h3 {text-align:right}
- 在W3C实例中修改你的代码。
line-height
- 设置以百分比或像素计的行高:
p.small {line-height:90%} p.big {line-height:24px}
- 在W3C实例中修改你的代码。
<html> <head> <style type="text/css"> body {background-color: #ADD8E6;} h1 { background-color: #4169E1;line-height:200%;} p { background-color: #E0FFFF;;font-size:120%;line-height:150%;} </style> </style> </head> <body> <h1>山东商业职业技术学院</h1> <p>山东商业职业技术学院(Shandong Institute of Commerce and Technology),是经教育部批准设立的省属高职院校,学校是国家示范性高职院校、全国职业教育先进单位、全国毕业生就业典型经验(高校)50强高校</p> </body> </html>
块属性
边框属性
项目符号和编号属性
层属性
相对单位和绝对单位
返回 网页设计与开发