CSS基础 - 技术栈

一、CSS简介

二、CSS基本语法

三、CSS选择器

四、CSS样式属性

五、盒子模型

六、浮动布局

七、总结

本文将为大家介绍CSS（层叠样式表）的基础知识，帮助初学者快速上手网页样式设计。通过本文的学习，你将掌握选择器、样式属性、盒子模型、浮动布局等核心概念，为成为一名优秀的网页设计师奠定基础。

一、CSS简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档样式的样式表语言。它允许开发者将文档的内容与表现形式分离，提高网页的可维护性和可复用性。

二、CSS基本语法

CSS规则由选择器和一组或多组样式声明组成。基本语法如下：

css 复制代码

选择器 {
    属性1: 值1;
    属性2: 值2;
    /* 更多样式属性 */
}

三、CSS选择器

标签选择器：根据HTML标签名称进行选择。

css 复制代码

p {
    color: red;
}

类选择器：以点（.）开头，根据HTML元素的class属性值进行选择。

css 复制代码

.text {
    font-size: 16px;
}

ID选择器：以井号（#）开头，根据HTML元素的id属性值进行选择。

css 复制代码

#title {
    font-weight: bold;
}

属性选择器：根据HTML元素的属性及其值进行选择。

css 复制代码

input[type="text"] {
    border: 1px solid #ccc;
}

伪类选择器：用于选择特定状态的元素。

css 复制代码

a:hover {
    color: blue;
}

四、CSS样式属性

字体属性：包括font-family、font-size、font-weight等。

css 复制代码

p {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

文本属性：包括color、text-align、line-height等。

css 复制代码

h1 {
    color: #333;
    text-align: center;
    line-height: 1.5;
}

背景、边框和边距：包括background、border、margin等。

css 复制代码

.box {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    margin: 10px;
}

五、盒子模型

盒子模型是CSS布局的基础，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。

css 复制代码

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    margin: 20px;
}

六、浮动布局

浮动布局是一种常见的布局方式，通过设置元素的float属性实现。

css 复制代码

.left {
    float: left;
    width: 200px;
    height: 100px;
    background-color: #f00;
}

.right {
    float: right;
    width: 200px;
    height: 100px;
    background-color: #0f0;
}

七、总结

本文介绍了CSS的基础知识，包括选择器、样式属性、盒子模型和浮动布局等。掌握这些知识，将为您的网页设计之路奠定坚实基础。当然，CSS还有很多高级技巧和布局方法，需要不断学习和实践。