CSS小白手册

最新推荐文章于 2024-06-20 20:19:27 发布

查布嘎ghw

最新推荐文章于 2024-06-20 20:19:27 发布

阅读量112

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/ghw666666666/article/details/132491712

版权

1. 什么是CSS？

CSS代表层叠样式表（Cascading Style Sheets），它用于定义网页的外观和样式。CSS允许您控制字体、颜色、间距、边框等页面元素的外观，以及布局和排列方式。

2. 基本语法：

CSS规则由选择器、属性和值组成，如下所示：

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

3. 选择器：

元素选择器： 选择所有特定类型的元素，例如 p 选择所有段落元素。
类选择器： 使用.符号，选择具有相同类名的元素，例如 .highlight。
ID选择器： 使用#符号，选择具有唯一ID的元素，例如 #header。
组合选择器： 可以将多个选择器组合在一起，例如 h1, h2 选择所有<h1>和<h2>元素。

4. 常见属性：

color： 设置文本颜色。
font-family： 设置字体。
font-size： 设置字体大小。
background-color： 设置背景颜色。
margin： 设置外边距。
padding： 设置内边距。
border： 设置边框。
width 和 height： 设置元素的宽度和高度。

5. 值的单位：

px： 像素。
em： 相对于父元素字体大小的倍数。
rem： 相对于根元素（<html>）字体大小的倍数。
%：相对于父元素的百分比。

6. 层叠性（Cascading）：

如果多个样式规则适用于相同的元素，CSS会使用层叠规则来确定哪个样式将被应用。这些规则按重要性、特殊性和源代码顺序排序。

7. 外部样式表：

将CSS规则保存在单独的.css文件中，然后通过<link>元素将其链接到HTML文档，以实现样式的重用和维护。

8. 内部样式表：

在HTML文档的<head>部分使用<style>元素来定义CSS规则，适用于单个页面。

9. 内联样式：

使用style属性直接在HTML元素上定义样式，适用于个别元素。

10. 盒模型：

每个HTML元素被视为一个矩形盒子，它具有内容、内边距、边框和外边距。CSS可以用来控制这些属性，以实现布局。

11. CSS框架：

有许多CSS框架（如Bootstrap、Foundation等）可以加速网页开发，提供可重用的样式和组件。

12. 属性

文本属性：

text-align：设置文本对齐方式。
text-decoration：设置文本装饰，如下划线、删除线等。
text-transform：控制文本的大小写转换。
line-height：设置行高，控制行与行之间的间距。
letter-spacing：设置字符间距。

盒模型属性：

margin：设置外边距。
padding：设置内边距。
border：设置边框。
width：设置元素宽度。
height：设置元素高度。
box-sizing：控制盒模型的计算方式。

背景属性：

background-color：设置背景颜色。
background-image：设置背景图片。
background-size：设置背景图片尺寸。
background-position：设置背景图片位置。

定位和布局属性：

position：设置元素的定位方式（static、relative、absolute、fixed等）。
top、right、`