CSS的了解 ｜ 青训营笔记

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

一、CSS 简介

CSS(Cascading Style Sheets),层叠样式表,
主要设置字体、颜色、位置、大小、动画效果。
在页面中使用css的方式有： 1、外链（推荐） 2、嵌入 3、内联

二、CSS 选择器

选择器：找出页面中的元素，设置样式。

使用多种方式选择元素:
●按照标签名、类名或id
●按照属性
●按照DOM树中的位置

选择器的种类有：
通配选择器、标签选择器、id选择器（ID唯一值）、类选择器、属性选择器
其中属性选择器的例子包括：
[disabled] { }
input[type="password"]{ }
开头a[href^='#']{ }
结尾a[href$='.jpg']{ }

伪类
伪类：不基于标签和属性定位元素,包括状态伪类、结构性伪类
1、状态伪类 a:link a:visited a:hover a:active; 输入框focus状态 :focus
2、结构伪类 li:first-child li:last-child

组合
1、直接组合 AB input:focus(AB同时满足)
2、后代组合：A B nav a(只要是在A后代里的B就可以)
3、亲子组合 A>B section>p（B必须是A直接子元素）
4、兄弟选择器 A ~ B h1 ~ p（选在A后、与A同级的B）
5、相邻选择器 A+B h2+p（选紧跟A后的一个B）

三、CSS 部分样式

颜色
1、RGB模型-----rgb(0-255.0-255,0-255)
2、HSL-----Hue色相、Saturation饱和度、Lightness亮度
颜色关键字 aplha透明度 1完全不透明 (0-1) rgba(,,,0,4) hsla(,,,0.3)

字体
font-family:不同设备安装字体有限，指定多个字体，从前到后使用字体
sans-serif monospace等通用字体族，一般最后添加
使用web fonts 字体文件放在服务器: @font-face{ }

字体大小
font-size 关键字：small medium large，长度：px em（相对单位，相对父亲的倍数），百分数（相对于父元素字体大小）

其他属性
font-style(italic)、font-weight(400-normal 700-bold)、行高line-height（两行基准线之间的距离） 无单位时---是自身大小的倍数、font属性缩写格式、对齐 text-align、文字间距 letter-spacing、 word-spacing、首行缩进、下划线删除线装饰等，空格利用属性white-space：normal nowrap pre pre-wrap pre-line