HTML入门（二）

Silenlay

已于 2022-02-06 22:36:47 修改

阅读量296

点赞数

分类专栏： HTML 文章标签： html css javascript

于 2022-02-06 21:12:08 首次发布

本文链接：https://blog.csdn.net/Silencelay/article/details/122800145

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. CSS概述

CSS（Cascading Style Sheets）层叠样式表，用于美化HTML

2. CSS基本使用

2.1 基本语法

选择器{
	属性：属性值；
}
h1{
	background-color:red;
}

2.2 基本使用

就近原则，越精准越优先

2.2.1 行内(内联)样式

直接写在标签上的样式，设置标签的style属性定义的样式

<h2 style="color: red;font-family: "bodoni mt";">Hello World</h2>

2.2.2 内部样式

定义在style标签内的样式，style标签一般设置在head标签内

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS层叠样式表</title>
		<style>
		/*CSS的注释内容*/
		h2{
			color: blue;
			font-family:"arial narrow";
			/*多个单词要用引号*/
		}
		</style>
	</head>
	<body>
		<h2 style="color: red;font-family:arial;">Hello World</h2>
		<h2>Hello World</h2>
	</body>
</html>

2.2.3 外部样式

定义在外部的CSS文件中，通过link标签引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS层叠样式表</title>
		<link rel="stylesheet" type="text/css" href="./css/1.css"/>
	</head>
	<body>
		<h2>Hello World</h2>
	</body>
</html>

3. CSS选择器

CSS样式的优先级：权重越大，优先级越高

选择器	权重
元素选择器	1
类选择器	10
id选择器	100
内联样式	1000

3.1 基本选择器

3.1.1 通用选择器

选择所有*

* {
	......
}
* {
	color:red;
}

3.1.2 元素选择器

选择指定标签

元素标签 {
	......
}
p {
	color:red;
}

3.1.3 ID选择器

选择设置过的指定id属性值的元素 #

#id属性值 {
	......
}
#p1 {
	font-weight: bold;
}

3.1.4 类选择器

选择设置过的指定class属性值的元素 .

.class属性值 {
	......
}
.hidden {
	display: none;
}

3.1.5 分组选择器

当几个元素样式属性一致时，可以共同调用一个生命，元素之间用逗号分隔

选择器1, 选择器2, ... {
	......
}
h2, #pre1 {
	color:red;
}

3.2 组合选择器

选择指定标签下的后辈元素，以空格分隔

选择器1 选择器2 {
	......
}
.food li {
	border: 1px solid red;
}

3.2.1 后代选择器（派生选择器）

选择指定元素的所有指定后代元素，空格隔开

/*空格隔开*/
选择器 指定元素 {
	......
}
.food li{
	border: 1px solid #aa00ff ;
}

<ul class="food">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>草莓</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>萝卜</li>
					<li>油菜</li>
				</ul>
			</li>
		</ul>

在这里插入图片描述

3.2.2 子元素选择器

选择指定元素的第一代子元素，大于号>隔开

/*大于号隔开*/
选择器 > 指定元素 {
	......
}
.food2 >li {
	border: 1px solid red;
}

<ul class="food2">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>草莓</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>萝卜</li>
					<li>油菜</li>
				</ul>
			</li>
		</ul>

在这里插入图片描述

3.2.3 相邻兄弟选择器

选择指定元素的下一个指定元素（只会找一个），以加号隔开

/*加号隔开*/
选择器 + 指定元素 {
	......
}
#mydiv + div{
	background-color: #AA00FF;
}

<div>相邻兄弟选择器1</div>
<div id="mydiv">相邻兄弟选择器2</div>
<div>相邻兄弟选择器3</div>
<div>相邻兄弟选择器4</div>

在这里插入图片描述

3.2.4 普通兄弟选择器

选择指定元素的所有指定元素，波浪号~隔开

/*波浪号隔开*/
选择器 ~ 指定元素 {
	......
}
#mydiv2 ~ div{
	background-color: #ffff7f;
}

在这里插入图片描述

4. CSS常用属性设置

4.1 背景

4.1.1 background-color

<!--背景颜色-->
body{
	background-color: black;
}

4.1.2 background-image

<!--背景图片-->
body{
	background-image: url('./img/1.png');
}

4.1.3 background-repeat

<!--重复背景图片-->
body{
	background-image: url('./img/1.png');
	background-repeat:repeat;
}

值	说明
repeat	默认值，垂直水平方向都重复
repeat-x	只有水平位置重复
repeat-y	只有竖直位置重复
no-repeat	不重复
inherit	指定属性设置继承父元素

4.2 文本

4.2.1 color

<!--文本颜色-->
body{
	color: blue;
}

4.2.2 text-align

<!--对齐方式-->
body{
	text-align: center;
}

4.2.3 text-decoration

值	说明
line-through	中划线
overline	上划线
underline	下划线
none	关闭所有修饰

<!--文本修饰-->
body{
	text-decoration: line-through overline underline
}

4.2.4 text-indent

<!--首行缩进-->
body{
	text-indent: 2em;
}

em是一个相对值，例如页面大小为17px，则2em为17px*2

4.3 字体

值	说明
font-family	字体
color	颜色
font-size	字体大小

4.4 对齐方式

text-align文本水平对齐方式

值	说明
left	默认值，左对齐
right	右对齐
center	居中对齐
justify	两端对齐
inherit	继承父元素

4.5 display属性

值	说明
none	隐藏元素
block	显示为块级元素，该元素前后会有换行符
inline	默认值，内联元素，前后没有换行符
inline-block	行内块元素
inline-item	列表显示

4.6 浮动

none，left，right

1.只有横向浮动，没有纵向浮动
2.会将元素的display属性变更为block
3.浮动元素的后一个元素会围绕着浮动元素（文字围绕图片）
4.浮动元素的前一个元素不会受到任何影响（两个块状元素并排显示：均应用float）

5. 盒子模型

在这里插入图片描述
默认：上右下左顺时针

设置1个值：上右下左都一致
设置2个值：上下一致，左右一致
设置3个值：上右下一致，左和右一致

5.1 border边框

属性	值	说明
border-width		宽度
border-style	dotted dashed solid double solid groove ridge inset3D嵌入边框 outset3D突出边框	样式
border-color		颜色
border-collapse	separate collapse	默认值,单元框独立单元框合并

5.2 padding内边距

控制文本到边框的距离，尽量不使用内边距，会压缩文本，使元素变形

5.3 margin外边距

auto：居中，自动计算外边距
注意：两个div嵌套时，只能左右居中，上下外边距重合无法实现居中效果，只能自行计算设置外边距

6. position定位

值	说明
static	默认值：没有定位
relative	相对于原始位置移动，不改变原始占据的空间
fixed	相对窗口为固定位置，即使滚动也不会移动，不占据空间，与其他元素重叠
absolute	绝对定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于页面，不占据空间，与其他元素重叠
sticky	粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。