这是我参与「第四届青训营」笔记创作活动的的第2天

一、首先CSS是什么

前面第一天讲到html全称为超文本标记语言，是一种标记语言.

1.今天我学习到CSS

• 英文全称Cascading Style Sheets
• ----------层叠------   样式   表
• 用来定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

1.1 css的作用

• html：搭建网页的结构，承载页面的数据
• css:美化页面，修饰标签 (亚洲4大邪术)

1.2 css和html属性的使用原则

• html的属性只对当前标签有效，没有可重用性，导致没有可维护性
• css 具备一定的代码重用性，提高了可维护性
• 但是css没有把重用性做到极致。使用scss可以做到极致
• W3C建议使用css替代html属性，如果css无法替代的属性，就使用html属性就可以了

1.3 以下是css语法的样例

h1{
    color: white;
    font-size: 14px;
}

2.页面中使用css的三种方法

• 1.外链式 在html文件中，使用link标签引入CSS文件

<link rel="stylesheet" href="/assets/style.css">

• 2.嵌入式 在html文件中，使用style标签直接包裹CSS代码

<style>  li { margin: 0; list-style: none; }  p { margin: 1em 0; } </style>

• 3.内联式在html文件中，通过标签的style属性使用CSS代码

2.1 让我们看看效果吧！！

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

二、深入了解下选择器

选择器Selector

• 找出页面中的元素,以便给它们设置样式
• 使用多种方式选择元素
  • 按照标签名，类名或id
  • 按照属性
  • 按照DOM树种的位置

5种一些基本选择器

• 1. 统配选择器 - *

会选中文件中所有元素

• 2. 标签选择器 - <标签名>

会选择文件中所有是该标签的元素

• 3. id选择器 - #+id

会选择文件中id属性为该id名的所有元素

通常id应该保持唯一性

• 4. 类选择器 - .+类名

会选择文件中class属性为该类名的所有元素

HTML文件中每个标签的class属性可以设置多个类名（用空格间隔），只要包含该类名，都会被选择

• 5. 属性选择器 - [属性值] 标签名[属性名="属性值"]

选择属性值、标签名相符的所有元素

属性值可以用匹配的方式去确定