1.CSS规则
选择器{属性1:属性值;属性2:属性值2;属性3:属性值3;}
例如:h2{font-size:20px;color:red;}
CSS选择器:
(1)标记选择器
标记名{属性1:属性值;属性2:属性值2;属性3:属性值3;}
如:p{font-size:12px;color:#666;font-family:"微软雅黑";}
(2)类选择器
.类名{属性1:属性值;属性2:属性值2;属性3:属性值3;}
类名即为class属性值。
如:
.red{color:red;}
.green{color:green;}
.font22{font-size:22px;}
(3)id选择器
#id名{属性1:属性值;属性2:属性值2;属性3:属性值3;}
id名即为id属性值。
如:
#blod{font-weight:blod;}
#font24{font-size:24px;}
(4)统配符选择器(应用范围最广)
*{属性1:属性值;属性2:属性值2;属性3:属性值3;}
如:
*{
margin:0; /*定义外边距*/
padding:0; /*定义内边距*/
}
2.引入CSS样式表
(1)行内式
语法:<标记名 stayle="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>
【demo1】行内式基本语法练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS行内式</title>
</head>
<body>
<h2 style="font-size:20ox;color:red;">使用CSS行内式修饰二级标题的字体大小和颜色</h2>
</body>
</html>
图1 行内式
(2)内嵌式:写在<head></head>之中,<title>之后
语法:
<head>
<style type="text/css">
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
<head>
【demo2】内嵌式基本语法的练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS内嵌式</title>
<style type="text/css">
h2{text-align:center}
p{font-size:16px;color:red;text-decoration:underline;}
</style>
</head>
<body>
<h2>使用CSS内嵌式</h2>
<p>使用style标记可定义内嵌式CSS样式表,style标记一般位于head头部标记中,title标记之后。</p>
</body>
</html>
图2 内嵌式
(3)链入式:也放在头部标记中
语法:
<head>
<link href="CSS文件路径" type="text/css" rel="stylesheet"/>
</head>
其中,href:定义外部链接文件的URL。
type:定义外部链接文件的类型,指定为“text/css”,表示外部文件是CSS样式表。
rel:定义当前文档与外部链接文件之间的关系,指定为“stylesheet”
【demo3】链入式
HTML文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS链入式</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h2>链入式CSS样式表</h2>
<p>通过link标记可以将拓展名为.css的外部样式表文件链接到HTML文档中</p>
</body>
</html>
外部文件CSS样式表:
@charset "utf-8";
/* CSS Document */
h2{text-align:center;}
p{font-size:16px;color:red;text-decoration:underline;}
图3 链入式
3.案例实现
【example1】文字Logo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字Logo</title>
<style type="text/css">
.blue{color:#2B75F5;}
.red{color:#D33E2A;}
#orange{color:#FFC609;}
#green{color:#00A45D;}
strong{font-size:100px;}
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>
图4 文字Logo效果图