初识CSS

时间：2019-10-05 18:54:35 阅读：116 评论：0 收藏：0 [点我收藏+]

1 CSS的概念

层叠样式表（Cascading Style sheets）。
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
CSS可以分别为网页的各个层次设置样式。

2 CSS的基本语法

CSS的样式表由一个一个的样式构成的，一个样式又由选择器和声明块构成。
语法：

选择器{
  样式名:样式值;
  样式名:样式值;    
}

3 样式表的分类

3.1 行内样式

可以直接将样式写在标签内部的style属性中，这种样式不需要写选择器，直接编写声明即可。

<p style="color: red;font-size: 30px">行内样式</p>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的标签</title>
</head>
<body>

<p style="color: red;font-size: 30px">行内样式</p>

</body>
</html>

这种样式编写简单，定位准确。但是由于直接将css代码写到html标签的内部，导致结构和表现耦合，同时导致样式不能够复用，所以这种方式我们不使用。

3.2 内部样式表

可以直接将样式写到style标签中。

    <style type="text/css">
        p {
            color: blue;
            font-size: 15px;
        }
    </style>

这样使CSS独立于HTML代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式。
但是这种方式，样式只能在一个页面中适用，不能在多个页面中重复使用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的标签</title>
    <style type="text/css">
        p {
            color: blue;
            font-size: 15px;
        }
    </style>
</head>
<body>

<p>内部样式表</p>

</body>
</html>

3.3 外部样式表

可以将所有的样式保存在一个外部的css文件中，然后通过<link/>标签将样式表引入到文件中。

示例：
index.css

p {
    color: blue;
    font-size: 15px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的标签</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<p>内部样式表</p>

</body>
</html>

这种方式将样式表引入到了页面的外部，可以在多个页面中引入，同时浏览器加载的时候可以使用缓存，这是我们开发中适用最多的方式。

初识CSS

标签：doc 保存文件使用式表多个需要 nbsp round

原文地址：https://www.cnblogs.com/xuweiweiwoaini/p/11613762.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行