CSS基础

一、CSS的基本结构

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

复制代码
	selector { 

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

	}
  • 选择器(Selector):指定要应用样式的HTML元素。
  • 声明块(Declaration Block):包含一个或多个声明,每个声明由属性和值组成,属性与值之间用冒号(:)分隔,每个声明以分号(;)结束。

二、选择器类型

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

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

三、常用CSS属性

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

  • 字体样式font-familyfont-sizefont-weightfont-style等。
  • 文本样式colortext-aligntext-decorationtext-indentline-height等。
  • 背景样式background-colorbackground-imagebackground-repeatbackground-positionbackground-size等。
  • 盒模型 相关:bordermarginpaddingwidthheight等。
  • 布局与定位display(如blockinlineflexgrid)、position(如staticrelativeabsolutefixed)、toprightbottomleftz-index等。

四、CSS单位

CSS支持多种单位,包括:

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

五、CSS的编写位置

CSS的编写位置主要有三种:

  1. 行内样式 :直接写在HTML元素的style属性中,只影响当前元素。
  2. 内部样式 :将CSS代码写在HTML文档的<head>部分内的<style>标签中,影响当前页面的所有元素。
  3. 外部样式 :将CSS代码写在单独的.css文件中,然后在HTML文件中通过<link>标签引入,可以跨页面复用样式,实现结构与样式的分离。
相关推荐
代码不停25 分钟前
前端基础知识
javascript·css·html
sleeppingfrog1 小时前
konva实现canvas画图基础版本
前端·javascript·css
Bigger12 小时前
Coco AI 技术演进:Shadcn UI + Tailwind CSS v4.0 深度迁移指南 (踩坑实录)
前端·css·weui
八哥程序员15 小时前
从DOM结构到布局流:display: content的深度解析与实战应用
前端·css
前端达人19 小时前
CSS终于不再是痛点:2026年这7个特性让你删掉一半JavaScript
开发语言·前端·javascript·css·ecmascript
dreams_dream21 小时前
vue2动态更改css属性方法大全
前端·css
洞窝技术21 小时前
从原理到落地:大屏适配适配 + 高并发弹幕的企业级技术手册
前端·css
顾安r21 小时前
12.17 脚本工具 自动化全局跳转
linux·前端·css·golang·html
苏打水com21 小时前
第十七篇:Day49-51 前端工程化进阶——从“手动”到“自动化”(对标职场“提效降本”需求)
前端·javascript·css·vue.js·html
码途潇潇1 天前
数据大屏常用布局-等比缩放布局(Scale Laylout)-使用 CSS Transform Scale 实现等比缩放
前端·css