当前位置：首页 > news >正文

HTML教程——1,css

news 2025/10/23 9:50:47

CSS（Cascading Style Sheets）即层叠样式表，是一种用于描述 HTML 或 XML 文档呈现的样式表语言。以下是关于 CSS 的详细教程：

CSS 的基本语法

CSS 规则由选择器和声明块组成，语法格式如下：

css

选择器 {属性: 值;属性: 值;...
}

例如，p { color: red; font-size: 16px; }表示选择所有的<p>元素，将其文本颜色设置为红色，字体大小设置为 16 像素。

CSS 的引入方式

行内样式：直接在 HTML 元素的style属性中定义 CSS 样式。例如：<p style="color: red; font-size: 16px;">这是红色文本</p>。这种方式优先级最高，但不利于维护，不推荐大量使用。
内嵌式：在 HTML 文档的<head>部分使用<style>标签定义 CSS 样式。例如：

html

预览

<head><style>p {color: #0000FF;text-decoration: underline;font-weight: bold;font-size: 25px;}</style>
</head>

链接式：创建单独的.css文件，然后在 HTML 中通过<link>标签引入。例如：

html

预览

<head><link rel="stylesheet" href="styles.css">
</head>

导入式：在 HTML 的<style>标签中使用@import语句导入外部 CSS 文件。例如：

html

预览

<head><style>@import url(sheet1.css);</style>
</head>

CSS 选择器

基本选择器
- 元素选择器：选择特定类型的元素，如p { color: blue; }会选择所有的<p>元素。
- ID 选择器：选择具有特定 ID 的元素，ID 是唯一的，如#header { background-color: gray; }会选择 ID 为header的元素。
- 类选择器：选择具有特定类的元素，如.container { width: 100%; }会选择所有类名为container的元素。
- 通用选择器：选择所有元素，如* { margin: 0; padding: 0; }。
组合选择器
- 后代选择器：选择元素内的所有后代元素，如div p { color: green; }表示选择<div>元素内的所有<p>元素。
- 子选择器：选择元素的直接子元素，如div > p { color: purple; }表示选择<div>元素的直接子元素<p>。
- 相邻兄弟选择器：选择紧接在另一个元素后的元素，如p + ul { margin-top: 10px; }表示选择紧跟在<p>元素后的<ul>元素。
- 通用兄弟选择器：选择在另一个元素后的所有兄弟元素，如p ~ ul { margin-left: 20px; }表示选择<p>元素之后的所有<ul>元素。
属性选择器：选择具有特定属性或属性值的元素，如a[href] { color: blue; }表示选择所有具有href属性的<a>元素。
伪类和伪元素
- 伪类：选择处于特定状态的元素，如a:hover { color: red; }表示鼠标悬停在<a>元素上时的样式。
- 伪元素：选择元素的特定部分，如p::first - line { font - size: 120%; }表示选择<p>元素的第一行。

常用 CSS 属性

文本相关：color设置文本颜色，font - family设置字体类型，font - size设置字体大小，text - align设置文本对齐方式等。
背景相关：background - color设置背景颜色，background - image设置背景图片，background - repeat设置背景图片是否重复等。
盒模型相关：width和height设置元素的宽度和高度，margin设置元素外部边距，padding设置元素内部填充，border设置元素边框等。
定位相关：position设置元素定位方式，包括static、relative、absolute、fixed、sticky等，top、right、bottom、left设置元素的偏移量，display设置元素的显示类型等。