第四章 CSS样式基础

占星落

于 2024-09-29 11:35:14 发布

阅读量749

点赞数 33

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_82177506/article/details/142631199

版权

4.1 CSS概述

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页内容显示方式的样式语言。它与HTML一起使用，通过分离内容与样式，提供更高效的网页设计和维护。CSS的主要作用是控制网页的布局、颜色、字体、间距等视觉表现。

4.1.1.CSS的基本概念

1. 选择器（Selector）：用于指定HTML元素，决定样式应用在哪些元素上。常见选择器有：

元素选择器（如 p）：选择所有 <p> 元素。

类选择器（如 .class）：选择具有特定类的元素。

ID选择器（如 id）：选择具有特定ID的元素。

组合选择器（如 div > p）：选择父子关系等特定结构的元素。

2. 属性与值（Property & Value）：CSS通过指定属性和值来定义样式。属性决定了元素的哪一部分将被修改，值则规定了属性的具体样式。例如：

css

color: blue; / 设置文本颜色为蓝色 /

fontsize: 16px; / 设置字体大小为16像素 /

3. 层叠性（Cascading）：当多个样式同时作用于一个元素时，CSS使用“层叠”规则决定哪一个样式优先应用。一般情况下，优先级从高到低为：

内联样式（直接写在HTML元素内，<div style="color: red;">）

ID选择器

类选择器和属性选择器

元素选择器

4. 继承（Inheritance）：某些C

4.1.2传统HTML的缺点

4.1.2.1.维护困难

为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于真个网站而言，后期修改和维护的成本很高。

4.1.2.2.标记不足

HTML本身的标记十分的少，很多标记都是为我那个也内容服务的，而关于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。

4.1.2.3.网页过“胖”

由于没有统一对各种风格样式进行控制，HTML的页面往往体积过大，占用掉了很多宝贵的宽带。

4.1.2.4.定位困难

在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的<table>标记同样也导致页面的复杂和后期维护的困难。

4.1.3.CSS的特点和优势

CSS 通过定义标记如何表现，对页面结构风格进行控制，分离文档的内容和表现，克服了传统 HTML的缺点。将CSS 嵌人在页面中，通过浏览器解释执行，而且 CSS 文件是文本文件，只要理解 HTML都可以掌握它。其特点主要如下。

4.1.3.1.表现和内容分离

CSS通过定义HTML,标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便

4.1.3.2.增强了网页的表现力

CSS样式属性提供了比HTML,更多的格式设计功能。例如，可以通过CSS样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。

4.1.3.3.使整个网站显示风格趋于统一

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网页的格式功能，从而大大降低网站的开发与维护的成本。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

存放css样式文件目录一般命名为style或css。

4.1.4.2.样式文件的命名规则

在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的便;在项目后期，为了网站性能上的考虑，会将不同的CSS文件整合到一个CSS文件中这个文件一般命名为style.css或css.css。

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样:的时间。样式名必须能够表示样式的大概含义(禁止出现如 Divl，Div2和 Style 等自名),者可以参考表4-1中的样式命名。

4.1.4.4.CSS代码注释

像其他语言一样，CSS允许用户在源代码中嵌人注释。CSS注释被浏览器忽略，不影响网页效果。注释有助于记住复杂的样式规则的作用、应用的范围等，便于样式规则的后期维护和应用。CSS注释以字符“/*”开始，以字符“*/”结束。注释可以是单行，也可以
是多行，并可以出现在CSS代码的任何地方

4.1.4.5.CSS代码注释

代码缩进可以保证CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择器按两次 Tab 键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱

4.2 CSS语法基础

CSS就是一个包含一个或多个规则的文本文件，CSS规则由两个主要的部分构成:选择髀(Selector选择器)和声明(Declaration)
选择器通常是需要改变样式的HTML元素
声明由一个或多个属性与属性值对组成。属性是CSS的关键字，如font-family(字体)color(颜色)和border(边框)等，属性用于指定选择器某一方面的特性，而属性值则用于指定选择器的特性的具体特征。

4.2.1.CSS基本语法

4.2.1.1.基本语法

selector { propertyl : valuel ; property2 : value2 ; property3 : value3} ;选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3:…}

4.2.1.2.语法说明

