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>标签引入,可以跨页面复用样式,实现结构与样式的分离。
相关推荐
心中无石马1 小时前
uniapp引入tailwindcss4.x
前端·css·uni-app
用户059540174465 小时前
asyncio 踩坑实录:这个问题坑了我3小时,差点让线上服务崩掉
前端·css
凯瑟琳.奥古斯特7 小时前
Bootstrap快速上手指南
开发语言·前端·css·bootstrap·html
ZC跨境爬虫7 小时前
跟着 MDN 学 HTML day_2:(表单分组与高级输入控件实战)
前端·javascript·css·ui·html
FlyWIHTSKY9 小时前
Vue 3 + 原生 CSS Float
前端·css·vue.js
ZC跨境爬虫10 小时前
跟着 MDN 学 HTML day_1:(全套原生Input+表单结构拆解)
前端·css·ui·html
ZC跨境爬虫10 小时前
Apple官网复刻第二阶段day_6:(统一页脚模块封装+CSS公共复用体系落地)
前端·css·ui·重构·html
琹箐11 小时前
今天吃什么干什么随机生成
javascript·css·css3
yqcoder11 小时前
CSS 布局双雄:浮动 (Float) vs 绝对定位 (Absolute) 深度解析
前端·css
ZC跨境爬虫11 小时前
跟着 MDN 学 HTML day_3:(表单CSS美化实战与盒子模型三大核心属性详解)
前端·javascript·css·html