其他分享
首页 > 其他分享> > day5——使用CSS美化网页

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