CSS第一天

dengdeng52306

已于 2022-09-02 13:19:19 修改

阅读量179

点赞数

文章标签： css 前端 html

于 2022-09-02 13:16:45 首次发布

本文链接：https://blog.csdn.net/weixin_55171701/article/details/126658147

版权

css : 层叠样式表的简称（Cascading Style Sheets），是一种描述HTML文档样式，具有美化页面、布局页面的功能的标记语言。

css的样式表：

按照样式书写的位置或引入的方式，css样式表可以分为三大类，分别是行内样式表（行内）和内部样式表（嵌入式）、外部样式表（链接式）。

1、行内：

在元素标签内部的style属性中设定css的样式，适用于简单修改。

<h1 style="color: red;font-size: 20px;">行内样式表</h1>

2、内部：

写在HTML的页面内部，将所有的css代码抽出来单独放在< style >标签中，通常< style >标签放在< head ></head>之中，做到了部分分离。

<head>
<meta charset="utf-8">
<title>内部样式表</title>
	
	<style>
	
		h1{
			color: red;
			font-size: 20px;
			
		}
	
	</style>
</head>

3、外部（常用）：

样式单独写到css文件中，再把css文件引入到html文件。

1、css文件里只有样式没有标签

div{
	background-color: #E0B9BA;
	width: 200px;
}

a{
	font-size: 20px;
	color: aliceblue;
	height: 50px;
	text-indent: 2em;
	line-height: 50px;
	display: block;
	text-decoration: none;
}

2、引入文件“stylesheet”是样式表，自动生成，在 href 指定css文件即可。

<head>
<meta charset="utf-8">
<title>外部链接</title>
	<link rel="stylesheet" href="cheek.css">
</head>

选择器：

分为基础选择器和复合选择器，作用是选择标签。

1、基础选择器：

由单个选择器组成包括标签选择器、类选择器、id选择器、通配符选择器。

标签选择器：

h1{
				color: aqua;
				font-size: 20px;
			}

类选择器：

差异化选择不同标签，单独选一个或几个标签。


	<div>
	
	<h1 class="h">类选择器的用法</h1>
<!--		标签后面加“class = 类名”-->
	</div>

.h
		{
/*		. + h	点加类名设置选择器*/
			
			color: red;
			font-size: 20px;
			
/*			属性：属性值；*/
		}

多个类名时用空格分开。

id选择器：

样式#id定义，机构id= “id”调用，只能调用一次。类选择器可以重复调用，id选择器不行。


			#h{
				color: aqua;
				font-size: 20px;
			}

<h1 id="h">id选择器的用法</h1>

通配符选择器：

所有标签都修改。

*{
		font-size: 50px;	
		}

2、复合选择器：

建立在基础选择器之上，对基础选择器进行组合。既由两个或以上的基础选择器组成，能更准确、高效的选择目标元素（标签）的选择器。

常用的复合选择器有：后代选择器、子选择器、并集选择器、伪类选择器等。

后代选择器：

又称包含选择器，可以选择父标签中的子标签。

ol li{
			color: aliceblue;
/*			外层标签在前，内层标签在后，中间空格。*/
		}
		
		ol li a{
			color: aqua;
			text-decoration: none;
/*			只要是后代都能选*/
		}
		
		.nav li a{
			color: red;
			text-decoration: none;
/*			多个相同标签时可以用点类名的形式区分*/
		}

子选择器：

只能选择父元素的下一级子元素。

	ol>li{
			color: aliceblue;
/*			用 > 指定子元素*/
		}

并集选择器：

h1,h2,h3,h4{
			font-weight: 400;
			color: aliceblue;
/*			多个元素一起定义，中间用逗号 ， 隔开*/
		}

伪类选择器：

设置鼠标悬停和点击未弹起时元素上的样式，已访问和未访问链接的样式以及元素获得焦点时的样式。

	效果
a : link	未访问过的链接
a : visited	访问过的链接
a : hover	鼠标悬停在链接上
a : active	点击未弹起的链接

        .red:link{
			background-color: aliceblue
		}
		.red:visited{
			background-color: azure
		}
		.red:hover{
			background-color: red;
		}
		.red:active{
			background-color: aquamarine
		}

全部设置时需要按照 link 、visited 、hover 、active 的顺序书写（lvha）.

焦点样式：一般用于表单元素。

：focus

input : foucs{
background-color : red;
}

dengdeng52306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS第一天

css的三种样式和基础、复合选择器
复制链接

扫一扫

CSS第一天

css的样式表：

1、行内：

2、内部：

3、外部（常用）：

选择器：

1、基础选择器：

类选择器：

id选择器：

通配符选择器：

2、复合选择器：

后代选择器：

子选择器 ：

并集选择器：

伪类选择器：

“相关推荐”对你有帮助么？

子选择器：