CSS语法规则

最新推荐文章于 2024-06-25 22:00:00 发布

布白whitenot1

最新推荐文章于 2024-06-25 22:00:00 发布

阅读量1.2k

点赞数 1

分类专栏：前端开发--布白的学习笔记文章标签： css css3 前端大前端

本文链接： https://blog.csdn.net/weixin_44683942/article/details/115445622

版权

CSS语法规则

概述

发展历程

随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能。但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿。于是 CSS 便诞生了。

CSS3 是 CSS 层叠样式表技术的升级版本，于1999年开始制订，2001年5月23日 W3C 完成了 CSS3 的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

到目前为止，CSS3 的内容仍在不断的更新升级中。

CSS概念

css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML 的文件样式的计算机语言。

作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。

前端三层：

html 结构层从语义的角度出发搭建网页结构

css 样式层从美观的角度出发描述页面样式

JavaScript 行为层从交互的角度出发描述页面行为

CSS 的出现，实现了网页的结构和样式分离，拯救了混乱的 HTML，更加拯救了我们 web 开发者。

CSS 可以说是网页的美容师，让我们的网页更加美观。

CSS组成：

层叠式：CSS中贯穿始终的加载特性

层叠性
继承性

样式：如何定义显示HTML元素

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

样式

语法

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

以上是一段使用 css 给 <p> 标签添加宽度和字号的样式设置效果。

书写位置

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

①内联式

内联式，也被习惯叫做行内式。

书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。

所有的 css 样式属性总体组成标签的 style 属性的属性值。

<div style="width: 100px;height: 100px;font‐size: 14px;">1</div>

缺点：

内联式必须写在标签上，没有完全脱离HTML标签
css样式代码让标签结构繁重，不利于HTML结构的解读
一个内联式的css代码，只能给一个标签使用，如果多个标签有相同样式，同样的css代码需要书写多次，增加代码量。

因此，实际工作中不会使用行内式编写 css 代码。

②内嵌式

书写位置：在 HTML 文件中，<head> 标签内部有一个 <style> 标签， <style> 标签书写在< title> 标签后面，所有 css 代码书写在 <style> 标签内部。<style>标签有一个标签属性叫做 type，属性值是 ”text/css”，表示 <style> 标签内部书写的是纯文本类型的 css 代码。HTML5可以不写type属性。

<style type="text/css"> 
    /*内部书写css代码*/ 
    div {
     
        width: 100px; 
        height: 100px; 
        background‐color: pink; 
    } 
</style>

优点：

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

缺点：

结构和样式并没有完全分离，代码依旧书写在 HTML 文件的<style>标签内部。
css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用。
在 HTML 中如果 css 代码太多，会造成文件头重脚轻，不利于 HTML 文件的查看。

用途：初学阶段使用，或制作一些小的案例，但是如果是完整的网站项目不能使用内嵌式样式表。

③外联式

外联式 CSS，也可以叫做外链式 CSS、外部 CSS。

书写位置：在一个单独的扩展名为 .css 的文件中。

书写语法：.css文件内部代码与内嵌式样式表中 <style> 标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。

注意：在 .css 文件中书写时，不需要再加 <style> 标签

外联式样式表必须引入到 HTML 文件中，才能正常进行加载。

引入方式：在 HTML 中的 <head> 标签内部使用 <link> 标签进行引入，href 属性设置引入 css 的路径。

<link rel="stylesheet" href="外联式.css" type="text/css" />

link标签的书写位置

<link>标签可以书写在html中的任意位置。

浏览器加载HTML文件时，从上到下进行渲染，如果<link>写在body内部的结构后面，会导致前面的元素没有样式，不利于用户体验，另外浏览器渲染到link时，表示页面样式发生了变化，会重新渲染前面的HTML元素，导致页面的加载时间变长。

建议：写在<head>标签内部，保证HTML元素渲染完后就是有样式的，提高用户体验。

认识 <link> 标签的几个属性：

rel ：relationship，关系的意思，表示引入的外部文件与 HTML 之间的关系。css 文件引入时属性值是 stylesheet，说明引入的是样式表。

href ：hypertext reference，超文本引用，属性值是引入的路径。

type ：属性值 “text/css”，表示加载时代码按照纯文本形式的 css 代码加载。

其中，type 属性在 HTML5 中规定可以省略不写。

优点：

实现了 HTML 和 css 完全分离。
多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量
还可以实现一个 css 变化，多个 HTML 页面同时变化。
一个 HTML 文件可以引入多个 css 文件，多个文件中的代码都会加载到 HTML 页面中，可以帮我们实现代码分层。

用途：用于大型项目及完整网站制作。

④导入式

书写位置：在内嵌式样式表 <style> 标签内部，或者在外联式样式表内部，通过导入方法，导入其他的外部的 .css 文件。

