HTML/CSS日记（三）

最新推荐文章于 2024-07-19 22:09:45 发布

Tmil

最新推荐文章于 2024-07-19 22:09:45 发布

阅读量91

点赞数

分类专栏： HTML/CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_46067727/article/details/124926977

版权

HTML/CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS基本语法：选择器声明块。通过选择器可以选中页面中的指定元素，例如p的作用就是选中页面中所有的p元素；通过声明块来指定要为元素设置的样式，声明块由一个个声明组成，声明是一个名值对结构：样式名：样式值；。

（以下代码仅做对知识点说明用，不考虑运行效果）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		/*选择器的种类：*/
		/*元素选择器*/
		p{
			color: red;
			font-size: 10px;
		}
		/*id选择器*/
		#h1{
			color: green;
		}
		/*类选择器*/
		.p1{
			color: yellow;
		}
		.p2{
			font-size: 20px;
		}
		/*通配选择器,对所有标签起作用*/
		*{
			color: blue;
		}
	</style>
</head>
<body>
	<h1 id="h1">一行标题</h1>
	<p>一段文字1</p>
	<p class="p1 p2">一段文字2</p>
	<!-- 一个标签可以有多个class属性值，中间用空格隔开 -->
	<p class="p1">一段文字3</p>
	<div class="p1">一个div</div>
	<span>span</span>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		/*交集选择器*/
		div.p1{
			color: pink;
		}
		.p1.p2{
			color: purple;
		}
		/*选择器分组（并集选择器）*/
		div,.p1,#h1{
			font-size: 20px;
		}
		/*子元素选择器，对“一行文字2”起作用*/
		div.div2>span{
			color: greenyellow;
		}
		/*后代元素选择器，对所有div中的后代span起作用*/
		div span{
			color: yellowgreen;
		}
		/*兄弟选择器*/
		/*仅对相邻的兄弟起作用，如下仅对“一行文字2起作用”*/
		p+span{
			font-size: 30px;
		}
		/*对p元素下边所有的span兄弟起作用，对“一行文字4”不起作用*/
		p~span{
			font-size: 40px;
		}
	</style>
</head>
<body>
	<h1 id="h1">一行标题</h1>
	<p class="p1 p2">一段文字2</p>
	<!-- 一个标签可以有多个class属性值，中间用空格隔开 -->
	<p class="p1">一段文字3</p>
	<div class="p1">一个div</div>
	<div class="div2">
		<!-- 元素间的关系有：父元素、子元素、祖先元素、后代元素、兄弟元素 -->
		<span>一行文字4</span>
		<p>
			<span>一行文字1</span>
		</p>
		<span>一行文字2</span><br>
		<span>一行文字3</span>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		/*属性选择器*/
		/*选择有title属性的p元素*/
		p[title]{
			font-size: 30px;
		}
		/*选择title属性为t1的p元素*/
		p[title=t1]{
			color: pink;
		}
		/*选择title属性值是以t2开头的p元素*/
		p[title^=t2]{
			color: blue;
		}
		/*选择title属性值是以t3结尾的p元素*/
		p[title$=t3]{
			font-size: 20px;
		}
		/*选择title属性值中含有t1的p元素*/
		p[title*=t1]{
			font-size: 50px;
		}
	</style>
</head>
<body>
	<p title="t1">1</p>
	<p title="t2">2</p>
	<p title="t2t3">3</p>
	<p title="t1t3">4</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		
		/*伪类选择器，伪类，即不存在的类，特殊的类。
		伪类用来描述一个元素的特殊状态，如：
		第一个子元素、被点击的元素、鼠标移入的元素
		伪类一般使用冒号开头*/
		/*选中ul的第一个li子元素*/
		ul>li:first-child{
			color: red;
		}
		/*选中ul的最后一个li子元素*/
		ul>li:last-child{
			color: blue;
		}
		/*选中ul的第n个li子元素，n的取值范围是0到正无穷
		特殊值：2n或even表示选中偶数位；2n+1或odd表示选中奇数位*/
		ul>li:nth-child(2n){
			color: pink;
		}
		/*以上伪类都是根据所有的子元素进行排序，使用时子元素需是同类型才能正常发挥作用*/
		/*以下几个伪类与上述的伪类功能类似，不同的是它们只在同类型元素中进行排序：
		:first-of-type
		:last-of-type
		:nth-of-type()*/
		/*:not()否定伪类，将符合条件的元素从选择器中去除*/
		ul>li:not(:nth-child(2)){
			font-size: 30px;
		}
	</style>
</head>
<body>
	<ul>
		<li>一</li>
		<li>二</li>
		<li>三</li>
		<li>四</li>
		<li>五</li>
		<li>六</li>
		<li>七</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		/*:link表示没访问过的链接（正常的链接)*/
		a:link{
			color: red;
		}
		/*:visited表示访问过的链接，由于隐私的原因，所以visited这个伪类只能修改链接的颜色，不能修改其他的*/
		a:visited{
			color: yellow;
		}
		/*以上两个伪类是超链接专属*/
		/*:hover用来表示鼠标移入的状态*/
		a:hover{
			color: aqua;
			font-size: 30px;
		}
		/*:active用来表示鼠标点击时*/
		a:active{
			color: yellowgreen;
		}
	</style>
</head>
<body>
	<a href="#">访问过的</a><br>
	<a href="http://www.baidu.com">未访问过的</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		p{
			font-size: 20px;
		}
		/*伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
		伪元素使用双冒号开头
		::first-letter表示第一个字母
		::first-line表示第一行
		::selection表示选中的内容
		::before表示元素的开头
		::after表示元素的结尾
			因为开头和结尾无内容，所以设置样式时before和after要结合content属性使用，通过content添加的内容无法选中*/
		p::first-letter{
			font-size: 50px;
		}
		p::first-line{
			background-color: yellow;
		}
		p::selection{
			background-color: greenyellow;
		}
		div::before{
			content:'“';
			color: red;
		}div::after{
			content:'”';
			color: red;
		}
	</style>
</head>
<body>
	<div>woshiyihangzi&nbsp;woshiyihangziwoshiyihangzi&nbsp;woshiyihangzi<br>woshiyihangzi&nbsp;woshiyihangziwoshiyihangzi&nbsp;woshiyihangzi</div>
	<p>woshiyihangzi&nbsp;woshiyihangziwoshiyihangzi&nbsp;woshiyihangzi<br>woshiyihangzi&nbsp;woshiyihangziwoshiyihangzi&nbsp;woshiyihangzi</p>
	<p>woshiyihangzi&nbsp;woshiyihangziwoshiyihangzi&nbsp;woshiyihangzi<br>woshiyihangzi&nbsp;woshiyihangziwoshiyihangzi&nbsp;woshiyihangzi</p>
</body>
</html>

(作者观看的学习视频：B站尚硅谷）