理解CSS ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第1天，初步了解CSS，CSS的定义，CSS的用法

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

CSS的定义

全称为层叠样式表（Cascading Style Sheets，缩写为 CSS ），是一种样式表语言，用于描述 HTML 或 XML 文档的呈现。

设置字体和颜色
设置位置和大小
添加动画效果

CSS示例

h1{
    color:red;
    background-color:lightblue;
    text-align: center;
}

CSS规则 = 选择器 + 声明块

选择器---选中元素

通配选择器---*{}
标签选择器---p{}
ID选择器：选中的是对应id值的元素---#id{}
类选择器：选中的是对应的class值的元素---.lei{}
属性选择器---a[href^="example"] {}

优先级从高到低的排序为：ID选择器>类选择器>标签选择器>通配选择器>属性选择器

选择器的组合

声名块---大括号包围

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。

CSS代码书写的位置

内联---直接书写在元素的style属性中(不推荐)

<p style="margin: 1em 0">Example Content</p>

嵌入---书写在style元素中

<style> 
  p { 
    font-size:25px; 
    color: red;
  } 
</style>

外链---将样式书写到独立的css文件中（推荐）

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

好处：

外部样式可以解决多页面样式重复的问题

有利于浏览器缓存，从而提高页面响应速度

有利于代码分离（HTML和CSS），更容易阅读和维护

常见样式声名

1.color

元素内部的文字颜色

关键字表示法：red等

RGB表示法：rgb(0, 0, 0),#000000黑色

HSL表示法：hsl(200,30%,50%)色相、饱和度、亮度

2.background-color

元素背景颜色

3.font-size

元素内部文字的尺寸大小

px：像素，绝对单位
em：相对单位，相对于父元素的字体大小

4.font-weight

文字粗细程度，可以取值数字，可以取值为预设值

strong，默认加粗

5.font-family

文字类型

使用多个字体，以匹配不同环境

6.font-style

字体样式，通常用它设置斜体

i元素，em元素，默认样式，是倾斜字体

7.text-decoration

文本修饰，给文本加线

a元素

del元素：错误的内容

s元素：过期的内容

8.text-indent

首行文本缩进

9.line-height

每行文本的高度

10.width

宽度

11.height

高度

12.letter-space

文字间隙

13.text-align

元素内部文字的水平排列方式 left、right、center、justify

总结

CSS是一种功能很强的语言，没有CSS我们的网页就黯然失色，本次了解了CSS的基础部分，，初步学习了CSS的用法。

理解CSS ｜ 青训营笔记