CSS基础
2019-06-06 本文已影响0人
Recalcitrant
一、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>
