CSS

---

CSS样式

简介
CSS： 级联样式表单，cascade style sheets

• CSS 指层叠样式表（cascade style sheets）
• 样式定义如何显示 HTML元素
• 样式通用存储在样式表中
• 把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
• 外部样式表 可以极大提高工作效率
• 外部样式表通常存储在CSS文件中
• 多个样式定义可层叠为一个

作用：
css使用一种样式表单，主要是用来对HTML页面进行样式的美化，增强样式和简化代码

注意：
css使用中网页样式表单，css一般使用不能单独使用，而是要在页面中体现

CSS的格式：
样式名称：样式值；
例如：
color ：red；
font-size ： 24px；

css在页面中的引入方式：

1. 行内样式
   在html中所有的标签中共有一属性style，使用该属性即可引入css样式
   例：

     	<h1 style="color:red;font-size: 48px;">我是一个标题</h1>

2. 内部样式
   在页面中的head头部标签中，使用style标签来引入内部样式
   格式：
   选择器{
   样式名称：样式值；
   …
   }

例：

	<style>
        /* css样式  */
        h2{
            color: blue;
        }
    </style>

3. 外部样式
   在项目中新建一个css文件，把样式写入到当前的文件中，在你需要的html页面中使用link来引入即可
   css文件

	h3{
	    color: chartreuse;
	    font-size: 50px;
	}

html页面

	<link href="c.css" rel="stylesheet"/>

css的选择器：【再css中用来选择html标签的工具】

​ 标签选择器 标签名

多重样式：

​ 如果有多个不同的样式设置同一个标签元素，则合并样式

​ 如果多个相同的样式设置同一个标签元素，则样式以 就近原则使用

CSS选择器

CSS选择器用于选择你想要的元素的样式的模式。

基本选择器：

-  类选择器		.class

- id选择器		#id					注意：一般id唯一

- 标签选择器	标签名

- 所有选择器	*

层次选择器：

- 选择器1,选择器2,........				同时选择多个标签

- 父选择器  子选择器					 选择父标签下的后代元素

- 选择器1>选择器2						选择1的子标签标签【孙子标签不执行】		

- 选择器1+选择器2						选择1的相邻2标签

属性选择器：

- [attribute]								选择拥有此属性的标签

- [attribute=value]					选择拥有此属性且值固定的标签

- [attribute^=value]					选择此属性值以value开头的标签

- [attribute$=value]					选择此属性值以value结尾的标签

- [attribute*=value]					选择此属性值包含value的标签

伪类选择器

- :visited					链接访问后的样式

- :link						链接未访问前的样式

- :active					链接再出发时的样式

- :hover					链接再鼠标悬停时的样式

​ 注意：如果以上四个样式都要设置，则:visited必须再后面三种的最前方设置即可

子标签选择器：

- :only-child					选择只有一个子标签的父元素

- :nth-child(n)				 选择具体的几个子标签元素   2n   odd  even  1

- :last-child					 选择最后一个子标签

- :first-child					选择第一个子标签

小demo

例如一个小项目：
源码及源文件：链接：https://pan.baidu.com/s/1aGAMZC8RWUHR12HOBVyqsQ
提取码：xxal
效果图: