第四章 CSS样式基础

江恸

于 2024-09-29 10:58:02 发布

阅读量550

点赞数 22

文章标签： css 前端

本文链接：https://blog.csdn.net/2302_80416946/article/details/142587133

版权

4.1 CSS概述

4.1.1.CSS的基本概念

html页面结构文件

css页面样式文件

4.1.2传统HTML的缺点

4.1.2.1.维护困难
4.1.2.2.标记不足
4.1.2.3.网页过“胖”
4.1.2.4.定位困难

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离
4.1.3.2.增强了网页的表现力
4.1.3.3.使整个网站显示风格趋于统一

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

4.1.4.2.样式文件的命名规则
4.1.4.3.选择器的命名规则

4.1.4.4.CSS代码注释

/* */
4.1.4.5.CSS代码缩进

4.2 CSS语法基础

4.2.1.CSS基本语法

4.2.1.1.基本语法

selector{property:value;

4.2.1.2.语法说明

1.选择器

2.属性/属性值对

3.属性

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

也可称为元素选择器，直接使用HTML标记名称作为选择器

4.2.2.2.class选择器

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

4.2.2.3.ID选择器

id不能重复

4.2.2.4.伪类选择器

4.2.3.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派生选择器（上下文选择器）

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

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

strong {font-weight; bold;}

代码如下：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用      <strong></p >

<ol>

<li>< strong>我是斜体字，这是因为 stromg 元素位于i标记内</strong></li>

<li>我是正常的字体</li>

</ol>

在上面的例子中，有两个strong标记，但只有元素中的strong元素的样式为斜体字，

而且无须为strong标记定义特别的class或id，应用派生选择器，代码更加简洁。

4.3 CSS引入方式

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

4.3.1.1.基本语法

基本语法：CSS 由选择器和声明块组成。选择器用于指定要应用样式的 HTML 元素，声明块由一对花括号 “{}” 包裹，里面包含一个或多个属性声明，每个属性声明由属性名和属性值组成，用冒号 “:” 分隔，多个属性声明之间用分号 “;” 分隔。例如：“p { color: red; font-size: 16px; }” 表示将段落元素的文本颜色设置为红色，字体大小设置为 16 像素

4.3.1.2.语法说明

选择器可以是元素选择器、类选择器、ID 选择器、伪类选择器等。属性名和属性值的组合可以控制 HTML 元素的各种样式属性，如颜色、字体、大小、布局等。

4.3.2.内部样式表

在 HTML 文件的<head>标签中使用<style>标签来定义 CSS 样式。例如，“<head> <style> p { color: red; font-size: 16px; } </style> </head>”

4.3.2.1.基本语法

4.3.2.2.语法说明

内部样式表的作用范围仅限于当前 HTML 文件，可以为多个元素设置样式。但如果多个 HTML 文件需要相同的样式，使用内部样式表会导致代码重复

4.3.3.外部样式表

4.3.3.1.链接外部样式表

4.3.3.2.导入外部样式表

链接外部样式表：在 HTML 文件的<head>标签中使用<link>标签来链接外部 CSS 文件。例如，“<head> <link rel="stylesheet" href="styles.css"> </head>”。2
导入外部样式表：在 CSS 文件中使用 “@import” 规则来导入其他 CSS 文件。例如，“@import url ('styles2.css');”。导入外部样式表可以将多个 CSS 文件组合在一起，方便管理和维护。但过多的导入可能会影响网页的加载速度

4.4 CSS的属性单位

4.4.1.长度、百分比单位

4.4.1.1.相对类型

相对单位是相对于其他元素或浏览器窗口的大小来计算的。例如，“em” 是相对于字体大小的单位，“%” 是相对于父元素的大小的百分比单位。相对单位的优点是可以使网页在不同的设备和屏幕尺寸上自适应

4.4.1.2.绝对类型

绝对单位是固定的物理单位，如 “px”（像素）、“pt”（磅）、“cm”（厘米）等。绝对单位的优点是可以精确控制元素的大小，但在不同的设备和屏幕尺寸上可能会出现显示不一致的情况

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~f。参数必须是两位数，对于只有1位的参数，应在前面补0。这种方法共可表示23 256×256种色彩，即16M 种色彩。而红色、绿色、黑色、白色的十六进制设置值分别#FF0000、#0OFF00、#0000FF、#000000、#FFFFFF