使用CSS技术【美化网页（一）】

最新推荐文章于 2024-07-30 16:49:30 发布

Alika-snowr

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量1.4k

点赞数 30

分类专栏： Web应用开发文章标签： css 前端

本文链接：https://blog.csdn.net/2301_81982769/article/details/136026175

版权

Web应用开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

HTML定义了一系列标记和属性，这些标记和属性主要用于描述网页的结构和定义一些基本的格式。更多的文本，图片和网页的样式在HTML中并没有提及。所以，若要一种技术，可以更加精确的网页布局等效果，就要运用CSS技术。

1.CSS的引入

在CSS还没有引入页面设计之前，使用HTML语言设计页面是十分麻烦的。

1.1.行内样式

行内样式是最简单的一种使用方式，在开发中一般不使用。

比如，给h1添加样式，color为设置字体颜色，font-style:bold表示粗体。

< h1 style="color:bule; font-style:bold"></h1>

1.2.嵌入样式

<style type="text/css"></style>

在</head>的上面写这一代码，就可以将要设置的样式写进<style></style>之间。

1.3.链接样式

当需要设置的样式太多或者是要多人完成时，应用外部CSS可以更加方便美观。

   <link rel="stylesheet" type="text/css" href="url">

引用外部样式就有了一个外部文件，以.css为后缀展名

（如图）下面的.html文件对应的外部CSS文件就是上面的.css文件。

1.4.样式的优先级

如果同一个页面使用了多种引用 CSS 样式的方法，比如同时使用行内样式、链接样式和嵌入样式，当不同方式的样式定义共同作用于同一元素，就会出现优先级问题。

1.4.1.行内样式和嵌入样式比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较</title>
    <style>
h2{
    font-style: normal;
    font-size: 14px;
}
    </style>
</head>
<body>
<h2 style="font-style: italic">记忆成为常态，遗忘成为例外。</h2>
<h2 style="font-family: 华文行楷">简单不先于复杂，而在复杂之后。</h2>
</body>
</html>

运行结果：

由此可以看出，在HTML文档中，标记<h2>存在样式规则的冲突，一种行内样式定义font-style为italic（斜体），另一种嵌入样式定义为normal，该标记选择了行内样式的定义。

所以得出结论：行内样式优先级大于嵌入样式。

1.4.2.嵌入样式和链接样式比较

再来试试嵌入样式和链接样式的优先级比较。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较</title>
    <link rel="stylesheet" type="text/css" href="嵌入样式和链接比较.css">
    <style>
        div{
            font-size: 16px;
            font-style: normal;
        }
    </style>
</head>
<body>
<div>记忆成为常态，遗忘成为例外。</div>
<h2 style="font-family: 华文行楷; font-size: 20px">简单不先于复杂，而在复杂之后。</h2>
</body>
</html>




/*嵌入样式和链接比较.css*/
div{
    font-size: 14px;
    font-style: italic;
}

运行结果：

由此可以看出，在HTML文档中，标记<div>存在样式规则的冲突，一种行内样式定义font-style为italic（斜体），另一种嵌入样式定义为normal，该标记选择了嵌入样式的定义。

所以得出结论：嵌入样式优先级大于链接样式。

通过这些例子可以看出，CSS样式的优先级由高到低依次为：行内样式、嵌入样式、链接样式

2.CSS基本选择器

CSS可以认为是有多个选择器组成的集合，每个选择器由3个基本部分----“选择器名称”、“属性”、“值”组成。为了能够使CSS规则与各种HTML 元素对应起来，就应当定义一套完整的规则，来实现CSS对HTML不同元素的“选择”。为此便有了“选择器”。

2.1.标记选择器

每个HTML页面由不同的标记组成，例如<p>、<h1>、<div>等。CSS标记选择器就用于声明这些标记的CSS样式。

<style>
h1{
/*编写要设置的属性*/
}
</style>

标记选择器用于控制页面所有同类标记的显示样式。例如，当声明了<h1>标记样式为蓝色时，页面中所有的<h1>标记都将发生改变。

2.2.类选择器

由上知，仅有一个标记选择器是远远不够的，还需要使用类选择器。

.className{

color:bule;
font-family:黑体；

}

其中，className为选择器名称，具体名称由自己命名。如果一个标记具有 class 属性且属性值为 className，那么该标记的呈现样式由该选择器指定。在定义类选择符时，需在className 前面加一个句点“.”。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .className{
            font-size: 16px;
            font-style: normal;
        }
    </style>
</head>
<body>
<div  class="className" >简单不先于复杂，而在复杂之后。</div>
</body>
</html>

2.3.ID选择器

id选择器和类选择器设置样式的功能上类似，但ID选择器的一个重要功能是用作网页元素的唯一标识，所以，HTML文件中一个元素的ID属性是唯一的。

#idName{

color:bule;
font-family:黑体；

}

类选择器与ID选择器的主要区别：

类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记只能使用一次。
ID选择器比类选择器具有更高的优先级。

Alika-snowr

关注

30
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
使用CSS技术【美化网页（一）】

HTML定义了一系列标记和属性，这些标记和属性主要用于描述网页的结构和定义一些基本的格式。更多的文本，图片和网页的样式在HTML中并没有提及。所以，若要一种技术，可以更加精确的网页布局等效果，就要运用CSS技术。
复制链接

扫一扫

专栏目录