CSS总结

花落随风轻飘舞

已于 2024-01-26 15:44:00 修改

阅读量564

点赞数 27

分类专栏： JavaWeb 文章标签： css 前端

于 2024-01-26 15:07:30 首次发布

本文链接：https://blog.csdn.net/zjs246813/article/details/135859970

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括其与HTML的结合方式（内联样式、内部样式表和外部文件）、选择器（标签名、ID、类和其他），以及常用的样式如文本样式、盒子模型、表格、列表、display和visibility控制、定位和overflow属性。

摘要由CSDN通过智能技术生成

1 CSS介绍

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言
在这里插入图片描述

2 CSS和HTML的结合方式

2.1通过标签的style属性

在标签的style属性上设置"key:value value;"，修改标签样式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>
	<!--分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
		<div style="border: 1px solid red;">div 标签 1</div>
		<div style="border: 1px solid red;">div 标签 2</div>
		<span style="border: 1px solid red;">span 标签 1</span>
		<span style="border: 1px solid red;">span 标签 2</span>
	</body>
</html>

在这里插入图片描述

2.2 通过在head标签中定义style

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式
格式如下：

<style type="text/css">
	xxx {
		Key : value value;
	}
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<!--style 标签专门用来定义 css 样式代码-->
		<style type="text/css">
			/* 分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/
			div {
				border: 1px solid red;
			}
			span {
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>div 标签 1</div>
		<div>div 标签 2</div>
		<span>span 标签 1</span>
		<span>span 标签 2</span>
	</body>
</html>

在这里插入图片描述

2.3 通过css文件

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入
使用 html 的 <link rel=“stylesheet” type=“text/css” href=“./styles.css” /> 导入 css 样式文件。

定义styles.css文件

div {
	border: 1px solid yellow;
}

span {
	border: 1px solid red;
}

定义HTML文件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<!--link 标签专门用来引入 css 样式代码-->
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<div>div 标签 1</div>
		<div>div 标签 2</div>
		<span>span 标签 1</span>
		<span>span 标签 2</span>
	</body>
</html>

在这里插入图片描述

3 CSS选择器

3.1 标签名选择器、id选择器、class选择器

标签名选择器的格式是：

标签名 {
	属性1: 值1;
	...
	属性n: 值n;
}

id选择器的格式是：

#id 属性值 {
	属性1: 值1;
	...
	属性n: 值n;
}

class选择器的格式是：

.class 属性值 {
	属性1: 值1;
	...
	属性n: 值n;
}

根据标签名定义 css 样式修改字体颜色为绿色，字体大小 20 个像素，边框为 1 像素紫色实线
根据 id 属性定义 css 样式修改字体颜色为蓝色，字体大小 30 个像素，边框为 1 像素黄色实线
根据 class 属性定义 css 样式修改字体颜色为灰色，字体大小 26 个像素，边框为 1 像素红色实线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			/*标签名选择器*/
			span {
				color: green;
				font-size: 20px;
				border: 1px purple solid;
			}
			/*id选择器*/
			#id1 {
				color: blue;
				font-size: 30px;
				border: 1px yellow solid;
			}
			/*class选择器*/
			.class1 {
				color: grey;
				font-size: 26px;
				border: 1px red solid;
			}
		</style>
	</head>
	<body>
		<div><span>div 标签 1</span></div>
		<div id="id1">div 标签 2</div>
		<div class="class1">div 标签 3</div>
	</body>
</html>

在这里插入图片描述

3.2 其他选择器

选择器	例子	说明
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
*	*	选择所有元素。
element.class	p.intro	选择 class=“intro” 的所有 <p> 元素。
element,element	div, p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内的所有 <p> 元素。
element>element	div > p	选择父元素是 <div> 的所有 <p> 元素。
element+element	div + p	选择紧跟 <div> 元素的首个<p> 元素。
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target=“_blank” 属性的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 “en” 开头的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 src 属性值以 “https” 开头的每个 <a> 元素。
[attribute$=value]	a[href$=“.pdf”]	选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。
[attribute*=value]	a[href*=“abc”]	选择其 href 属性值中包含 “abc” 子串的每个 <a> 元素。

修改id="div1"的所有id="span1"和id="div1"的所有class="class1"的CSS样式，id值一般不允许重复，class值可以重复

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style type="text/css">
			#div1 #span1 {
				color: yellow;
				font-size: 20px;
				border: 1px solid red;
			}
			#div1 .class1 {
				color: green;
				font-size: 25px;
				border: 1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<span id="span1">span 标签 1</span>
			<span id="span2" class="class1">span 标签 2</span>
		</div>
	</body>
</html>

在这里插入图片描述

3.3 CSS选择器优先级

css选择器优先级的算法规则：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高

每个规则对应一个初始"四位数"：0、0、0、0
若是行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1

css选择器优先级最高到最低顺序为：

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
子选择器（ul < li）
后代选择器（li a）
伪类选择器（a:hover,li:nth-child）

4 CSS常用样式

4.1文本样式

字体颜色
color：red；
颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

字体类型
font-family: “宋体”;

字体样式
font-size：20px; 字体大小

文本对齐方式
text-align可以设置左对齐 left、右对齐 right、居中center，如居中可设置 text-align: center;

超链接去下划线
text-decoration: none;

4.2 盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。
在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(填充，内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

宽度
width:19px;
宽度可以写像素值：19px；
也可以写百分比值：20%；

高度
height:20px;
高度可以写像素值：19px；
也可以写百分比值：20%；

背景颜色
background-color:#0F2D4C

边框
border：1px solid red; 边框大小边框类型（默认为none，solid实线）颜色

居中
margin-left: auto;
margin-right: auto;

4.3 表格和列表

表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {
border: 1px solid black; /设置边框/
}

列表去除修饰
ul {
list-style: none;
}

4.4 display和visibility

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

此外，display: inline可以把元素显示为内联元素，display: block可以把元素显示为块元素

4.5 位置position

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性

positon属性有以下五个值：

static，HTML 元素的默认值，即没有定位，不受到 top、 bottom、left、 right的影响
fixed，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，即它的位置固定不动
relative，相对定位元素的定位是相对其正常位置（不设置style默认显示的位置），也就是说如果设置了relative，再设置 top、 bottom、left、 right其定位是相对于其正常位置，如设置left: -50px;则元素相对其正常位置向左移动50px
absolute，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
sticky，sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是浏览器的可视窗口），必须添加 top 、left、right、bottom 其中一个才有效，父元素高度没子元素高及父元素设置了 overflow 属性会使粘性定位失效

#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

position: fixed
下图“Some more text"固定不动
在这里插入图片描述

positon: sticky
在这里插入图片描述

4.6 overflow

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

设置overflow: visible
在这里插入图片描述
设置overflow: hidden

设置overflow: scroll

设置overflow: auto

花落随风轻飘舞

关注

27
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
CSS总结

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式xxx {--style 标签专门用来定义 css 样式代码-->/* 分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
复制链接

扫一扫