CSS个人笔记基本知识

　　CSS简介
　　由于HTML单纯关注定义内容，CSS用于美化HTML页面
　　CSS是层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
　　CSS有两个主要部分构成：选择器及一条或多条声明 CSS基础选择器：
　　选择器的就是根据不同需求把不同标签选出来。
　　选择器
　　示例
　　示例说明
　　CSS(1,2,3)
　　.class
　　.intro
　　选择所有class=＂intro＂的元素
　　1
　　#id
　　#firstname
　　选择所有id=＂firstname＂的元素
　　1
　　*
　　*
　　选择所有元素
　　2
　　element
　　p
　　选择所有
　　元素
　　1
　　element,element
　　p,p
　　选择所有元素和
　　元素
　　1
　　elementelement
　　p p
　　选择元素内的所有
　　元素
　　1
　　element>element
　　p>p
　　选择所有父级是  元素的
　　元素
　　2
　　element+element
　　p+p
　　选择所有紧跟在  元素之后的第一个
　　元素
　　2
　　[attribute]
　　[target]
　　选择所有带有target属性元素
　　2
　　[attribute=value]
　　[target=-blank]
　　选择所有使用target=＂-blank＂的元素
　　2
　　[attribute~=value]
　　[title~=flower]
　　选择标题属性包含单词＂flower＂的所有元素
　　2
　　[attribute|=language]
　　[lang|=en]
　　选择 lang 属性等于   en  ，或者以  en-   为开头的所有元素
　　2
　　:link
　　a:link
　　选择所有未访问链接
　　1
　　:visited
　　a:visited
　　选择所有访问过的链接
　　1
　　:active
　　a:active
　　选择活动链接
　　1
　　:hover
　　a:hover
　　选择鼠标在链接上面时
　　1
　　:focus
　　input:focus
　　选择具有焦点的输入元素
　　2
　　:first-letter
　　p:first-letter
　　选择每一个
　　元素的第一个字母
　　1
　　:first-line
　　p:first-line
　　选择每一个
　　元素的第一行
　　1
　　:first-child
　　p:first-child
　　指定只有当
　　元素是其父级的第一个子级的样式。
　　2
　　:before
　　p:before
　　在每个
　　元素之前插入内容
　　2
　　:after
　　p:after
　　在每个
　　元素之后插入内容
　　2
　　:lang(language)
　　p:lang(it)
　　选择一个lang属性的起始值=＂it＂的所有
　　元素
　　2
　　element1~element2
　　p~ul
　　选择p元素之后的每一个ul元素
　　3
　　[attribute^=value]
　　a[src^=＂https＂]
　　选择每一个src属性的值以＂https＂开头的元素
　　3
　　[attribute$=value]
　　a[src$=＂.pdf＂]
　　选择每一个src属性的值以＂.pdf＂结尾的元素
　　3
　　[attribute*=value]
　　a[src*=＂runoob＂]
　　选择每一个src属性的值包含子字符串＂runoob＂的元素
　　3
　　:first-of-type
　　p:first-of-type
　　选择每个p元素是其父级的第一个p元素
　　3
　　:last-of-type
　　p:last-of-type
　　选择每个p元素是其父级的最后一个p元素
　　3
　　:only-of-type
　　p:only-of-type
　　选择每个p元素是其父级的唯一p元素
　　3
　　:only-child
　　p:only-child
　　选择每个p元素是其父级的唯一子元素
　　3
　　:nth-child(n)
　　p:nth-child(2)
　　选择每个p元素是其父级的第二个子元素
　　3
　　:nth-last-child(n)
　　p:nth-last-child(2)
　　选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
　　3
　　:nth-of-type(n)
　　p:nth-of-type(2)
　　选择每个p元素是其父级的第二个p元素
　　3
　　:nth-last-of-type(n)
　　p:nth-last-of-type(2)
　　选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
　　3
　　:last-child
　　p:last-child
　　选择每个p元素是其父级的最后一个子级。
　　3
　　:root
　　:root
　　选择文档的根元素
　　3
　　:empty
　　p:empty
　　选择每个没有任何子级的p元素（包括文本节点）
　　3
　　:target
　　#news:target
　　选择当前活动的#news元素（包含该锚名称的点击的URL）
　　3
　　:enabled
　　input:enabled
　　选择每一个已启用的输入元素
　　3
　　:disabled
　　input:disabled
　　选择每一个禁用的输入元素
　　3
　　:checked
　　input:checked
　　选择每个选中的输入元素
　　3
　　:not(selector)
　　:not(p)
　　选择每个并非p元素的元素
　　3
　　::selection
　　::selection
　　匹配元素中被用户选中或处于高亮状态的部分
　　3
　　:out-of-range
　　:out-of-range
　　匹配值在指定区间之外的input元素
　　3
　　:in-range
　　:in-range
　　匹配值在指定区间之内的input元素
　　3
　　:read-write
　　:read-write
　　用于匹配可读及可写的元素
　　3
　　:read-only
　　:read-only
　　用于匹配设置 ＂readonly＂（只读） 属性的元素
　　3
　　:optional
　　:optional
　　用于匹配可选的输入元素
　　3
　　:required
　　:required
　　用于匹配设置了 ＂required＂ 属性的元素
　　3
　　:valid
　　:valid
　　用于匹配输入值为合法的元素
　　3
　　:invalid
　　:invalid
　　用于匹配输入值为非法的元素
　　3  选择器分为基础选择器和复合选择器两大类
　　基础选择器由单个选择器组成包括标签选择器，类选择器，id选择器和通配符选择器语法:
　　标签名{
　　属性1：属性值1;
　　属性2：属性值2;
　　属性3：属性值3;
　　...
　　}
　　.类名{
　　属性1：属性值1;
　　...
　　}
　　多类名使用 在标签class属性中写多个类名用空格隔开
　　#id名{
　　属性1：属性值1;
　　...
　　}
　　* { //通配符选择器使用＂*＂定义，表示选取页面中所有的元素(标签)
　　属性1：属性值1;
　　...
　　}CSS字体属性：
　　属性
　　表示
　　注意
　　font-size
　　字号
　　我们通常用的单位px像素
　　font-family
　　字体
　　实际工作按照要求来写
　　font-wright
　　字体粗细
　　加粗是700或者bold 不加粗是normal或者400 没有单位
　　font-style
　　字体样式
　　倾斜是italic 不倾斜是normal
　　font
　　字体连写
　　字体连写是有顺序的不能随意换位置，其中字号和字体必须同时出现CSS文本属性：
　　文本颜色颜色color: red;
　　属性值
　　预定义颜色
　　green,red,blue,withe...
　　十六进制
　　#FF0000,#FF6600,#29D794...
　　RGB代码
　　rgb(255,0,0)或rgb(100%,0%,0%)
　　文本对齐属性值text-align: center;
　　解释
　　left
　　左对齐(默认)
　　right
　　右对齐
　　center
　　居中对其
　　装饰文本text-decoration: underline;
　　描述
　　none
　　默认。没有装饰
　　underline
　　下划线。链接a自带下划线
　　overline
　　上划线
　　line-though
　　删除线
　　文本缩进：
　　text-indent： 10px/2em
　　给定缩进长度或em相对单位一个文字的大小
　　行间距：
　　line-height: 26px;CSS引入方式：
　　样式表
　　优点
　　缺点
　　使用情况
　　控制范围
　　行内
　　书写方便权重高
　　结构样式混写
　　较少
　　控制一个标签
　　内部
　　部分结构和样式分离
　　没有彻底分离
　　较多
　　控制一个界面
　　外部
　　完全实现结构样式分离
　　需要引入
　　最多
　　控制多个页面
　　详情可参考
　　https://www.runoob.com/ 菜鸟教程
　　https://www.w3school.com.cn/ w3c