(1)选择器。选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符
(2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“.”连接，每个属性/属性值对之间用分号(;)隔开。
(3)属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性 background-color;而在脚本语言中，对象属性则连写成backgroundColor在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。

4.2.2.CSS选择器类

CSS选择器主要有4种类型:标记选择器、class选择器、ID选择器及伪类选择器等。

4.2.2.1.标记选择器型

标记选择器(也可称为“元素选择器”)即直接使用HTML标记名称作为选择器。它定义的样式作用于页面中所有与选择器同名的标记

4.2.2.2.class选择器

class选择器也叫“类”选择器，可以给指定的标签设置一个class属性和 class 值然后通过 class选择器找到对应的标签，为其设置class值，即添加CSS样式。使用 class 类选择器时，需要用英文(.)进行表示，

4.2.2.3.ID选择器

ID 选择器用来对某个单一元素定义单独的样式。ID选择器只能在HTML 页面中使用次，针对性更强。定义ID选择器时，需要在id名称前加一个“#”

4.2.2.4.伪类选择器

前面介绍的选择器都是能够与HTML,中具体标记对应的，但是像段落的第1行，超链接访问前与访问后等，就没有H1ML标记与之对应，从而也没有简单的CSS选择器应用，为此CSS引进了伪类选择器

4.2.3.CSS选择器声明

在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，都可以使用集体声明的方法，用“,”分隔多个选择器，对风格相同的 CSS 选择器同时声明

4.2.3.1.集体生明

集体声明代码如下:

h3.h4,h5 ,p{ color:red ;font-size :18px;}

4.2.3.2.全局声明

对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式。这时可以利用全局声明符号“*”代码如下:

* {color : red ;
font-size:18px ;}

4.2.3.3派生选择器（上下文选择器）

另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使(SS代码变得更加整洁。例如，要让列表项<i>中的<stnong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器:

li strong { font-style : italic ; font-weight ; normal ;} strong {font-weight :bold ;}

4.3 CSS引入方式

4.3.1.内联样式表（行内样式表）

4.3.1.1.基本语法

<标记 slye=“属性!:属性值1;属性 2:属性值 2:…">修饰的内容</标记>

4.3.1.2.语法说明

(1)标记是指 HTML标记，如p，hl 和 body 等标记;
(2)标记的 style 定义的声明只对自身起作用;
(3)slyle 属性的值可以包含多个声明，每一声明之间用“;”分隔;(4)标记门身定义的 style 样式优先于其他所冇样式定义。

4.3.2.内部样式表

4.3.2.1.基本语法

1.基本语法
I <style type =" text/css" >
选择器 1{属性 1:属性值1:属性 2:属性值 2;…}
选择器 2{属性 1:属性值1;属性 2:属性值 2;…·}选择器 n{属性1:属性值1;属性 2:属性值 2:…}</style>

4.3.2.2.语法说明

style 标记是成对标记，有1个type 属性是指 style 元素以 CSS 的语法定义。
选择器1，…，选择器n，可以定义n个选择器，再定义声明部分。
属性和属性值之间用冒号连接,“属性/属性值”对之间用分号分隔。

4.3.3.外部样式表

4.3.3.1.链接外部样式表

链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过网页的<head></head 标签中使用<link>标记将外部样式表文件链接到 HTML 文档中
(1)基本语法:
<link type="textcss”rel="stylesheet" href="外部样式表名.css">
(2)语法说明:语法中必须指定<link>标记的3个属性，其中 href是定义链接外部样式表文件的 url 可以是相对路径和绝对路径;rel是定义当前文档与被链接文档之间的关系，这里指定stylesheet，表示被链接的文档是样式表文件;type是定义链接文档的类型，这里类型指定为textcss，表示链接的外部文件为 CSS 样式表，
这里面涉及3个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。pe="texVcss"规定被链接文档的 MIME类型。href="mystyle.css"规定被链接文档的位置，只需要记住这个固定写法即可。

4.3.3.2.导入外部样式表

导人式是将一个独立的 CSS 文件导人 HTML 文档中，其是在 HTML 文档<bead>中应用<style>标签，并在<style>标签中的开头处用@ impont语句，即可导人外部样式表文件
(1)基本语法:
<style type=" text/css" >
@ import url("CSS 文件路径");
/*此处还可以存放其他 CSS 样式*/
</style>
(2)语法说明。导入样式表必须在 style 标记内开头的位置定义，可以同时导人多个外部样式表，每条语句必须以“;”结束。一般导人外部样式写在最前面，内部样式写在后面。
“@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式表的名称在书写时，必须是全称再加上后缀名“.css”，如“4-5.css”
导人式会在整个网页加载完后再加载CSS文件，因此如果网页比较大则会出现先显示无样式的页面，再出现网页的样式的情况

4.4 CSS的属性单位

4.4.1.长度、百分比单位

4.4.1.1.相对类型

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。如用cm(当前字母中，字母的宽度)作为属性单时，将会依据父元素的font-size 属性，如果没有父元素，则参考浏览器的默认值字号

4.4.1.2.绝对类型

绝对类型所使用的单位不会随着显示设备的不同而改变，也就是当属性值使用绝对单位时，不论在哪种设备上显示都是一样的，例如屏幕上的1cm与打印机上的Icm 是一样长的表 4-3 为浏览器支持的绝对类型的长度单位。
百分比单位是一种常用的相对类型，通常的参考依据为fnt-size属性。百分比值总是相对于另一个值。下面的语句将margin属性的值没置为font-size 的 200%:
pmargin:200% ;
需要注意的是，不管使用哪种单位，在设置的时候数值与单位之间不需要加空格

较大则会出现先显示无样式的页面，再出现网页的样式的情况。

4.4.2.色彩单位

HTML网页和CSS样式都是按照RGB来设颜色的。在HTML标记中只提供了两种设置色彩的方法:十六进制数和色彩英文名称。CSS则提供了三种定义色彩的方法:十六进制数、色彩英文名称、rgb 函数和rgba 兩函数。

4.4.2.1.用十六进制数方式表示色彩值

在计算机中，定义每种色彩的强度范围为0~255。当所有色彩的强度都为0时，将产生黑色:当所有色彩的强度都为 255 时，将产生白色。
在 HTML中，使用RGB概念指定色彩时，前面是一个“#”号，再加上6个十六进制数字表示，表示方法为:#RRGGBB、其中，前两个数字代表红光强度(Red)，中间两个数字代表绿光强度(Green)，后两个数字代表蓝光强度(Blue)，以上3个参数的取值范围为00~g。参数必须是两位数，对于只有1位的参数，应在前面补0。这种方法共可表示256x256x256种色彩，即16M种色彩。而红色、绿色、黑色、白色的十六进制设置值分