Web前端|CSS入门教程（超详细的CSS使用讲解，适合前端初学者）

上篇文章说了HTML，今天再来说一说CSS，所谓CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。

什么是CSS？

Cascading Style Sheet

层叠样式表语言（不是编程语言，属于样式表语言，没有变量、数据类型、控制语句...）

CSS其实是专门用来修饰HTML的，让HTML更好看。

CSS是HTML的化妆品。

CSS是为HTML服务的，所以HTML还是主体，CSS是依附在HTML上的，

所以进行CSS的开发，我们还是需要新建html/htm文件。

在HTML中怎么嵌入CSS样式呢？

• 第一种方式：内联定义
• 第二种方式：定义内部样式块对象
• 第三种方式：链入外部样式表文件（这种方式最常用！）

如果想深入学习CSS，我建议初学者可以采用是视频观看的方式，更通俗易懂

关于选择器的优先级：

• 标签选择器优先级最低。
• 其次是类选择器。
• 最高优先级是id选择器。
• CSS设置背景(background)
• 背景颜色 background-color
• 背景图片 background-image
• 背景重复 background-repeat:repeat-x/repeat-y
• 背景位置 background-position:bottom/left/top/right/center
• 背景关联 background-attachment:fixed/scroll

综合写法：

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS设置文本格式

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

文本缩进 ：Text-indent:2em

文本对齐方式：Text-align:left/right/center/ justify

文本修饰：

Text-decoration:underline/line-through/overline/none

字符间距：Word-spacing:px/em 英文单词之间的间隔；

Letter-spacing:px/em汉字和英文字母之间的间隔；

文本转换：

Text-transform:uppercase/lowercase/ capitalize

行与行间距：Line-height:px/%

垂直对齐图像： vertical-align：text-top/text-bottom

文本阴影：text-shadow:水平偏移，垂直偏移 颜色

课程目录

001.CSS教程-CSS概述

002.CSS教程-HTML引入CSS样式的三种方式概述1

003.CSS教程-HTML引入CSS样式的三种方式概述2

004.CSS教程-HTML引入CSS样式的第一种方式内联方式

005.CSS教程-HTML引入CSS样式的第二种方式样式块

006.CSS教程-id选择器标签选择器和类选择器

007.CSS教程-HTML引入CSS样式的第三种方式引入外部独立css文件

008.CSS教程-列表样式

009.CSS教程-绝对定位