前端开发 css 这些样式你还熟悉吗，Chrome 是必备技能

css 基础篇（第一篇）

开篇词

在前几篇文章中我们综合的讲解了 html 的基础用法，用两篇文章来综合的阐述了 html 基本用法以及浏览器的相关内容，如果 html 不太熟悉的话，建议好好看看之前的两章内容，在此之后我们要开启新的知识点了，那就是 css ，css 对于整个前端来讲还是相当重要的，所以需要好好的学习和回顾。css 部分 一共分为 7 讲，都是阐述了 css 的基本用法，相对于 html 来说 css 的知识点还是挺多。在 css 熟悉之后，我会单独的加一篇文章来说明下 scss，这个对以后的工作是十分有用的，也是现在工作中要求掌握的东西，基本上在工作中 都是用的 sass / scss，所以需要好好学一学。

css 是干什么

css 可以说是一个美容师，因为 html 知识结构，所以在单纯的结构需要加上衣服（css）去装饰，这就产生了 css，css 一般称之为——层叠样式表，css 最大的贡献就是让 html 从样式中脱离，实现了两者之间的分离，html 专注于结构的呈现，而 css 专注于样式的呈现。

引入 css 的方式

引入 css 样式一般可以分为三种（详细见 图 1）

• 行内式：内联样式表—通过标签里面来设置，一般来讲在这里的样式只能影响到这个文件夹

• 内部样式表：内嵌样式表。一般指得是在 head 中设置 style

• 外部样式表：外联式，真正的样式和结构完全分离

• 
  

css 书写样式

保持一种良好的书写习惯也是十分重要的，在 css 中有以下几种基本需要遵守的书写习惯

• 选择器用户指定 css 样式作用的 html 标签，花括号内是对该对象设置的具体样式

• 属性和属性值以 “ 键值对 ” 形式出现

• 属性是对指定的对象设置的样式属性，例如 字体大小、文本颜色等

• 属性和属性值之间用英文 “ ： ” 隔开

• 多个 “ 键值对 ”之间末尾用英文 “ ； ”进行区分

css 选择器

类选择器

类选择器一般用 “ . ” 一个 点 来选择，标签中使用 class 例如：

<div class="content">我是内容</div>
<style>.content {  color: red;}</style>

这样选择的 div 这个字体就会变成红色 如 图 2 所示

除此之外，在类选择器中 也可以添加空格 然后写多个类，例如：

<div class="content center">我是内容</div>
<style>.content {  color: red;}.center {  // 添加一个 text-align: center 让字体在页面中水平居中  text-align: center;}</style>

如下图 3 所示

id 选择器

除了 class 选择器之外，还有 id 选择器。id 选择器是用 “ # ” 来选择的，在标签中添加 id=“ ”，然后在 style 中用 “ # ”选中 添加样式

<div id="blue">我是内容</div>
<style>#blue{  color: blue;}</style>

如下图 4 所示

注意：id 选择器和类选择器最大的不同就是使用次数上

• 类选择器：表示名字（可以重复调用）

• id 选择器：类似身份证只能单次调用，即使多次调用能生效，但是不建议这么做。

通配符选择器

“ * ” 表示讲页面中所有的选择全部更改，一般在工作中都会使用通配符讲所有的初始化的 margin 和 padding 全部更改为 0 ，为了可以很好的控制。因为刚开始在浏览器上 margin 和 padding 是有值的。可以自己在代码中试试，看看加上这个之后 你的标签会出现那种不同。

 * {  margin：0;  padding: 0}

基础选择器总结

• 标签选择器：可以选出所有相同的标签，例如：p{ }

• 类选择器：可以选出 一个 或 多个标签，例如：class = “ ”

• id 选择器：一次只能选择一个标签，例如： id = “ ”

• 通配符选择器：选择所有的标签，例如：*{ }

css 字体样式学习目标

font 字体学习

• font-size：大小 例如：font-size：20px；

• font-family：字体 例如：font-family：‘微软雅黑’；

• font-weight：字体粗细 例如：font-weight：400；

• font-style：字体风格

• font-style： 让字体倾斜 例如：font-style：italic；

• font-style 让字体不倾斜 例如：font-style：normal；

注意：一般在实际的开发中 会将所有的 body 设置为 16px，如果在 font-family 中设置多个字体的名字 会依次查找，然后依次选择。如果找到一个字体就直接用，后面就不需要查找。如果没找到继续向下找

font 综合写法

font 有一个综合写法

font：font-style font-weight font-size / line-height font-family；

font：字体风格 字体粗细 字体大小 / 行高 设置那类字体；

注意：使用综合写法，必须按照顺序，各个属性用空格隔开，其中不需要设置的可以省略，但必须保留 font-size 和 font-family 属性

css 外观样式

• color：文本颜色——16 进制的需要加 “#”

• 预定义的颜色写法：color：red；

• 等十六进制写法：color：#ffffff；

• RGB 代码：color：rgb（255，255，255）

• line-height：行间距

• 一般情况下：行间距比字号大 7、8 像素属于正常写法：line-height：24px；

• text-align：文本对齐方式

• left：左对齐

• right：右对齐

• center：居中对齐

• text-indent：首行缩进

• text-indent：2em；（一个 em 表示一个字）

• text-decoration：文本的装饰

• text-decoration：取消下划线，定义标准的文本

• text-decoration：underline： 定义文本下的一条线

• text-decoration：overline： 定义文本上的一条线

• text-decoration：line-through：定义穿过文本下的一条线

开发者工具（chrome）

调试工具——Chrome 在前端开发中 Chrome 的调试工具是非常具有调试的价值，可以用它来测试是否对错。所以掌握 Chrome 调试工具也是前端开发必备的技能之一。

好了，css 第一篇就讲完了，有什么不明白的欢迎留言讨论