css基础

CSS基础
一、css基本语法
二、css基本样式
css引入方式
css样式表优先级
css中 冲突、层叠、继承
CSS选择器
一、css基本语法
1、css概述：

css指层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式通常储存储在css文件中
多个样式定义可层叠为了一个
二、css基本样式
文档流的顺序：上左下右
行级标签：按照文档流的顺序依次排列
块级标签：独占一行

基本样式
宽：width：100px
高：height：100px
背景颜色：backgroud-color：coral；
css中颜色表示
单词表示：red、green、blue…
十六进制表示：取值范围（0~9 && a ~ f）
RGB三原色表示：取值范围（0~255）
CSS3新增的颜色：
RGBA：在rgb基础上增加了Alpha透明度
alpha：取值介于0.0完全透明与1.0不透明
HSL：分别代表色相、饱和度、亮度
HSLA：hsl基础加上透明度
css注释
CSS注释 /* 开始，以*/ 结束
css引入方式
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用style标签在文档头部定义内部样式表
内链样式表
由于要将表现和内容混杂在一起，内链样式会损失掉样式表的许多优势。请谨慎用这种方法，例如当样式仅需要表在一个元素上应用一次时。 要使用内联样式，你需要
在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属
性。本例展示如何改变段落的颜色和左外边距:
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表。
css样式表优先级
就近原则

相同样式优先级：
当设置相同样式是，后面的优先级较高
但不建议重复设置样式的情况
内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置相同样式那么后写的样式优先级更高
单一样式优先级

style行间 > id > class > tag > * >继承
注：！important 强制优先
css中 冲突、层叠、继承
层叠：同一个元素使用了不同的样式表，所有的样式进行叠加就叫叠加
冲突：同一个元素设置相同的属性会造成冲突，遵循就近原则选择属性值
继承：在子父类中，文本样式可以被继承，布局样式不可以被继承 （块及元素继承父的宽，行冀不可以）
CSS选择器
全局选择器 *
全局通用的样式选择器又叫做通配符选择器
标签选择器
HTML中定义的标签可以作为选择器
类选择器 .
Id选择器 #
Id名字独一无二
群组选择器 ，
层次选择器
后代选择器 空格
子代选择器 >
相邻兄弟 +
通用兄弟 ~
伪类选择器
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
属性选择器
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-
————————————————
版权声明：本文为CSDN博主「南迎泽」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/2301_78158657/article/details/132064584