Web前端——CSS结构

巧克力code

已于 2022-02-12 11:23:16 修改

阅读量1k

点赞数 4

分类专栏： Web前端文章标签： css

于 2020-10-03 19:50:51 首次发布

本文链接：https://blog.csdn.net/qq_44853882/article/details/108911546

版权

Web前端专栏收录该内容

15 篇文章 5 订阅

订阅专栏

一. CSS概述

1. 来源

一开始W3C将许多的对网页表现形式的的标签，加入到HTML规范中，。大量的标签使得网页结构越来越复杂，极大的影响网页的维护以及浏览器的速度

之后W3C组织对web标准引入CSS规范，HTML标签用于确定网页的结构内容，CSS用于决定网页的表现形式

2. 发展

1996年 CSS1.0
1998年 CSS2.0
2004年 CSS2.1
2010年 CSS3.0

3. 使用CSS的好处

CSS以HTML语言为基础，提供丰富的格式设置，以及排版等格式设置内容

将格式和结构分离，利于网页维护
精准控制网页的布局

制作体积更小，下载更快的网页

 CSS只是简单的文本，使用它可以减少表格标签、图像用量，其他HTML不需要的代码

实现多个网页同时刷新

 让多个网页指向同一个CSS文件

二. CSS定义

网页分为三个部分

结构（HTML）
表现（CSS）
行为（JavaScript）

1. CSS层叠样式表（Cascading Style Sheet）

网页实际上是一个多层的结构，通过CSS可以为网页的每一层来设置样式
而最终我们能看到的只是网页的最上面一层

总之一句话，CSS用来设置网页中元素的样式

2. 定义CSS的基本语法

在这里插入图片描述

选择器{
	属性1：属性值1；
	属性2：属性值2；
	....
}

选择器：

指定对哪些网页元素进行样式设置，所有可标识一个网页元素的内容都可以作为选择器使用

比如
HTML元素标签、元素的类名、元素的ID名

分类：
CSS基本选择器
CSS复合选择器

属性值：

一般不需要加引号，如果属性值由若干个单词组成需要加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS样式</title>
    <style>
        /*  选择器 {样式}
            给谁该样式 {改什么样式}
        */
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>CSS样式</p>
</body>
</html>

在这里插入图片描述

三. 在HTML文档中应用定义好的CSS

CSS是用来格式化HTML页面对象的

使用CSS来修改元素的样式，必须先将HTML与CSS关联

以下有几种关联方式：

方式一：(内联样式，行内样式)

1. 定义：

在标签内部通过style属性来设置元素的样式
在标签的 style 属性上设置”key:value value;”，修改标签样式。

2. 语法：

<标签名 style="属性1：属性值1；属性2：属性值2；....">

3. 缺点：

使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍
并且当样式发生变化时，我们必须要一个一个的修改，非常不方便
如果标签多了。样式多了。代码量非常庞大。
可读性非常差。
css 代码没什么复用性可方言。

注意：开发时绝对不要使用内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
</head>
<body>

     <p style="color: red; font-size: 40px;">少小离家老大回，乡音无改鬓毛衰</p>

</body>
</html>

在这里插入图片描述
结论：不推荐使用，当再来一个p标签时，还需要再次设置style样式

方式二：(内部样式表)

1. 定义：

将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式

2. 语法：

<style type="text/css">
	
	CSS样式定义格式如下： 
	xxx{
		Key : value value;
	}
</style>

3. 优点：

可以同时为多个标签设置样式，并且修改时只需修改一处即可
内部样式表更加方便对样式进行复用

4. 缺点：

我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用
维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>

        p{
            color:green;
            font: 50px;
        }

    </style>
</head>
<body>

     <p>少小离家老大回，乡音无改鬓毛衰</p>

     <p>落霞与孤鹜齐飞，秋水共长天一色</p>

</body>
</html>

在这里插入图片描述

方式三：(外部样式表)

1. 定义：

将CSS样式编写到一个外部的CSS文件中，然后在页面头部区域通过link标签来引入外部的CSS文件

2. 语法

<link rel="stylesheet" type="text/css" href="所引用的css文件名">

rel="stylesheet"用于定义链接的文件和HTML文档之间的关系

在这里插入图片描述

3. 样式表(stylesheet)特点：

外部样式表需要通过link标签来引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同的页面之间进行复用
将样式编写到外部CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验

这种是最佳的实践方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>

    <p>少小离家老大回，乡音无改鬓毛衰</p>

     <p>落霞与孤鹜齐飞，秋水共长天一色</p>

</body>
</html>

p{
    color:tomato;
    font-size: 55px;
}

在这里插入图片描述

方式四：导入式

1. 定义

在多个页面重用CSS，除了使用链接方式外，还可以使用导入CSS文件的方式实现

导入CSS样式，通过在HTML页面头部区域使用style标签导入一个外部的CSS文件

2. 基本语法

<style type="text/css">
	@import url("CSS样式文件名");
	其他样式代码
</style>

四. Chrome调试工具

Chrome 浏览器提供了一个非常好用的调试工具，可以用来调试我们的 HTML 结构和 CSS 样式。

1. 使用调试工具

在这里插入图片描述

巧克力code

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Web前端——CSS结构

一. CSS定义网页分为三个部分结构（HTML）表现（CSS）行为（JavaScript）1. CSS层叠样式表网页实际上是一个多层的结构，通过CSS可以为网页的每一层来设置样式而最终我们能看到的只是网页的最上面一层总之一句话，CSS用来设置网页中元素的样式2. 使用CSS来修改元素的样式方式一：(内联样式，行内样式)定义：在标签内部通过style属性来设置元素的样式缺点：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍并且当样式发生变
复制链接

扫一扫