CSS基础----选择器、标签、属性（笔记03）

最新推荐文章于 2023-07-22 14:48:25 发布

储凡443

最新推荐文章于 2023-07-22 14:48:25 发布

阅读量408

点赞数

分类专栏：前端笔记文章标签： CSS选择器伪类选择器关系选择器 CSS字体、文本属性设置

本文为博主-Rong姐姐好可爱原创文章，未经允许不得转载.

本文链接：https://blog.csdn.net/Mmdapl/article/details/79598302

版权

前端笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本次笔记主要较为全面的了解CSS关于选择器的应用，字体、文本的设置属性，以及伪类标签的练习，重点是CSS的相关属性的灵活应用和在开发过程中需要注意、了解、掌握的属性；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css相对路径"/>
		<style type="text/css">
			*{
				/**
				 * font-family：字体
				 * margin：外间距
				 * padding:内间距
				 */
				font-family: "arial black";
				margin: 0px;
				padding: 0px;
			}
			h1,h2,h3{
				color: red;
				background-color: aquamarine;
			}
			div.bg{
				background-color: green;
				/*设置图片的位置*/
				background-position: bottom;
				/*设置图片是否重复*/
				background-repeat: no-repeat;
				/*设置背景图片滚动*/
				background-attachment: scroll;
			}
			div.class1{
				font-family: "微软雅黑";
				margin: auto;
			}
			#id_name1, #id_name2{
				/**
				 * 多个id选择器，可用逗号隔开书写
				 */
				font-family: "微软雅黑";
			}
			#title.p:first-child{
				font-size: x-large;
			}
			#title.p:nth-child(2){
				font-size: large;
				/*设置文字缩小，可用来设置A2*/
				font-variant: all-small-caps;
			}
		</style>
		<style>
			h1{
				font-size: 20px;
				background: auto;
				padding: 5px;
			}
			/*<a>的显示*/
			a:link{
				/*设置链接的颜色开始颜色，属性等*/
				color: red;
				font: "微软雅黑";
				font-size: 14px;
			}
			a:visited{
				/*设置已经访问过的链接颜色*/
			}
			a:hover{
				/*设置鼠标移上去的效果*/
				color: #008000;
				width: 40px;
				height: 50px;
			}
			a:active{
				/*设置点击时候的效果，可设置相关属性*/
			}
		</style>
	</head>
	<body>
		<!--
        	CSS：Cascading Style Sheets(层叠样式表)
        	常用的CSS选择器：
        		1.通用选择器(Universal)
        		2.类型选择器(Type)
        		3.类选择器(Class)：解决一类标签的问题
        			格式：
        				样式定义选择符号.类名{样式属性1：值1;样式属性2：值2;}
        		4.ID选择器
        			格式：
        				#ID选择器{属性1：值1;属性2：值2;}
        		5.伪类选择器
        			CSS 中的伪类选择器在创建样式规则时提供了额外的选项，可以添加到其他选择器，创建更加负责的CSS规则;
        	
        	基础选择器的优先级：ID > Class > Type > Universal;
        	
        	CSS样式：
        		1.内联样式
        			在HTML元素中使用style标记 ，建立一个或多个样式 。
        			格式：
        				style="属性1：值1；属性2：值2;属性3:值3"
        			eg：
        			<p style="font: '微软雅黑';font-size: 14px;">重新复习CSS样式</p>
        		2.内部样式表
        			在<head>标签中，使用<style></style>来使用样式
        			eg:
        			<style>
						h1{
							font-size: 20px;
							background: auto;
							padding: 5px;
						}
					</style>
        				
        		3.外部样式表
        			单独建一个.css文件夹，在<head></head>总用link来引入css；
        			<link rel="stylesheet" type="text/css" href="css相对路径"/>
        			
        -->
        <div class="bg">
        	类选择器
        </div>
        <p id="id_name1">id选择器（记得要加#）</p>
        <!--伪类选择器-->
        <div id="title">
        	<p>段落一，用于测试</p>
        	<p>段落二，用于测试</p>
        </div>
        <!--
        	<a>标记的选择器，可以设置不同类型链接的显示方式
        		a:link：未被访问过的超链接；
        		a:visited:已被访问过的超链接；
        		a:active:当前超链接处于选中状态；
        		a:hover:当鼠标指针移动到超链接上显示；（hover：悬停，徘徊）
        -->
        <p style="font: '微软雅黑';font-size: 14px;">重新复习CSS样式</p>
        
        
	</body>
</html>

储凡443

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础----选择器、标签、属性（笔记03）

本次笔记主要较为全面的了解CSS关于选择器的应用，字体、文本的设置属性，以及伪类标签的练习，重点是CSS的相关属性的灵活应用和在开发过程中需要注意、了解、掌握的属性；&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
复制链接

扫一扫