2020-10-17学习笔记（CSS概述——CSS书写位置）

2020-10-17 本文已影响0人 amanohina

CSS 概述

产生背景

为了解决HTML页面臃肿的问题，CSS应运而生。

发展过程

CSS版本更新迭代

CSS概念

css——层叠样式表，一种用来表现HTML的文件样式的计算机语言
作用：静态地修改修饰网页，可以配合各种脚本语言（比如js）动态地对网页各元素进行格式化

意义：CSS的出现，实现了网页结构和样式分离，拯救了混乱的HTML。CSS就是网页的美容师，让网页更加美观。

无CSS样式的网页

有CSS样式的网页

CSS组成

层叠式

CSS中贯穿始终的加载特性

层叠性
继承性

样式

定义如何显示HTML元素

文本文字
背景
盒模型
浮动
定位
其他

CSS语法

CSS规则

CSS规则由两个主要的部分构成：选择器，一条或者多条声明

例子

书写位置

CSS的代码根据书写位置不同分为四种书写方式：内联式，内嵌式，外联式，导入式

内联式

内联式，也被习惯叫做行内样式
书写位置：在HTML标签之上的style属性中书写css样式。
所有的CSS样式属性总体组成标签的style属性的属性值。

 <p style="font-size: large; color: brown;">测试文字</p>

效果

内联式缺点

必须写在标签上，没有完全脱离HTML标签
CSS样式代码让标签结构繁重，不利于HTML结构的解读
一个内联式的CSS代码，只能给一个标签用，如果有很多标签有相同样式就会增加代码量
实际工作中不会使用内联式（行内式）编写CSS代码

内嵌式

书写位置：在HTML文件中，<head>标签内部有一个<style>标签。
<style>标签书写在<title>后面，所有css代码写在<style>内部
<style>标签有一个type属性，属性值为“text/css”

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        p{
            font-size: large;
            color: brown;
        }
    </style>
</head>
<body>
    <p>测试文字</p>
</body>
</html>

效果与上面的测试文字一致

优点：

1.实现了结构与样式的初步分离，css只管负责样式，html只管负责结构
2.多个标签可以利用一段代码设置相同的样式，节省代码量

缺点：

1.结构与样式并没有完全分离，代码依旧写在了HTML文件的<style>标签内部。
2.css样式只能给一个HTML文件使用，不能够被多个HTML文件同时使用。
3.在HTML文件里如果css代码够多，会造成头重脚轻的问题。

外联式

外联式CSS，也叫做外链式CSS，外部CSS
书写位置：在一个单独的拓展名.css的文件里
语法：内部代码与内嵌式样式表中<style>标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。
在.css文件中书写时，不需要添加<style>标签了。
新建一个css文件：

添加css文件，对p标签进行样式设计

外联式引用

外联式样式表必须引入到HTML文件中，才能正常进行加载
引入方式：在<head>标签内部使用<link>标签进行引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css" type="text/css">
</head>
<body>
    <p>测试文字</p>
</body>
</html>

属性名	属性值	说明
rel	"stylesheet"	表示引入的外部文件与HTML之间的关系，样式表
href	css文件路径	hypertext reference，超文本引用
type	"text/css"	表示加载时代码按照纯文本形式的css代码加载，HTML5中可以省略type属性不变

外联式优点

1.实现了HTML与CSS的完全分离
2.多个HTML文件可以共用一个css文件，便于提取公共css，减少了代码量
3.可以实现一个css变化，多个HTML页面可以同时变化，减少工作量
4.一个HTML文件可以引入多个css，可以实现同一个页面中css代码分层

导入式

书写位置：在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其他的外部的.css文件
导入方式：语句：@import url(路径)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用外联式 -->
    <link rel="stylesheet" href="css01.css" type="text/css">
    <style>
        /* 使用导入式 */
        @import url(css02.css);
    </style>
</head>
<body>
    <!-- 标签p和标签div的样式通过外联式和导入式后的综合表现 -->
    <p>测试文字</p>
    <div>
        <h2>这是div区域的标题</h2>
        <p>这是一块区域</p> 
    </div>
</body>
</html>

css02文件的设置

css01文件的设置

上述代码的效果

导入式的问题

导入式样式表的作用与外联式样式表基本相同
网速较慢的话会出现css没有效果的问题，因为是HTML结构加载之后才进行编译
工作中多数使用外联式，很少使用导入式

实际使用

小型案例：内嵌式CSS
实际工作、大型网站项目：推荐使用内联CSS