css基础选择器、字体和文本样式设置、引入css外部文件、使用谷歌工具调试样式

学习笔记

学习来源：黑马程序员p61-92
学习进度：day2

---

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS是什么？

CSS的主要使用场景就是美化页面，布局页面的。

二、CSS基础选择器

1.标签选择器

作用：可以选出所有相同的标签，比如p、div
特点：不能差异化选择
使用情况:较多

p{
  color:red;
  }
div{
  font-size:17px;
  }

2.类选择器

作用：可以选出一个或多个标签
特点：可以根据需求选择
使用情况：非常多
口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用

1.一个类名调用

.red{
  color:red;
  }

<li class = "red"> 我要变成红色</li>

2.多类名调用

.box{
  width:150px;
  height:100px;
  }
.green{
  color:green;
  }
.red{
  color:red
  }

<div class= "box red">我是红色的盒子</div>
<div class="box green">我是绿色的盒子</div>

3.id选择器

作用：一次只能选择1个标签
特点：ID属性只能在每个HTML文档中出现一次
使用情况：一般和js搭配
口诀：样式 # 定义 结构id调用 只能调用一次 被人切勿使用

#change{
  color:pink;
  }

<div id = "change">ichange</div>

4.通配选择器

作用：选择所有的标签
特点：选择的太多，有部分不需要
使用情况：特殊情况使用
实例：

*{
  color：red;
  }

3.设置字体样式

1.font-size（字号）

注意点：通常单位是px，一定要跟上单位

2.font-family（字体）

注意点：字体要用引号，每个字体用逗号分隔开

3.font-weight（字体粗细）

注意点：加粗700/bold，不加粗400/normal，一般使用数字，数字不加单位

4.font-style（字体样式）

注意点：倾斜italic，不倾斜normal，工作中常用normal

5.font

注意点：字体连写是有顺序的，不能随意切换位置，字号和字体必须同时出现，即可以没有字体粗细和字体样式，但一定要有字号和字体

body{
  font: font-style  font-weight  font-size/line-height  font-family;
  }
body{
  font:font-size/line-height  font-family;
  }

4.设置文本样式

1.color（文本颜色）

2.text-align（文本对齐）

有center、left、right三个属性

3.text-indent（文本缩进）

p{
  text-indent:2em;

4.text-decoration（文本修饰）

添加下划线underline
取消下划线none
添加上划线overline（几乎不用）
删除线line-through（不常用）

5.line-height（行高）

单位px

5.CSS 的三种引入方式

行内样式表、内部样式表、外部样式表

1.外部样式表

在HTML页面中，使用标签引入这个文件

<link rel="stylesheet"  href="css文件路径">

6.使用Chrome调试工具调试样式

F12 或 右击空白处选择检查

---

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了css基础选择器、如何设置字体样式和文本样式、如何引入外部css文件和如何使用谷歌工具调试样式