CSS基础

Smile灬凉城666

于 2024-08-06 08:38:13 发布

阅读量338

点赞数 7

文章标签： css

本文链接：https://blog.csdn.net/qq_73792226/article/details/140944247

版权

CSS规则由选择器和声明块组成，基本结构如下：


	selector { 

	property: value; /* more properties and values */ 

	}

CSS提供了多种选择器来定位HTML元素，包括：

元素选择器：选择所有指定的HTML元素，如p { color: red; }选择所有<p>元素。
类选择器：选择所有指定类名的元素，使用.表示，如.className { color: blue; }选择所有类名为className的元素。
ID选择器：选择具有指定ID的元素，使用#表示，如#idName { color: green; }选择ID为idName的元素。
复合选择器：
- 后代选择器：选择某个元素内的所有指定元素，使用空格分隔，如div p { color: yellow; }选择所有在<div>内的<p>元素。
- 子选择器：选择某个元素的直接子元素，使用>分隔，如ul > li { color: purple; }选择所有<ul>的直接子元素<li>。
- 相邻兄弟选择器：选择紧接在某元素后的指定元素，使用+分隔，如h1 + p { color: orange; }选择紧接在<h1>后的第一个<p>元素。
- 通用兄弟选择器：选择某元素后面的所有指定元素，使用~分隔，如h1 ~ p { color: pink; }选择<h1>后的所有<p>元素。
伪类选择器：选择特定状态的元素，如:hover选择鼠标悬停状态的元素，:first-child选择父元素的第一个子元素。
伪元素选择器：选择元素的特定部分，如::before和::after用于在元素内容的前后插入内容。

CSS提供了丰富的属性来控制网页的样式，包括但不限于：

字体样式：font-family、font-size、font-weight、font-style等。
文本样式：color、text-align、text-decoration、text-indent、line-height等。
背景样式：background-color、background-image、background-repeat、background-position、background-size等。
盒模型相关：border、margin、padding、width、height等。
布局与定位：display（如block、inline、flex、grid）、position（如static、relative、absolute、fixed）、top、right、bottom、left、z-index等。

CSS支持多种单位，包括：

绝对单位：如px（像素）、cm（厘米）、mm（毫米）、in（英寸）、pt（磅）、pc（派卡）。
相对单位：如em（相对于元素的字体大小）、rem（相对于根元素<html>的字体大小）、vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin、vmax（相对于视口较小或较大的那一个百分比）。