day5——使用CSS美化网页
作者:互联网
1.CSS规则
选择器{属性1:属性值;属性2:属性值2;属性3:属性值3;}
例如:h2{font-size:20px;color:red;}
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”
标签:行内,网页,内嵌式,day5,语法,样式表,CSS,属性 来源: https://blog.csdn.net/jumao555/article/details/120378934