导入方式：利用一条 @import url(路径) 语句进行引入。

<style> 
    @import url(css/01.css); 
    div {
     
        border‐color: #00f; 
    } 
</style>

导入式样式表的作用与外联式样式表基本相同，但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。

实际工作中

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

样式规则

明确了样式表的几种书写方式，接下来以内嵌式样式表为例，学习样式的书写规则。

（1）所有的 css 代码都必须书写在 <head>标签内部的一对 <style> 标签内。

（2）css 在给某个标签设置样式前，必须使用选择器先选中标签。

（3）css 样式的属性，属性名和属性值的键值对写法为 k:v;。

（4）给每个选择器添加的样式属性都必须写在一对大括号 {} 之内。

<style type="text/css"> 
    div {
     
        width: 200px; 
    } 
</style>

（5）给一个标签添加所需要的样式时，只需要将属性名和属性值直接一一罗列出来，css 每条属性都会加载到浏览器上。

div { 
    width: 200px; 
    height: 200px; 
    background‐color: skyblue; 
    margin‐bottom: 10px; 
}

（6）分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。

（7）css 中所有属性与属性之间对空格、换行、缩进不敏感。

div{width:200px;height:200px;background‐color:skyblue;margin‐bottom:10px;}

等价于：

div { 
    width: 200px; 
    height: 200px; 
    background‐color: skyblue; 
    margin‐bottom: 10px; 
}

提示：书写代码时，最好进行换行、合理缩进，有利于读取代码。上传代码时，为了减少代码量，可以压缩代码。

注释

前面已经了解过 HTML 中注释的写法与作用，在 CSS 中也可以使用注释。

css中的注释写法：

/*中间部分为注释内容*/

例如：

div { 
    width: 200px; 
    height: 200px; 
    background‐color: skyblue; /*设置标签的背景颜色*/ 
    margin‐bottom: 10px; 
}

vs code快捷键：ctrl+/。

建议：在 CSS 代码中合理书写注释内容。

代码书写方式

展开格式：开发过程中，代码展开：空白、换行、缩进。

div {
	width: 100px;
	height: 100px;
	background-color:pink;
}

紧凑格式：上传服务器时，减少不必要的空格，压缩文件大小，利于传输。

div{width:100px;height:100px;background-color:pink}

英文大小写：css中的英文可以使用大写，也可以使用小写。

空格规范：

选择器后加一个空格
属性冒号后加一个空格

常用样式属性

文字三属性

颜色 color

作用：给文字设置颜色。

属性名 k ：color

属性值 v ：颜色名、颜色值。

（1）颜色名就是使用颜色的英文单词进行表示。

<p style="color: cyan;">看文字颜色是什么？</p> 
<p style="color: yellowgreen;">看文字颜色是什么？</p>

更多的颜色名可以通过查询手册得到：

（2）颜色值指使用具体颜色的数值表示，包括 rgb 模式和十六进制模式写法。

rgb 模式：是根据红绿蓝三原色进行混合而成的颜色模式，每个原色的取值范围是0-255，一共256个数值。

书写方法：rgb(红,绿,蓝)

需要记忆常用颜色色值：

红色 rgb(255,0,0)

绿色 rgb(0,255,0)

蓝色 rgb(0,0,255)

黑色 rgb(0,0,0)

白色 rgb(255,255,255)

灰色 rgb(128,128,128)

<p style="color: rgb(0,255,0);">看文字颜色是什么？</p>

**十六进制模式：**是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进制的 0-255 的数字。

十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符。

书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行标签。

0→00

255→ff

书写方式：使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。

红色 #ff0000

绿色 #00ff00

蓝色 #0000ff

黑色 #000000

白色 #ffffff

灰色 #808080

<p style="color: #00ff00;">看文字颜色是什么？</p>

一部分十六进制颜色值可以进行简写，如果红、绿、蓝三个颜色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。

红色 #f00

绿色 #0f0

蓝色 #00f

类似 #808080 是不能进行简化的。

**应用：**实际工作中，颜色值需要根据设计图得到。

字体 font-family

作用：定义元素内文字的字体。

属性名 k ：font-family，字体属于 font 综合属性的一个单一属性。

属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔。

常用的中文字体：

宋体 SimSun

微软雅黑 Microsoft Yahei

常用的英文字体：

Arial

consolas

如果不设置字体属性，不同的浏览器有自己的默认字体。

注意1 ：font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。

注意2 ：浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路。

注意3 ：中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。

<p style="font‐family: 'arial','微软雅黑','宋体';">看文字字体是什么？abc</p>

**应用：**首选字体需要根据设计图确定，最后需要设置备用字体。

字号 font-size

作用：设置文字的大小。

属性名 k ：font-size，字号属于 font 综合属性的一个单一属性。

