2. 科技
    3. Web前端——CSS结构

    Web前端——CSS结构

    科技2022-07-11  110

    文章目录

    一. CSS概述1. 来源2. 发展3. 使用CSS的好处 二. CSS定义1. CSS层叠样式表（Cascading Style Sheet）2. 定义CSS的基本语法 三. 在HTML文档中应用定义好的CSS方式一：(内联样式，行内样式)1. 定义：2. 语法：3. 缺点： 方式二：(内部样式表)1. 定义：2. 语法：3. 优点：4. 缺点： 方式三：(外部样式表)1. 定义：2. 语法3. 样式表(stylesheet)特点： 方式四：导入式1. 定义2. 基本语法

    一. 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复合选择器

    属性值：

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

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

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

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

    以下有几种关联方式：

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

    1. 定义：

    在标签内部通过style属性来设置元素的样式

    2. 语法：

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

    3. 缺点：

    使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍 并且当样式发生变化时，我们必须要一个一个的修改，非常不方便

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

    <!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样式定义 </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>
    Processed: 0.008, SQL: 8