HTML (第四章) 标签：初识CSS 选择器

最新推荐文章于 2024-04-26 22:14:41 发布

m0_61835031

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量68

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_61835031/article/details/125626007

版权

HTML (第四章)

标签：初识CSS

CSS基本语法结构

选择器 {
        属性1:值;<!--结尾必须加上英文状态下的“;”-->
        属性2:值;
}

HTML中引入CSS样式分为三种
行内样式>内部样式>外部样式
就近原则

行内样式
使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表
CSS代码写在的

<style>
        h1 {
        color: green; 
        }
</style>

外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
只要写在body上面即可

链接式

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--href 路径 rel 属性是必须的，规定当前文档与被链接文档/资源之间的关系。
type 可以省略不写-->
</head>

导入式

<head>
<style type="text/css">
@import url("style.css");
</style>
</head>

CSS3基本选择器

ID选择器>类选择器>标签选择器

标签选择器
标签选择器直接应用于HTML标签

<!--标签选择器-->
p { 
    font-size:16px;
}

最常用

类选择器
类选择器可在页面中多次使用

.类名称 { font-size:16px;}<!--类选择器-->


<标签名 class= "类名称">标签内容</标签名>

ID选择器
ID选择器在同一个页面中只能使用一次

#名称 { font-size:16px;}

<标签名 id= "名称">标签内容</标签名>

并集选择器
在多个选择器名称之间用逗号间隔

	<style>
		p,h1 {
			font-size: 14px;
			color: green;
		}
	</style>
	<body>
		<h1>望庐山瀑布</h1>
		<p>日照香炉生紫烟，</p>
		<p>遥看瀑布挂前川。</p>
		<p>飞流直下三千尺，</p>
		<p>疑是银河落九天。</p>
	</body>

全局选择器
作用于整个页面

	<style>
		* {
			font-size: 14px;
			color: green;
		}
	</style>
	<body>
		<h1>望庐山瀑布</h1>
		<p>日照香炉生紫烟，</p>
		<p>遥看瀑布挂前川。</p>
		<p>飞流直下三千尺，</p>
		<p>疑是银河落九天。</p>
	</body>

CSS的高级选择器

层次选择器
|选择器|选择器类型|功能描述|
|----|-----|----|
|E F|后代选择器|选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内|
|E>F|子选择器|选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素|
|E+F|相邻兄弟选择器|选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面|
|E~F|通用兄弟选择器|选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素|

body p{  background: red;  }<!--后代选择器-->
body>p{  background: pink;  }<!--子选择器-->
.active+p {  background: green;  }<!--相邻兄弟选择器-->
.active~p{  background: yellow;  }<!--通用兄弟选择器-->

结构伪类选择器
|选择器|功能描述|
|-------------------------|---------------------------|
|E:first-child|作为父元素的第一个子元素的元素E|
|E:last-child|作为父元素的最后一个子元素的元素E|
|E F:nth-child(n)|选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd|
|E:first-of-type|选择父元素内具有指定类型的第一个E元素|
|E:last-of-type|选择父元素内具有指定类型的最后一个E元素|
|E F:nth-of-type(n)|选择父元素内具有指定类型的第n个F元素|
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

属性选择器
|属性选择器|功能描述|
|—|—|
|E[attr]|选择匹配具有属性attr的E元素|
|E[attr=val]|选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）|
|E[attr^=val]|选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串|
|E[attr$=val]|选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串|
|E[attr*=val]|选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配|

 a[id] { background: yellow; }
 a[id=first] { background: red; }
 <!--E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中-->
 a[href^=http] { background: red; }
 a[href$=png] { background: red; }
 a[class*=links] { background: red; }