HTML5 CSS3_css3 第n个元素-CSDN博客

本文链接：https://blog.csdn.net/m0_74158039/article/details/129009473

1.CSS简介

CSS（Cascading Style Sheets，串联样式表）是用来表现HTML或XML文件样式的计算机语言
CSS发展史：
1996年CSS1.0，最初的版本包含了基础的字体、颜色、背景等
1998年CSS2.0, 2004年2.1版本
2010年推出了到现在的CSS3.0版本

2.CSS3的语法

选择器{属性1:属性值1；属性2:属性值2；属性3:属性值3；}
例：h2{font-size：20px；color：red；}

font-size属性，表示字体大小，例如20px是属性值
color属性，red颜色则是属性值

书写CSS时，注意遵循规范。
多个属性之间必须用；隔开，属性与属性值之间用：连接，属性的值为中文记得要加引号" "

3.CSS的样式

行内样式：通过标签的style属性来设置元素。

<p style=“font-size:20px; color:red”>内容

<标签名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；”>内容</标签名>

内部样式表：

内部样式表是将CSS代码集中写在<head>中，并使用<style>标签为HTMl文件定义信息。
仅开发一个页面适用于小型项目

<head>
 	<title>内部样式表</title>
 	<style>
 	    h1{font-size: 16px; color:blue;}
 	</style>
</head>
<body>
	<h1>内容</h1>
</body>

外部样式表

链接外部样式表是通过link标签将外部样式表链接到HTML5文件中的。

<link rel="stylesheet" href="style.css" type="text/css">

rel:定义当前文档与链接文档之间的联系。
href：定义所链接外部样式表文件的url
type：定义所链接文档的类型

样式优先级
就近原则，谁离源代码近，谁的优先级高
行内样式表>内部样式表>外部样式表

4.基础选择器

CSS3基础选择器包含标签选择器、类选择器、和id选择器

标签选择器

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
标签选择器最大的优点就是能快速地为同类型的标签统一样式

类选择器

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
类选择器使用英文.标识
类名为HTML5的class属性，即
<标签名 class="类名">标签内容</标签名>

id选择器

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
id选择器使用#进行标识，后面紧跟id名
id选择器具有唯一性，一个HTML页面，只能使用一次

3种选择器的优先级
id选择器>类选择器>标签选择器

5.高级选择器

层次选择器

后代选择器：后代选择器的元素不止两个，可以有多个空格分开，如可以写成#a #b #c{ }的形式
子选择器：子选择器可以值选它的后代，用标识符>进行选择，如：body>p{color:green;}
相邻同胞选择器：可以找到类名相似的标签，用标识符“+”进行选择，如active+li{backgroud:yellow;}
通用兄弟选择器：通用兄弟选择器用于选择元素后面的所有兄弟元素，使用~标识符进行选择，如：.active~li{background:#999;}
找到action后面的所有li标签

结构伪类选择器

:first-child选择器：用于父元素的第一个子元素设置样式
:last-child选择器：用于父元素的最后一个子元素设置样式
:nth-child（n）选择器：用于父元素的第n个子元素设置，用的较多，优势是可以直接选中元素
:first-of-type 选择器用于选择父元素下相同类型的子元素的第一个
:nth-of-type(n)选择器:用于选择父元素下相同类型子元素的n个，使用较多

属性选择器
属性选择器是可以根据元素的属性及属性值来选择元素的

E[attr]:选择匹配具有attr属性的E元素。
E[attr=val]:选择匹配具有属性attr的E属性，并且属性值为val
E[attr^=val]:选择匹配元素E，且E元素定义了attr属性，其属性值是以val开头的任意字符串
E[attr$=val]:选择匹配元素E，且E元素定义了attr属性，其属性值是以val结尾的任意字符串
E[attr*=val]:选择匹配元素E，且元素定义了attr属性，属性值val。