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>标签引入,可以跨页面复用样式,实现结构与样式的分离。
相关推荐
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html
engchina12 小时前
使用 Vite + React 19 集成 Tailwind CSS 与 shadcn/ui 组件库完整指南
css·react.js·ui·vite·tailwind·react 19·shadcn
Json____18 小时前
使用html css js 来实现一个服装行业的企业站源码-静态网站模板
javascript·css·html·静态网站·企业站·服装行业
冬天爱吃冰淇淋18 小时前
基于css实现正六边形的三种方案
前端·css
ILL11IIL21 小时前
Web第三次作业
前端·javascript·css·html
码上暴富2 天前
css里flex+margin布局
前端·css
qq_400552002 天前
新的面试题CSS
前端·css
naodianbozzz2 天前
web第三次作业
前端·javascript·css