CSS（控制网页表现）

最新推荐文章于 2024-07-08 11:32:20 发布

lmj19929

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量446

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/lmj19929/article/details/129464504

版权

CSS 是一门语言，用于控制网页表现。

W3C标准规定了网页是由以下组成：

* 结构：HTML
* 表现：CSS
* 行为：JavaScript

CSS也有一个专业的名字：==Cascading Style Sheet（层叠样式表）。

一、CSS导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。

CSS 导入 HTML有三种方式：

1、内联样式：在标签内部使用style属性，属性值是css属性键值对

<div style="color: red">Hello CSS~</div>

特点：给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

2、内部样式：定义<style>标签，在标签内部定义css样式

<style type="text/css">
div{
color: red;
}
</style>

特点：这种方式可以做到在该页面中复用。

3、外部样式：定义link标签，引入外部的css文件

编写一个css文件。名为：demo.css，内容如下:

```css
div{
color: red;
}
```

在html中引入 css 文件。

```html
<link rel="stylesheet" href="demo.css">
```

特点：这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 `link` 标签引入该css文件。

二、CSS选择器

css 选择器就是选取需设置样式的元素（标签），比如如下css代码：

```css
div {
color:red;
}
```

如上代码中的 `div` 就是 css 中的选择器。我们只讲下面三种选择器：

1、元素选择器

格式：

```css
元素名称{color: red;}
```

例子：

div{color:red}

2、id选择器

格式：

```css
#id属性值{color: red;}
```

例子：

html代码如下：

<div id="name">hello css2</div>

css代码如下：

#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

3、类选择器

格式：

```css
.class属性值{color: red;}
```

例子：

html代码如下：

  <div class="cls">hello css3</div>

css代码如下：

.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

**代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
        #name{
            color: blue;
        }
        .cls{
            color: pink;
        }
    </style>

</head>
<body>
    <div>div1</div>
    <div id="name">div2</div>
    <div class="cls">div3</div>
    <span class="cls">span</span>
</body>
</html>

谁选择的范围越小就用谁的指令（eg:最终div2时蓝色)