CSS基础、选择器

css

css概述

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在css文件中
• 多个样式定义可层叠为一个
• html 和 css 结构样式分离，写法上HTML 属性和属性值用=拼接，css 属性和属性值是：

css基本样式

文档流的顺序：上左下右
行级标签：按照文档流的顺序依次排序
块级标签：独占一行

基本样式

• 宽：width
• 高：height
• 背景颜色：background-color
  ==注意：==行级标签设置的宽高不起作用，行级标签的宽高根据内容的大小自适应

样式表

• 内联样式表
  在相关的开始标签内用style属性
• 内部样式表
  用< style>标签在文档头部定义内部样式表
• 外部样式表
  当样式需要应用于很多页面，常用外部样式表
  每个页面使用< link>标签链接到样式表
  < link>属于html
  @impor 属于css（不建议使用）
  

优先级

• 就近原则
  相同样式优先级： 当设置相同样式时，后面的优先级较高。 但不建议重复设置样式的情况。
• 内部样式与外部样式
  内部样式与外部样式优先级相同，如果都设置相同样式 那么后写的样式优先级更高
• 单一样式优先级
  style 行间 > id > class >tag > * > 继承
  注： ！important 强制优先

css中的冲突、层叠、继承

• 冲突
  同一元素设置相同的属性会造成冲突，遵循就近原则选择属性值
• 层叠
  同一个元素使用了不同的样式表，所有的样式进行叠加
• 继承
  在子父关系中文本样式可以被继承，
  布局样式不能被继承（块级元素可以继承父的宽，行级不行）

选择器

1.标签选择器：

<style>
	p{
	}
</style>

2.全局选择器（通配符选择器）：
*{
}
3.class 选择器：

<style>
	.class属性值{}
	注意：class里面属性值不能以数字开头，
	如果以符号开头，只能是'_'或者'-'这两个符号，
	其他符号不可以，一个class里可以有多个属性值
</style>

4.id 选择器：

#id属性值{}
注意：id的属性值只能给一个，可以重复利用，不能以数字开头

5.群组选择器：

选择器1，选择器2...{}

6.层次选择器：

• 子父
• 空格 后代选择器
• +相邻兄弟(向下)
• ~通用兄弟

7.伪类选择器

• ui伪类 通常用在 a 标签(切记顺序位置)
  E:link{ 属性:属性名}初始状态默认状态
  E:visited{属性:属性名}超链接被访问后的状态
  E:hover{属性:属性名}超链接鼠标悬浮时的状态
  E:active{属性:属性名}超链接被激活时的状态
  注：多用于链接标签中
  E:focus{属性:属性名}向拥有键盘输入焦点的元素添加样式
  E:lang{属性:属性名}向带有指定 lang 属性的元素添加样式 input:checked 选中每个被选中的 input 元素
  input:disabled 选择每个禁用的 input 元素
  input:enable 选择每个启动的 input 元素
  E：：after{content:” ”}
  E：：before 通过伪类
• 结构伪类
  E:root 选择文档根元素（不太常用）
  E:nth-child() 元素的第 n 个相同元素
  E:first-child 第一个子元素
  E:last-child 最后一个子元素
  E:only-child 仅有的一个子元素
  E:nth-of-type() 匹配同类型中的第 n 个同级兄弟选择器元素
  E E:first-of-type 匹配同类型中的第一个同级元素 E
  E:last-of-type 匹配同类型中的第一个同级元素 E
  E:only-of-type 只有一种类型的子元素
  E：empty 匹配没有任何子元素的元素E
  8.属性选择器
  E[title]只有属性名
  E[title=“value”]属性名和值
  E[title ~=“value”]值为多个词中间有空格隔开，属性值在其中E[title^=“value”]属性值是以 value 开头
  E[title $=“value”]属性值是以 value 结束
  E[title *=“value”]属性值包含 value
  E[title |=“value”]属性值为 value 或 value