day5——使用CSS美化网页

最新推荐文章于 2024-05-14 11:32:42 发布

蹦居大蹦居

最新推荐文章于 2024-05-14 11:32:42 发布

阅读量354

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/jumao555/article/details/120378934

版权

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效果图