第四章 CSS样式基础

hhmy123456

已于 2024-09-29 11:00:07 修改

阅读量310

点赞数 13

文章标签： css 前端

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

本文链接：https://blog.csdn.net/2401_86933352/article/details/142587137

版权

4.1 CSS概述

4.1.1.CSS的基本概念

层叠样式表，是一种用来描述网页外观的样式语言。它可以控制网页的布局、颜色、字体、大小等各种视觉效果。

4.1.2传统HTML的缺点

维护困难
标记不足
网页过“胖”
定位困难

4.1.3.CSS的特点和优势

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

4.1.4.CSS的编写规则

目录结构命名规则：一般叫css或style
.样式文件的命名规则：一般和html文件名字取一样
.选择器的命名规则：一般用小写字母和下划线来命名
CSS代码注释注释：/* */
CSS代码缩进：tab键用来缩进

4.2 CSS语法基础

4.2.1.CSS基本语法

4.2.1.1.基本语法

选择器{属性1：属性值1；属性二：属性值二.......}

4.2.1.2.语法说明

展示样例：

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

class选择器也叫“类”选择器，可以给指定的标签设置一个class属性和class值然后通过class选择器找到对应的标签，为其设置class值。

4.2.2.2.class选择器

class 选择器以 “.” 开头，后面跟着类名。可以将相同的样式应用于多个不同的元素，只要这些元素具有相同的类名。例如，“.my-class” 选择器将选择所有具有 “my-class” 类名的元素。

4.2.2.3.ID选择器

ID 选择器以 “#” 开头，后面跟着 ID 名称。ID 选择器在整个网页中必须是唯一的，只能应用于一个元素。例如，“#my-id” 选择器将选择具有 “my-id” ID 名称的元素。

4.2.2.4.伪类选择器

伪类选择器用于选择处于特定状态的元素。例如，“:hover” 伪类选择器将选择鼠标悬停在其上的元素，“:active” 伪类选择器将选择正在被激活的元素（如被点击的链接）。2

4.2.3.CSS选择器声明

4.2.3.1.集体生明

可以将多个选择器组合在一起，使用相同的声明块。这样可以减少代码量，提高代码的可读性。例如，“h1, h2, h3 { color: blue;}” 表示将标题一、标题二和标题三的文本颜色都设置为蓝色。

4.2.3.2.全局声明

使用 “” 选择器可以选择网页中的所有元素，进行全局样式声明。例如，“ {margin: 0; padding: 0;}” 表示将网页中所有元素的外边距和内边距都设置为 0。

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

派生选择器可以根据元素之间的关系来选择元素。例如，“div p” 选择器将选择所有在<div>元素内部的<p>元素

uh
4.3 CSS引入方式

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

4.3.1.1.基本语法

在 HTML 元素的 “style” 属性中直接编写 CSS 样式。例如，“<p style="color: red; font-size: 16px;">这是一个段落。</p>”

4.3.1.2.语法说明

内联样式表的优先级最高，但会使 HTML 代码变得冗长，不利于维护和更新。一般只在需要为单个元素设置特殊样式时使用。

4.3.2.内部样式表

4.3.2.1.基本语法

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

4.3.2.2.语法说明

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

4.3.3.外部样式表

4.3.3.1.链接外部样式表

在 HTML 文件的<head>标签中使用<link>标签来链接外部 CSS 文件。例如，“<head> <link rel="stylesheet" href="styles.css"> </head>”。

4.3.3.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.色彩单位

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

使用六位十六进制数来表示颜色，例如 “#FF0000” 表示红色。十六进制数的前两位表示红色分量，中间两位表示绿色分量，后两位表示蓝色分量。

4.4.2.2.用色彩名称方式表示色彩值

可以直接使用颜色的名称来表示颜色，如 “red” 表示红色，“blue” 表示蓝色等。但颜色名称的数量有限，不能满足所有的颜色需求。

4.4.2.3.使用RGB（x,y,z）函数表示

使用 RGB 函数可以指定颜色的红、绿、蓝三个分量的值，其中 x、y、z 分别表示红、绿、蓝三个分量的值，取值范围为 0-255。例如，“rgb (255,0,0)” 表示红色。

4.5.CSS继承与层叠

CSS 的继承是指某些样式属性可以从父元素传递给子元素。

4.6 元素类型

4.6.1.块级元素

块级元素在网页中独占一行，并且可以设置宽度、高度、边距等属性。常见的块级元素有<div>、<p>、<h1>-<h6>等。块级元素可以包含其他块级元素和行级元素

4.6.2.行级元素

行级元素不会独占一行，而是在一行内与其他行级元素并排显示。行级元素不能设置宽度和高度，只能通过字体大小等属性来间接影响其显示大小。常见的行级元素有<span>、<a>、<img>等。行级元素可以包含文本和其他行级元素。

4.6.3.列表项元素

列表项元素通常用于创建列表，如无序列表<ul>和有序列表<ol>中的<li>元素。列表项元素可以设置各种样式属性，并且可以包含其他元素

4.6.4.隐藏元素

可以使用 CSS 的 “display:none” 属性将元素隐藏起来，使其在网页中不可见。隐藏元素仍然存在于 HTML 文档中，但不会被显示出来。可以通过 JavaScript 等方式来控制隐藏元素的显示和隐藏。