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

Cascading Style Sheets (CSS)

用来定义页面元素的样式（字体，颜色，位置，大小，动画效果）

一条规则

CSS-一条规则.jpg

选择器的使用

按照标签名，类名或者id
按照属性
按照DOM树中的位置

通配选择器——“*”

CSS-通配选择器.jpg

id选择器（id唯一）

CSS-ID选择器.jpg

类选择器（同一类型（class））

CSS-类选择器.jpg

属性选择器

CSS-属性选择器.jpg

如果想选择特定的值

CSS-属性选择器选择特定的值.jpg

选择器组

CSS-选择器组.jpg

伪类（不使用标签和属性定位元素）

  状态伪类
  结构性伪类

三种添加CSS的方式

外部样式表

css保存在.css文件中

在HTML里使用<link>引用

 在文件夹里新建一个文件夹叫css，在css文件中新建一个文件夹来放css

导入css文件：在<title>上面使用<link>导入

eg：<link rel="stylesheet" href="style.css"（css所在的文件位置）>

内部样式表

不使用外部CSS文件

将CSS放在HTML<style>里    

<style>放在<head>里

内联样式

仅影响一个元素

在HTML元素的style属性中添加

直接在<body>中添加style

CSS-三种方式.jpg

推荐使用第一个

CSS是怎样工作的

CSS工作.jpg （单独解析）

组合（这里不太懂啊）

直接组合
其他组合

CSS-组合.jpg

CSS中的颜色

1,、关键词：black,silver,white

2、RGB：rgb（255,0,0）（红，绿，蓝）

  数字是从0-255

3、RGBA：rgb（255,0,0，0.5）

4、十六进制：#ff0000

5、HSL（色相，饱和度，亮度）：hsl（0,100%，50%）

（H：0-360，S：0-100%，L：0-100%）

6、HSLA（A透明度,从0-1）

CSS中的字体

使用font-family来改变字体样式

例如：font-family:Arial,Helvetica,sans-serif;

使用font-size来改变字体大小

重点：font-weight:800（100-900）

斜体：font-style:italic;

下划线：text-decoration:underline;

大小写：text-transform:uppercase;

字母间距：letter-spacing:l1em;

词间距：word-spacing:2em；

行间距：line-height:2em;

（多个字体，英文字体放在前面）**

CSS-字体-Web Fonts.jpg

总结

25号录播，笔记记录一半
记得详细点，未来自己也能看懂……

CSS | 青训营笔记