属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位。

相对长度单位	说明
px	像素值，最常使用的单位
em	倍数，继承自祖先元素设置的字号的倍数
%	百分比，继承自祖先元素设置的字号的百分比
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、IE，默认显示字号为 16px。

<p style="font‐size: 14px;">看文字字号是多少？</p>

不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。

chrome 浏览器最小加载显示字号为12px。

IE 浏览器最小可以支持1px的字号。

<p style="font‐size: 1px;">看文字字号是多少？</p>

注意：网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px+。

尽量使用12px、14px、16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有 bug。

**应用：**实际工作中的字号，需要以设计图为准。

盒子实体化样式三属性

如果想在浏览器中具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性。

宽度属性 k：width

高度属性 k：height

属性值 v：常用px为单位的数值，定义元素占有的宽度和高度。

背景颜色 k：background-color，背景颜色是background综合属性的一个单一属性。

属性值 v：颜色名或颜色值，与color的属性值是一样的。

<div style="width: 100px;height: 100px;background‐color: pink;">1</div>

以上6个样式属性属于css中比较常用的，后期我们将接触更多的样式属性。

选择器

选择器：选择要添加样式的 HTML 标签的一种方法、模式。

首先学习 css2.1 版本的七种选择器：

基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。

高级选择器：后代选择器、交集选择器、并集选择器。

基础选择器

标签选择器

通过标签名去选择标签元素。

书写方式：标签名。

选择范围：选中的是HTML文件中==所有的同名标签。==

注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。

优点：可以选中所有的同名标签，设置所有同名标签的公共样式。

缺点：只能实现全选，不能对局部的标签添加特殊样式。

id 选择器

通过标签上的 id 属性去选择标签。

书写方式：#id 属性值

选择范围：只能选中一个标签。

id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。

如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。

#ps1 {
    color: red; 
}
#hl2 {
    color: red; 
}

缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。

类选择器

通过标签的 class 属性去选择标签。

书写方式：.class属性值

选择范围：是页面中所有 class 属性值相同的标签。

class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。

特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中。

特点 2：一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。

<p class="demo para">这是一个普通段落</p>

.demo { 
	color: red; 
}
.para { 
    font‐size: 30px;
}

优点：

①通过一个类选择器进行多选，选中多个标签，添加公共样式。

②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。

实际工作中，通常我们有一个使用规律：

类上样式(CSS)，id 上行为(JavaScript)。

标签的class上用于添加css样式，id上用于添加js行为

通配符选择器

通过一个特殊符号选择页面内所有的标签。

书写方式：*

选择范围：包含 <html>标签在内的所有标签。

* { 
    color: red; 
}

优点：可以实现全选，简化书写。

缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。

注意：实际上线的网站不允许使用 * 去清除默认内外边距。

不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。

高级选择器

由于基础选择器不能实现所有选择情况，后期在基础选择器的基础上衍生出了几种高级选择器。

高级选择器的组成部分是基础选择器。

后代选择器

通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。

后代选择器也叫包含选择器。

书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。

选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。

后代选择器必须满足所有的后代关系才能够被选中（你是我后代你就能被选中），后代关系不一定只能是父子关系。

优点：减少 class 属性的定义使用，选择效率更高。

交集选择器

通过一个标签之上满足所有的基础选择器的需求去选择标签。

书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。

选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。

比较常见的是标签与类的交集。

p.demo { 
    color: red; 
}

表示：选择的是带有 demo 类名的所有的p标签。

交集选择器可以进行多个类名的连续交集，需要满足更多的条件才能选中标签。

p.demo.para { 
    font‐size: 30px; 
}

表示：选择的标签必须是 <p> 标签，同时必须具备 demo 和 para 两个类名。

IE6 不支持类名连续交集写法。

交集选择器可以作为其他高级选择器的组成部分。

.box1 p.demo { 
    font‐size: 30px; 
}

表示：选择的是类名为 box1 盒子的后代中的类名为 demo 的 <p> 标签。

并集选择器

不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。

书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。

选择范围：是所有的单独选择器选中的标签的并集集合。

用途：

①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。

②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。

body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,th,td { 
    margin: 0; 
    padding: 0; 
}

层叠式

CSS 的概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包含继承性和层叠性。

继承性

如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。

总结：能够被继承的样式是所有的文字相关

最低0.47元/天解锁文章

布白whitenot1

关注关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS语法规则

CSS语法规则

概述

发展历程

CSS概念

样式

语法

书写位置

样式规则

注释

代码书写方式

常用样式属性

文字三属性

盒子实体化样式三属性

选择器

基础选择器

标签选择器

id 选择器

类选择器

通配符选择器

高级选择器

后代选择器

交集选择器

并集选择器

层叠式

继承性

热门文章

分类专栏

最新评论

最新文章

目录