css整理

ʚ南北北ɞ

已于 2022-11-25 10:41:54 修改

阅读量88

点赞数

分类专栏： Javaweb 文章标签： css

于 2022-11-25 10:06:26 首次发布

本文链接：https://blog.csdn.net/weixin_46657027/article/details/128032768

版权

Javaweb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

HTML是用来编写网页的骨架

CSS是用来美化网页

javaScript语言是用来为网页添加交互的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
    <!--style标签-内部样式表
	在此可以编写css代码
	设置h1标签的颜色为skyblue
	-->
	<style>
		h1{
			color: skyblue;
		}
	</style>
</head>
<body>
	<h1>
		我是一级标题
	</h1>
</body>
</html>

CSS语法：

CSS 规则集（rule-set）由选择器和声明块组成：

声明：属性: 属性值;

<!--每一个声明最好使用分号结尾-->
选择器{
	声明1;
	声明2;
	声明3;
	...
}

1 引入css文件

一个网页引入css的方法为:

内联方式(行内样式)
内部样式表
外联样式表

优先级：行间>内部>外部

1.1 内联方式

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>

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

实际在写页面时不提倡使用，在测试的时候可以使用

1.2 内联样式表

在style标签中书写CSS代码。style标签写在head标签中

<head>
	<style type="text/css">
		h3{
			color:red;
		}
	</style>
</head>

1.3 外联样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式

语法：

链接式（建议使用这种方式）

<link type="text/css" rel="styleSheet" href="CSS文件路径"/>

导入式

<style type="text/css">
	@import url("css文件路径");
</style>

使用外部样式表的好处

内容和表现分离

网页结构表现统一，以便于复用

2 选择器

CSS选择器的作用：选择页面中的某一个或某一类元素

2.1 基本选择器

基本选择器分为：

标签选择器
类选择器
id选择器

同时选择多个选择器用逗号隔开

优先级：id选择器>类选择器>标签选择器

2.1.1 标签选择器

语法：

标签{声明1;声明2;}

<style>
	h1{
		color: skyblue;
		/*背景颜色*/
		background: wheat;
		/*边框圆角*/
		border-radius: 220px ;
	}
	p{
		color: #87ceeb;
		font-size:80px;
	}
</style>

2.1.2 类选择器

通过标签的class属性来选择一类标签的样式

类选择器的格式：

.类名{声明1;声明2;}

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.title1{
			color: cadetblue;
		}
		.title2{
			color: aqua;
		}
		.title3{
			color: cornflowerblue;
		}
	</style>
</head>
<body>
	<h1 class="title1">标题1</h1>
    <h1 class="title2">标题2</h1>
	<h1 class="title3">标题3</h1>
	<p class="title1"> 段落1应用标题1的样式</p>
</body>

使用类选择器的好处：

可以将多个标签归类，是同一个class，可以复用，可以跨标签使用

2.1.3 id选择器

id选择器是通过标签的id来进行选择，id是一个标签的唯一标识，id必须保证全局唯一

id选择器的格式:

#id名{声明1;声明2;}

<head>
	<meta charset="UTF-8">
	<title>id选择器</title>
	<style>
		#title1{
			color: darkslategray;
		}
	</style>
</head>
<body>
    <h1 id="title1">标题1</h1>
	<h1 id="title2">标题1</h1>
	<h1>标题1</h1>
	<h1>标题1</h1>
	<h1>标题1</h1>
</body>

2.2 高级选择器

层次选择器

属性选择器

2.2.1 通用选择器

所有属性都使用的样式

*{

}

2.2.2 伪类选择器

鼠标选中:focus

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

display

display:none隐藏元素且不会占用空间

visibility:hidden隐藏元素但是会占用空间

2.2.3 层次选择器

html文档的树形结构：

在这里插入图片描述

层次选择器就是根据文档树形结构的层次级别来进行选择

层次选择器分为：

后代选择器
子选择器
相邻兄弟选择器
通用选择器

后代选择器

后面每一代

后代选择器格式：

选择元素 选择元素的后代标签{
	声明1;
	声明2;
	...
}

/*后代选择器,选择body标签之后的所有p标签*/
body p{
	color: aliceblue;
}

子选择器

只有(相邻的)子代

子选择器格式:

选择元素>子代元素的标签{
	声明1;
	声明2;
	...
}

<html>
	<head>
		<style type="text/css">
			h1 > strong {
				color:red;
			}
		</style>
	</head>

	<body>
		<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
		<h1>This is <em>really <strong>very</strong></em> important.</h1>
	</body>
</html>

第一个h1的两个very都会变红

第二个h1的very不会变红

相邻兄弟选择器

与选择元素相邻，并且在下方的元素

格式：

选择元素+兄弟元素{
	声明1;
	声明2;
	...
}

/*选择与class=p1相邻兄弟的标签为p的元素*/
.p1+p{
	color: cadetblue;
}

通用选择器

选择标签之下的所有同级标签

通用选择器格式：

选择元素~下方同级元素{
	声明1;
	声明2;
	...
}

/*通用选择器，选择class=p1标签所有同级的p标签*/
.p1~p{
	color: cadetblue;
}

2.2.4 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

如果某个属性为空（比如class=“”），也是能选择上的，如果没有class这个属性，才不会被选择

格式：

标签[属性1][属性2][...]{
	声明1;
	声明2;
	...
}

正则表达式：

= 表示等值
*= 表示包含值
^= 表示以…开头
$= 表示以…结尾

/* 选择有id属性的a标签 */
a[id]{
	color: cadetblue;
}

/* 选择有id，target属性的a标签 */
a[id][target]{
	color: aqua;
}

/* 选择有class属性的所有标签 */
*[class]{
	color: blueviolet;
}

/* 选择class属性值为first和second的元素 */
*[class="first second"]{
	color: darkgoldenrod;
}

/* 选择class属性包含first值的元素 */
*[class*="first"]{
	color: darkmagenta;
}

/* 选择href属性www开头的标签 */
*[href^="www"]{
	color: dimgrey;
}

/* 选择href属性com结尾的标签 */
*[href$="com"]{
	color: black;
}