首页 > 其他分享> > 【CSS】初步体验

【CSS】初步体验

2021-07-05 13:52:41 作者：互联网

css的概念

cascading style sheet,中文译为层叠样式表，他是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。以HTML语言为基础，提供了丰富的格式化功能，如字体，颜色，背景和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格。

相比CSS为基础的页面设计方法，传统HTML的缺陷主要体现为以下几点

维护困难。为了修改某个特殊标记（例如<h2>标记的字体颜色大小）格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。
标记不足。HTML本身的标记十分的少，很多标记都是为网页内容服务的，而关于美工样式的标记，如文字间距，段落缩进等标记在HTML中很难找到。
网页过“胖”。由于没有统一对各种风格样式进行控制，HTML的页面往往体积过大，占用掉了很多宝贵的带宽。
定位困难。在整体布局页面时，HTML对于各个模块的位置调制显得捉襟见肘，过多的<table>标记同样也导致页面的复制和后期维护的困难。

使用CSS控制页面

css控制页面的方法：行内样式，内嵌式，链接式和导入式。

1、行内样式

行内样式是所有样式方法中最为直接的一种，它直接对HTML标记使用style属性，然后将css代码直接写在其中。下面的例子中<p>标签中都使用了style属性，然后将css代码直接写在其中。行内样式是最为简单的css使用方法，但由于需要为每一个标记设置style属性，后期维护成本依然很高，而且网页容易过“胖”，因此不推荐使用。

<html>
<head>
<title>页面标题</title>
</head>
<body>
    <p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文内容</p>
    <p style="color:#000000;font-style:italic;">正文内容</p>
    <p style="color:#FF00FF;font-size:25px;font-weight:bold;">正文内容</p>
</body>
</html>

2、内嵌式

内嵌样式就是将css写在<head>和</head>之间，并且用<style>和</style>标记进行声明。这种形式下，所有css代码部分被集中在了同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同的页面上<p>标记都希望采用同样的风格时，内嵌式的方法就显得略微麻烦，维护成本也不低。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>页面标题</title>
    <style type="text/css">
        p {
            color:#FF00FF;
            text-decoration:underline;
            font-weight:bold;
            font-size:25px;
        }
    </style>
</head>
<body>
   <p>紫色，粗体，下划线，25px的效果1</p>
    <p>紫色，粗体，下划线，25px的效果2</p>
    <p>紫色，粗体，下划线，25px的效果3</p>
</body>
</html>

3、链接式

链接式css样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与css样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工css代码的完全分离，使得前期制作和后期维护都十分方便，网络后台的技术人员与美工设计者也可以很好的分工合作。

而且对于同一个css文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一，协调，并且后期维护的工作量也大大减少。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>页面标题</title>
    <link href="1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
   <p>紫色，粗体，下划线，25px的效果1</p>
    <p>紫色，粗体，下划线，25px的效果2</p>
    <p>紫色，粗体，下划线，25px的效果3</p>
</body>
</html>

创建文件1.css，如下所示：

body {
}
h2 {
    color:#0000FF;
}
p {
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:20px;
}

链接式样式表的最大优势在于css代码与HTML代码完全分离，并且同一个css文件可以被不同HTML所链接使用。因此在设计整个网站时，可以将所有页面都链接到同一个css文件，使用相同的样式风格。如果整个网站需要进行样式上的修改，就仅仅只需要修改这一个css文件即可。

4、导入样式

采用inport方式导入样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。在HTML文件中导入样式表，常用的有如下几种@inport语句，可以选择任意一种放在<style></style>标记之间。

<style>
        @import url(1.css);
        @import url("1.css");
        @import url('1.css');
        @import 1.css;
        @import "1.css";
        @import '1.css';
    </style>

样式优先级

优先级从高到低依次排序为：

行内样式>采用link标记的链接式>位于<style>之间的内嵌式>@import导入式

标签：标记,样式,25px,初步,HTML,CSS,体验,css,页面
来源： https://blog.51cto.com/u_15246373/2979559