网站基础：CSS基础介绍

作者: 字符空间 发布时间: 2025-11-03 阅读: 17

一、CSS简介

CSS（Cascading Style Sheets）即层叠样式表，是用来描述HTML文档样式的语言。

CSS的主要作用：

  • 控制网页的布局和外观
  • 实现内容与表现的分离
  • 提高代码的可维护性
  • 实现响应式设计

CSS发展历程：

  • CSS1 - 1996年发布，基础样式功能
  • CSS2 - 1998年发布，增加定位等功能
  • CSS3 - 模块化发布，增加动画、渐变等高级特性

二、CSS基本语法

1. CSS规则集结构

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

示例：

p {
    color: red;
    font-size: 16px;
    margin: 10px;
}

语法说明：

  • 选择器 - 指定要样式化的HTML元素
  • 声明块 - 包含在一对大括号中
  • 声明 - 属性与值的组合
  • 属性 - 要设置的样式属性
  • 值 - 属性的具体设置

三、CSS引入方式

1. 行内样式

直接在HTML标签的style属性中编写样式

<p style="color: blue; font-size: 14px;">这是一个段落</p>

2. 内部样式表

在HTML文档的<head>部分使用<style>标签

<style>
    p {
        color: green;
        margin: 10px;
    }
</style>

3. 外部样式表

使用单独的.css文件，通过<link>标签引入

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

4. 导入样式

在CSS文件中使用@import导入其他CSS文件

@import url("other-styles.css");

四、CSS选择器

1. 基础选择器

选择器类型语法描述示例
元素选择器元素名选择指定HTML元素p { color: red; }
类选择器.类名选择具有指定class的元素.text { font-size: 16px; }
ID选择器#id名选择具有指定id的元素#header { background: blue; }
通用选择器*选择所有元素* { margin: 0; padding: 0; }

2. 组合选择器

选择器类型语法描述示例
后代选择器选择器1 选择器2选择选择器1内的所有选择器2div p { color: red; }
子选择器选择器1 > 选择器2选择作为选择器1直接子元素的选择器2ul > li { list-style: none; }
相邻兄弟选择器选择器1 + 选择器2选择紧接在选择器1后的选择器2h1 + p { margin-top: 0; }
通用兄弟选择器选择器1 ~ 选择器2选择在选择器1后面的所有选择器2h1 ~ p { color: blue; }

3. 属性选择器

选择器描述示例
[attribute]选择带有指定属性的元素[target] { background: yellow; }
[attribute=value]选择属性值等于value的元素[type="text"] { border: 1px solid; }
[attribute^=value]选择属性值以value开头的元素[href^="https"] { color: green; }
[attribute$=value]选择属性值以value结尾的元素[src$=".jpg"] { border: 2px solid; }

4. 伪类选择器

伪类描述示例
:hover鼠标悬停时的样式a:hover { color: red; }
:focus元素获得焦点时的样式input:focus { border-color: blue; }
:first-child选择作为其父元素的第一个子元素li:first-child { font-weight: bold; }
:nth-child(n)选择作为其父元素的第n个子元素tr:nth-child(odd) { background: #f2f2f2; }

五、CSS常用属性

1. 文本属性

属性描述常用值
color文本颜色red, #ff0000, rgb(255,0,0)
font-size字体大小16px, 1em, 100%
font-family字体族Arial, "Microsoft YaHei"
text-align文本对齐left, center, right, justify
line-height行高1.5, 24px, 150%

2. 盒模型属性

属性描述示例
width / height宽度 / 高度width: 200px; height: 100px;
margin外边距margin: 10px 5px;
padding内边距padding: 15px;
border边框border: 1px solid #000;
box-sizing盒模型计算方式box-sizing: border-box;

3. 背景属性

属性描述示例
background-color背景颜色background-color: #f0f0f0;
background-image背景图片background-image: url("bg.jpg");
background-repeat背景重复background-repeat: no-repeat;
background-position背景位置background-position: center top;

六、CSS盒模型

盒模型组成：

  • 内容区域（Content） - 包含实际内容
  • 内边距（Padding） - 内容与边框之间的空间
  • 边框（Border） - 围绕内边距和内容的边框
  • 外边距（Margin） - 边框外的透明区域

两种盒模型：

  • 标准盒模型（content-box）
    元素宽度 = width + padding + border
           
  • IE盒模型（border-box）
    元素宽度 = width（包含padding和border）
           

七、CSS布局

1. 显示类型（display）

值描述特点
block块级元素独占一行，可设置宽高
inline行内元素不独占一行，不可设置宽高
inline-block行内块元素不独占一行，可设置宽高
none隐藏元素元素不显示，不占空间

2. 定位（position）

值描述示例
static默认定位元素正常流排列
relative相对定位相对于自身原位置定位
absolute绝对定位相对于最近定位祖先元素定位
fixed固定定位相对于浏览器窗口定位
sticky粘性定位在特定阈值时变为固定定位

3. 浮动（float）

img {
    float: left;
    margin-right: 10px;
}

4. 弹性布局（Flexbox）

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

八、CSS单位

常用单位：

单位类型描述示例
px绝对单位像素font-size: 16px;
%相对单位百分比width: 50%;
em相对单位相对于父元素字体大小margin: 2em;
rem相对单位相对于根元素字体大小font-size: 1.5rem;
vw / vh相对单位视口宽度/高度的1%width: 50vw;

九、CSS实战示例

完整CSS样式表示例：

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面主体样式 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

/* 头部样式 */
.header {
    background: #35424a;
    color: white;
    padding: 20px 0;
    text-align: center;
}

/* 导航菜单样式 */
.nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
}

.nav-menu a:hover {
    background: #e8491d;
    border-radius: 3px;
}

/* 主要内容区域 */
.main-content {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #35424a;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    background: #e8491d;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        gap: 10px;
    }
    
    .main-content {
        margin: 10px;
        padding: 15px;
    }
}

十、CSS调试技巧

常用调试方法：

  • 使用浏览器开发者工具（F12）
  • 临时添加边框检查元素边界：border: 1px solid red;
  • 使用背景色检查元素区域：background-color: rgba(255,0,0,0.1);
  • 检查CSS特异性（Specificity）
  • 验证CSS语法正确性

十一、CSS最佳实践

编码规范：

  • 使用外部样式表
  • 合理组织CSS代码结构
  • 使用有意义的类名
  • 避免使用!important
  • 使用CSS预处理器（Sass/Less）

性能优化：

  • 减少CSS文件大小
  • 使用CSS雪碧图
  • 避免过度嵌套
  • 使用transform和opacity实现动画

十二、学习资源推荐

在线教程：

  • MDN Web Docs - 最权威的Web技术文档
  • W3School - 适合初学者的教程
  • CSS-Tricks - 高级技巧和教程
  • 菜鸟教程 - 中文教程，适合入门

练习平台：

  • CodePen - 在线代码编辑和分享
  • JSFiddle - 前端代码测试平台
  • CSS Battle - CSS编码游戏

十三、总结

CSS学习要点：

  • 掌握选择器的使用方法
  • 理解盒模型和布局原理
  • 熟悉常用属性的使用
  • 学会响应式设计
  • 掌握调试和优化技巧

进阶方向：

  • CSS预处理器（Sass、Less）
  • CSS框架（Bootstrap、Tailwind CSS）
  • CSS动画和过渡
  • CSS架构方法论（BEM、OOCSS）

CSS是网页设计的核心技能，通过不断实践和探索，你将能够创建出美观、专业的网页界面。

❤️收藏 👍点赞

用户评论

发表评论

您还未登录，无法发表评论！
快来留下你的足迹吧~