一、CSS基本语法
1.基本语法
/*注释*/
selector {属性1:属性值1;属性2:属性值2;......}
2.语法说明
(1)选择器
HTML标记名、自定义标识符。
(2)属性键值对
{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
属性与属性值之间以冒号连接,每个属性键值对之间以分号分隔。
(3)复合属性
在CSS中,有些属性可以表示多个属性的值。
示例:
/*以下两种写法等效:*/
p { font-size: italic; font-size: 20px; font-family: 黑体; }
p { font: italic 20px 黑体; }
3.注释
/*单行注释*/
/*
多行注释
*/
二、CSS定义与引用
1.内联样式表(行内样式表)(Inline Style Sheet)
<标记 style="属性: 属性值; 属性: 属性值;…">
2.内部样式表(Internal Style Sheet)
<style type="text/css">
选择器1 { 属性1:属性值1;属性2:属性值2;...... }
选择器2 { 属性1:属性值1;属性2:属性值2;...... }
选择器3 { 属性1:属性值1;属性2:属性值2;...... }
.........
</style>
示例:
<head>
<style type="text/css">
.div1,.div3{background:#99ffff;width:200px;height:100px;}
#div2{background:#00cc00;width:200px;height:100px;}
p,h1{font-size:18px; color:#003366;}
</style>
</head>
3.链接外部样式表(Link External Style Sheet)
<link type="text/css" rel="stylesheet" href="外部样式表的文件名称"/ >
4.导入外部样式表(Import External Style Sheet)
<style type="text/css">
@import url("外部样式表的文件1名称");
@import url("外部样式表的文件2名称");
.........
选择器1 { 属性1:属性值1;属性2:属性值2;...... }
选择器2 { 属性1:属性值1;属性2:属性值2;...... }
选择器3 { 属性1:属性值1;属性2:属性值2;...... }
.........
</style>
网友评论