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

一、CSS是什么？

css的全称是 Cascading Style Sheets 用来定义页面元素的样式。

1.可以进行的操作有：

(1)设置字体和颜色

(2)设置位置和大小

(3)添加动画效果

2.基本组成

css基组成.jpg

(1)选择器:

·作用是找出页面中的元素，以便给它们设置样式，使用多种方法选择元素

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

选择器分为：

* 是通配选择器，可以匹配任意的元素
标签选择器
id选择器
类选择器
属性选择器: [class^="x"] 以x开头的属性; [class$="x"]以x结尾的属性
伪类选择器:不基于标签和属性定位元素。有两种：(1)状态伪类(2)结构性伪类

组合
名称	语法	说明	示例
直接组合	AB	满足A的同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

若多个选择器共用某些CSS属性采用，方式隔开选择器，形成选择器组

body,h1,h2,h3,h4 { margin:0; padding:0; }

(2)颜色

颜色是以红绿蓝为原色来进行混合得到其他颜色

有两种格式：

#000000或者rgb(0,0,0)

#000000格式下前两位表示红色，中间两位表示绿色，最后两位表示蓝色，范围为#000000~#ffffff

rgb(0,0,0)格式下第一位表示红色，中间表示绿色，最后表示蓝色 rgba(0,0,0,0)其中的a表示的是alpha透明度范围为0~1

(3)字体

设置字体用font-family进行设置，使用建议：

字体列表最后写上通用字体族
英文字体放在中文字体前面

设置字体大小用font-size:

关键字：small、medium、large
长度：px、em
百分数：相对于父元素字体的大小

(4)行间距

当字体大小固定，多余出来的行间距大小会平均分配到字体的上下边。

字体的属性都可以写font中： font:style weight size/height family

(5)text-align

它有三个值 text-align:right/ text-align:center/ text-align:left

想要让字体水平居中可以使用text-align:center

二、在页面中使用CSS

在页面中使用CSS有三种使用方法

1.外部链接(推荐使用):

外部链接在CSS属性较多时使用比较合适 <link rel="stylesheet" href="/assets/style.css">

2.嵌入:

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

3.内联:

内联只适用于CSS属性很少时，若属性较多使用内联，会让页面看起来非常冗余。 <p style="margin:lem 0">Example Content </p>

三、CSS是如何工作的

1.基础的工作过程

四、调试CSS

右键点击页面，选择检查
使用快捷键
- Ctrl+Shift+I （window）
- Cmd+Opt+I（Mac）

理解CSS基础 | 青训营笔记