共计 4184 个字符，预计需要花费 11 分钟才能阅读完成。
目录
一、基本语法
1. 行内样式表
2. 内嵌样式表
3. 外部样式表
二、选择器
1. 标签选择器
2. 类选择器
3.id 选择器
4. 通配选择器
三、常见修饰
1. 文本
2. 背景
3. 列表
4. 伪类
5. 透明度
6. 块级、行级、行级块标签
7.div 和 span
四、盒子模型（重点）
1. 内容区
2. 内边距
3. 边框
4. 外边距
CSS 是 Cascading Style Sheets（级联样式表）。
CSS 是一种样式表语言，用于为 HTML 文档控制外观，定义布局。例如，
CSS 涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。可将页面的内容与表现形式分离，页面内容存放在 HTML 文档中，而用于定义表现形式的 CSS 在一个.css 文件中或 HTML 文档的某一部分。
一、基本语法
1. 行内样式表
行内样式表, 又有人称内联样式、行间样式、内嵌样式。是通过标签的 style 属性来设置元素
样式，其基本语法格式如下：
内容 标签名>
我是一个段落
效果如下：
2. 内嵌样式表
内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义
我是一个段落
其效果同上，这里需要注意：中的
标签修饰对
内所有
标签内容都有效
3. 外部样式表
外部样式表是将所有的样式放在一个或多个以.CSS 为扩展名的外部样式表文件中，通过 link 标签 将外部样式表文件链接到 HTML 文档中
（其中，href 中填写引入的样式文件）
二、选择器
要使用 CSS 对 HTML 页面中的标签实现一对一，一对多的控制，这就需要用到 CSS 选择器。
1. 标签选择器
语法：标签名 {} 通过标签选择器可以选择页面中的所有指定标签
2. 类选择器
语法：.class 属性值 {} 通过标签的 class 属性值选中一组标签
我是一个段落
我也是一个段落
3.id 选择器
语法：#id 属性值 {} 通过标签的 id属性值选中唯一的一个标签
我是一个段落
我也是一个段落
4. 通配选择器
语法：*{} 可以用来选中页面中的所有的标签
我是一个段落
我也是一个段落
三、常见修饰
接下来介绍的是一些网页设计中非常基础的修饰语法，这里就不过多做代码演示，感兴趣可以自行操作。（以下操作都是在
1. 文本
●
color
：字体颜色●
font-size
：字体大小●
font-family
：字体●
text-align
：文本对齐●
text-decoration:line-through
：定义穿过文本下的一条线●
text-decoration:underline
：定义文本下的一条线●
text-decoration:none
：定义标准的文本●
font-style: italic;
斜体文本●
font-weight:
字体粗细●
line-height:
设置行高●
letter-spacing
可以指定字符间距●
text-indent
用来设置首行缩进
2. 背景
●
background-color
背景颜色●
background-image
背景图片●
background-repeat
背景重复●
background-size
背景尺寸●
background- position
背景位置
3. 列表
●
CSS
列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。●
list-style-image 将图象设置为列表项标志。●
list-style-position
设置列表中列表项标志的位置。●
list-style-type
设置列表项标志的类型。●
list-style
简写属性。
4. 伪类
CSS 伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。
语法样式：
:hover 伪类表示鼠标移入的状态
:active 表示的是被点击的状态
:focus 向拥有键盘输入焦点的标签添加样式。
这里我们做一个简单的演示：
我是一个段落
当鼠标没接触到
标签时：鼠标移入时：
5. 透明度
opacity 属性设置标签的不透明级别 值为 1。
规定不透明度：从 0.0（完全透明）到 1.0（完全不透明）。
语法：opacity：; 冒号后面填写 0 - 1 之间的数字即可
6. 块级、行级、行级块标签
● 什么是块级标签？
块级标签：无论内容多少 都会独自占据一行的。
例如
、
、
、
、
等。
● 什么是行级标签？
行级标签：只占自身大小的标签，不会占一行。
例如 、、、 等。
● 什么是行级块标签？
例如 ![]()
等
那么我们能否对不同级别标签进行转换呢？答案是肯定的！
通过 display 样式可以修改标签的类型。
可选值：
block：设置标签为块标签
inline：设置标签为行级标签
inline-block：设置标签为行级块标签
none：隐藏标签（标签将在页面中完全消失）
我是一个段落
没进行 display 修改前：（可以清晰的观察到，独占一行）
![]()
进行修饰后：（只占自身大小）
![]()
7.div 和 span
div
标签：
div 是块级标签，可以放置任何标签。
div 没有任何附加功能，给了什么属性就能变成什么样。
div 主要的作用是被用来布局网页。
span
标签：
span 是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span 标签被用来选中文档中的文字。
四、盒子模型（重点）
CSS 处理网页时，它认为每个标签都包含在一 个不可见的盒子里。
如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
其基本样式如图：
![]()
![]()
1. 内容区
●
内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标
签都是存在于内容区中的。
●
通过
width
和
height
两个属性可以设置内容区的大小而不是整个盒子的大
小。
●
如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一
致的。
●
width
和
height
属性适用于块标签。
这一是个普通的盒子内容区大小：
![]()
你们好
我们可以看到，通过对盒子 width 和 height 属性的修改，改变了盒子内容区大小（蓝色区域），而非整个盒子大小：
![]()
2. 内边距
通过 padding 属性进行操作，设置标签的内边距
●
内边距指的就是标签内容区与边框以内的空间。
●
内边距会影响整个盒子的大小。
padding-left:10px; 有
10 个像素的 左边距
padding-right:10px; 有 10 个像素的右边距
padding:10px 20px 30px 40px 上、右、下、左四个方向分别有 10、20、30、40 个像素的边距
你们好
![]()
3. 边框
可以在标签周围创建边框，边框是标签可见框的最外部。
格式：border:1px red solid;（分别指边框的宽度、颜色、样式）
也可以使用
border-top/left/right/bottom
分别指定上左右下四个方向的边框。
（1）边框样式
dotted（点线）dashed（虚线）solid（实线）double（双线）groove（槽线）
（2）边框圆角
border-radius：5px 设置四个角为圆角边框（px 大小可自拟）
border-top-left-radius 设置左上为圆角边框
4. 外边距
外边距是标签边框与周围标签相距的空间。使用 margin 属性可以设置外边距。用法和 padding
类似，同样也提供了四个方向的。
margin-top/right/bottom/left（上、右、下、左）
margin 的值可以为负值。
margin 的值还可以 auto（自动），设置外边距为最大值，当将左右外边距设置为 auto 时，浏览器会将左右外边距设置为相等.
垂直设置为 auto 时值为 0，所以水平居中也可以简写为 margin:0 auto。
你们好
如图，盒子被居中放置：
![]()
注：浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设
置了一些默认的 margin 和 padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。如下操作：
*{
margin: 0;
padding: 0;
}
以上就是 web 前端有关 css 样式表语言的内容了，通过这篇文章，相信一些前端小白就已经可以自行编写一些小网页了！当然，最后的盒子模型部分还牵扯到了一些有关文档流，以及解决多个盒子排列时引发的一些异常情况要用到的定位方法，由于篇幅原因，这里不过多赘述。详情请移步至我的下一篇博客，会对此部分内容进行详细说明！
等。
● 什么是行级标签？
行级标签：只占自身大小的标签，不会占一行。
例如 、、、 等。
● 什么是行级块标签？
例如 等
那么我们能否对不同级别标签进行转换呢？答案是肯定的！
通过 display 样式可以修改标签的类型。
可选值：
block：设置标签为块标签
inline：设置标签为行级标签
inline-block：设置标签为行级块标签
none：隐藏标签（标签将在页面中完全消失）
我是一个段落
没进行 display 修改前：（可以清晰的观察到，独占一行）
进行修饰后：（只占自身大小）
7.div 和 span
div
标签：div 是块级标签，可以放置任何标签。
div 没有任何附加功能，给了什么属性就能变成什么样。
div 主要的作用是被用来布局网页。
span
标签：span 是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span 标签被用来选中文档中的文字。
四、盒子模型（重点）
CSS 处理网页时，它认为每个标签都包含在一 个不可见的盒子里。
如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
其基本样式如图：
1. 内容区
●
内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。
●
通过
width
和
height
两个属性可以设置内容区的大小而不是整个盒子的大小。
●
如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一致的。
●
width
和
height
属性适用于块标签。
这一是个普通的盒子内容区大小：
你们好
我们可以看到，通过对盒子 width 和 height 属性的修改，改变了盒子内容区大小（蓝色区域），而非整个盒子大小：
2. 内边距
通过 padding 属性进行操作，设置标签的内边距
●
内边距指的就是标签内容区与边框以内的空间。●
内边距会影响整个盒子的大小。padding-left:10px; 有
10 个像素的 左边距padding-right:10px; 有 10 个像素的右边距
padding:10px 20px 30px 40px 上、右、下、左四个方向分别有 10、20、30、40 个像素的边距
你们好
3. 边框
可以在标签周围创建边框，边框是标签可见框的最外部。
格式：border:1px red solid;（分别指边框的宽度、颜色、样式）
也可以使用
border-top/left/right/bottom
分别指定上左右下四个方向的边框。
（1）边框样式
dotted（点线）dashed（虚线）solid（实线）double（双线）groove（槽线）
（2）边框圆角
border-radius：5px 设置四个角为圆角边框（px 大小可自拟）
border-top-left-radius 设置左上为圆角边框
4. 外边距
外边距是标签边框与周围标签相距的空间。使用 margin 属性可以设置外边距。用法和 padding
类似，同样也提供了四个方向的。
margin-top/right/bottom/left（上、右、下、左）
margin 的值可以为负值。
margin 的值还可以 auto（自动），设置外边距为最大值，当将左右外边距设置为 auto 时，浏览器会将左右外边距设置为相等.
垂直设置为 auto 时值为 0，所以水平居中也可以简写为 margin:0 auto。
你们好
如图，盒子被居中放置：
注：浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设
置了一些默认的 margin 和 padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。如下操作：
*{
margin: 0;
padding: 0;
}
以上就是 web 前端有关 css 样式表语言的内容了，通过这篇文章，相信一些前端小白就已经可以自行编写一些小网页了！当然，最后的盒子模型部分还牵扯到了一些有关文档流，以及解决多个盒子排列时引发的一些异常情况要用到的定位方法，由于篇幅原因，这里不过多赘述。详情请移步至我的下一篇博客，会对此部分内容进行详细说明！
原文地址: web 前端——css（一篇教会网页制作）
