CSS基础知识

最新推荐文章于 2024-03-09 13:40:17 发布

善哉！善哉

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量334

点赞数

分类专栏： CSS基础知识文章标签： css

本文链接：https://blog.csdn.net/qq_50308970/article/details/109277791

版权

CSS基础知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS基础

CSS简介
- 四种使用CSS的方式
- CSS选择器的分类

CSS简介

CSS分为两部分——CSS选择器和CSS属性。
在这里插入图片描述

四种使用CSS的方式

1.外链式CSS方式在头部使用link标记引入
如：

<head>
	<meta charset="utf-8"/>
	<title> 标题</title>
	<link rel="stylesheet" type="text/css" href="css文件路径"/>
</head>

2.导入式css样式 @import url (‘css文件路径’)
如：

<head>
	<meta charset="utf-8"/>
	<title>标题</title>
	<style type="text/css">
		@import url('css文件路径');
		/*此处可以继续编写其他的css样式*/
	</style>
</head>

3.嵌入式CSS样式内联样式在头部的style标签里
如：

<head>
	<meta charset="utf-8"/>
	<title>标题</title>
	<style type="text/css">
		选择器{
					background -color:red;
					color:#fff;
					font-size:10px;
		}
	</style>
</head>

4.行内样式CSS方式
如：

<p style="width:100px; height:100px; background-color:#fff; "></p>

CSS选择器的分类

什么是选择器用来干啥的？层叠样式表，CSS技术用来美化HTML页面，HTML相当于盖房子，CSS相当于装修，使用CSS可以把样式代码和HTML分离
选择网页文档的标签就是对网页装修的第一步也是很关键的一步选择器的作用就是用来选择网页结构中具体的标签进行修饰
最终实现整个网页的表现形式

· 1-HTML选择器元素选择器标签名

使用语法在可以写CSS样式的地方 -选择器{样式属性：属性值；} -HTML选择器就是使用标签名作为选择器选择同类的标签

· 2-class选择器类选择器 .

  <div class="box div dd "></div>一个标签可以有多个class类型 好比人的 大名 小名 乳名
… class选择器的使用
- . 类名{样式属性:属性值；}选择对应类名的标签

		<head>
			<meta charset="utf-8"/>
			<title></title>
			<style type="text/css">
				.box{color:#fff;}
			</style>
		</head>
		<body>
			<div class="box div1 dd"></div>
			<div></div>
		</body>

· 3-ID选择器类选择器 #

· #id名称必须全页面唯一 -#id 名{样式属性：属性值；} 选择对应类名的标签

	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
			.box{color:#fff;}
			#box{color:#fff;}<!--id选择器-->
		</style>
	</head>
	<body>
		<div class="box div1 dd"></div>
		<div id="box"></div>
	</body>

· 4-组合选择器群组选择器 #

一次可以选择一群的选择器用，隔开使用方式

	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
			#box，.box{color:#fff;}
		</style>
	</head>
	<body>
		<div class="box div1 dd"></div>
		<div id="box"></div>
	</body>

· 4-关系选择器后代选择器 #

父元素包含子元素父元素选择器子元素选择器{样式属性：属性值}

	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
			#box（空格）.box{color:#fff;}
		</style>
	</head>
	<body>
		<div class="box div1 dd"></div>
		<div id="box"></div>
	</body>

**· 5-通用选择器 ***

·一个可以选择所有标签的选择器*

慎用
·*{样式属性：属性值}

	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
			*{color:#fff;}<!--所有标签字体颜色为白色-->
		</style>
	</head>

· 5-伪类选择器表示一个元素的不同的状态

·伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。 ·伪类包括：
:first-child、🔗、:visited、:hover、:active、:focus和：lang等等
·我们来先了解超链接的伪类包括：🔗、:visited、:hover和:active。分别表示a 标签的四种状态
–:link未有任何操作时 :visited 访问过的状态 --:hover鼠标移上时 :active在鼠标点击与释放之间发生

**a标签的伪类**


	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
			超链接初始颜色为blue
			a:link{color:blue;}
			超链接点击一次之后，颜色变为darkslategrey
			a:visited{color:darkslategrey;}
			鼠标在超链接上时，超链接颜色为yellow
			a:hover{color:yellow;}
			在鼠标点击与释放之间发生
			a:active{volor:green;}
			a{font-size:30px}
		</style>
	</head>
	<body>
		<a href="#">超链接</a>
	</body>

善哉！善哉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识

CSS基础CSS简介四种使用CSS的方式CSS2.0选择器的分类合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入CSS简介CSS分为两部分——CSS选择器和CSS属性。四种使用CSS的方式1.外链式CSS方式在头部使用link
复制链接

扫一扫