Web前端基础回顾（HTML、CSS）

最新推荐文章于 2020-09-17 10:10:49 发布

酷酷的橙007

最新推荐文章于 2020-09-17 10:10:49 发布

阅读量343

点赞数

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

本文链接：https://blog.csdn.net/xiecheng1995/article/details/105673754

版权

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

Web开发

网页，交由浏览器运行的程序
组成：HTML CSS JavaScript
开发前准备：

编辑器：Vscode、Pycharm、Sublime、NotePad、EditPlus…
运行环境：浏览器 Chrome Firefox
调试工具：浏览器自带开发者工具

浏览器分类：

按照浏览器内核（引擎）：Chrome Firefox Safari IE/Edge Opera

HTML

超文本标记语言，通过标签/标记的形式书写网页结构并且填充内容
标签分类

双标签：<标签名>标签内容</标签名>
eg. <b></b>
单标签：<标签名> 只有开始，没有结束，允许手动添加‘/’表示闭合
eg. <img>或<img/>

语法规则
（1）标签不区分大小写，推荐全小写
（2）双标签如果少闭合，浏览器会自动添加闭合标签
（3）浏览器只能识别标签，如果写在html标签外部的内容，都不识别，会原样输出到窗口中
（4）浏览器会忽略代码中多余的换行和空格，一律解析为一个空格字符

<!--HTML大小写不敏感，推荐使用小写-->
<!--HTML5的文档类型声明-->
<!doctype html>
<!--文档开始，页面中所有内容都应该写在HTML标签中-->
<html>
	<!--文档头部，可以设置小图标，网页标题，显示在浏览器选项卡上；还可以引入资源文件，设置网页相关信息-->
	<head>
		<!--设置网页标题-->
		<title>我的第一个网页</title>
		<!--meta标签可以用于设置网页附加信息，网页编码类型，关键字，网页描述，开发人员信息等，借助于标签属性定义-->
		<meta charset="utf-8">
		<!--meta标签中添加name和content标签属性，设置网页附加信息，name属性固定取值，content自由设置-->
		<meta name="Generator" content="">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
	</head>
	<body>
		网页主体：所有给用户看的内容都应该写在body中，会渲染在浏览器窗口中
	</body>
</html>
<!--文档结束-->

常用标签介绍

段落
标题
普通文本
格式
列表标签
图片与超链接
表格

<!--标题，自带加粗效果，字号逐级减小-->
<h1 align="center">一级标题</h1> <!--align居中center-->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--允许自定义标签，自定义标签属性-->
<h7 aa="bb">自定义</h7>

<!--段落-->
<p>段落文本</p>

<!--普通文本-->
<span>span</span>
<label>label</label>
<b>bold加粗</b>
<br><!--break换行-->
<hr><!--水平分割线-->
<strong>strong加粗</strong>
<i>italic斜体</i>
<u>underline下划线</u>

<!--字符实体-->
&lt;--'<'
&gt;--'>'
&copy;--版权符号©
&yen;--人民币符号‘￥’
&nbsp;--空格

<!--容器标签-->
<div>导航栏</div>
<div>页面主体</div>
<div>页面底部</div>

<!--1.有序列表（ordered list），默认以阿拉伯数字标识列表项-->
<!--type属性用于设置列表的项目符号，有序列表默认使用数字，可以修改为'a','A','i','I'-->
<ol type="a">
	<li>list item1</li>
	<li>list item2</li>
</ol>

<!--2.无序列表（unordered list），默认以实心圆点标识列表项-->
<!--type可取circle（空心圆）,square（实心方块）,none（取消项目符号）-->
<ul type="XXX">
	<li>list item1</li>
	<li>list item2</li>
</ul>

<!--补充：网页下拉菜单使用列表嵌套实现，只能使用父子关系嵌套-->
<ul>
	<li>
		西游记
		<ol>
			<li>大师兄</li>
			<li>二师兄</li>
			<li>沙师弟</li>
			<li>唐僧</li>
		</ol>
	</li>
</ul>

<!--图片标签：使用src(source)属性设置图片路径，默认按照原始尺寸显示在网页中，可以手动调整图片尺寸-->
<!--标签属性书写在开始标签中，用于补充说明当前的标签内容或者修饰元素的样式，微元素添加额外的标识。标签属性由属性名和属性值组成，多个标签属性之间使用空格隔开-->
<!--设置宽高，缺省方向会等比例缩放-->
<img src="happy.jpg" width="300px"><!--等比例放大缩小-->
<img src="happy.jpg" width="300px" height="300px">
<!--title属性用于设置鼠标悬停在图片上时的显示文本-->
<!--alt属性用于设置图片加载失败时的提示文本-->

<!--用户可以点击超链接，跳转至其他的资源文件-->
<!--href属性必填，用于指定链接地址，网络路径必须写协议-->
<!--target属性选填，用于设置目标文件的打开方式，默认在当前窗口打开（_self），可以设置新建窗口打开（_blank）-->
<a href="04_img.html" target="_blank">图片文件</a>
<a href="http://www.baidu.com">百度</a>
<!--图片超链接-->
<a href="04_img.html">
	<img src="happy.gif">
</a>
<!--href的特殊取值-->
<!--空表示刷新-->
<a href=""></a>
<!--#表示锚点，链接至本页，不会造成刷新，修改URL-->
<a href="#"></a>
<!--javascript:void(0)阻止超链接默认的点击跳转功能，允许自定义点击事件-->
<a href="javascript:void(0)"></a>

<!--定义锚点，name属性设置锚点名称，自定义。锚点链接中，地址使用#（锚点的标志），跟上锚点名称-->
<a href="#5">点击跳转至页面指定位置</a>
<a name="5">跳转至此处</a>

<!--表格由结构化的行和单元格组成，用于数据的展示或辅助排版-->
<table border="1px" width="500px" height="500px">
	<!--table row创建行-->
	<tr>
		<!--th表示单元格，自带加粗和居中效果-->
		<th>姓名</th>
		<th>年龄</th>
		<th>班级</th>
	</tr>
	<tr>
		<td>老齐</td>
		<td>30</td>
		<td>001</td>
	</tr>
	<tr>
		<td>小泽</td>
		<td>32</td>
		<td>002</td>
	</tr>
</table>

<!--单元格合并，为单元格添加属性：
colspan:跨列合并
rowspan:跨行合并
取无单位的数值，表示包含自身在内合并几个单元格。
发生单元格合并，要删除被合并的单元格以保证结构完整。
-->
<table border="1px" width="300px" height="300px">
	<tr>
		<td colspan="2">示例</td>
		<!--删除被合并的单元格，保证表格结构完整-->
		<td>示例</td>
	</tr>
	<tr>
		<td>示例</td>
		<td rowspan="2">示例</td>
		<td>示例</td>
	</tr>
	<tr>
		<td>示例</td>
		<!--删除被合并的单元格，保证表格结构完整-->
		<td>示例</td>
	</tr>
</table>

<!--表格行分组：
可将表格中的若干行划分为一组，表示表头，表尾和表格主体
默认情况下，所有行都会自动添加到tbody（表格主体）中显示
-->
<table border="1px" width="300px" height="300px">
	<!--thead划分表头-->
	<thead>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
	</thead>
	<!--tfoot-->
	<tfoot>
		<tr>
			<td colspan="2">合计：</td>
		</tr>
	</tfoot>
	<!--tbody-->
	<tbody>
		<tr>
			<td>LQ</td>
			<td>30</td>
		</tr>
		<tr>
			<td>LQ</td>
			<td>30</td>
		</tr>
	</tbody>
</table>

表单

表单用于采集用户信息并且提交给服务器
组成：

表单元素（form）：负责提交数据
表单控件：采集信息

<!--form元素负责将表单数据按照指定的提交地址（action）和提交方式（method）发送给服务器-->
<!--1. 提交方式默认为get，将表单中的数据以参数的形式拼接在url后面（?key1=value1&key2=value2）-->
<!--2. post方式提交数据会将数据封装在请求体中传输，安全性更高；如果涉及二进制数据提交（图片，文件或音视频）只能使用post方式提交，并且设置数据的编码类型(enctype)为multipart/form-data-->
<form action="/login" method="get" enctype="">
	<!--表单控件用于采集用户信息，只能放在form中使用，数据才会被提交-->
	<!--type:必填，指定控件类型-->
	<!--name:必填，指定控件名称（key）-->
	<!--placeholder:设置提示文本-->
	<!--maxlength:设置最大输入字符数-->
	<!--readonly:不需要取值，设置输入框只读-->
	<!--value:设置控件的值（value）-->
	<!--checked:设置按钮默认选中-->
	<p>
		用户姓名：<input type="text" name="uname" placeholder="请输入用户名">
	</p>
	<p>
		用户密码：<input type="password" name="upwd">
	</p>
	<p>
		用户性别：
		<!--一组按钮的控件名称必须保持一致，按钮中必须设置value-->
		<input type="radio" name="gender" value="boy" checked="checked">男
		<input type="radio" name="gender" value="girl">女
	</p>
	<!--label for id 实现文本与控件的绑定-->
	<p>
		兴趣爱好：
		<input id="dance" type="checkbox" name="hobby" value="dance">
		<label for="dance">蹦迪</label>
		
		<input id="rap" type="checkbox" name="hobby" value="rap">
		<label for="rap">rap</label>
		
		<input id="spa" type="checkbox" name="hobby" value="spa" checked>
		<label for="spa">保健</label>
	</p>
	<!--文件选择框：二进制数据必须使用post方式并且修改编码类型-->
	<p>
		用户头像：
		<input type="file" name="uimg">
	</p>
	<!--隐藏域：发送当前页面的附加信息，对用户而言不可见，服务器必需的数据可以使用隐藏域提交-->
	<p>
		<input type="hidden" name="uid" value="001">
	</p>
	<!--下拉菜单-->
	<p>
		所在地址：
		<select name="city">
			<option value="bj">北京</option>
			<option value="sh">上海</option>
			<option value="gz">广州</option>
			<option value="sz">深圳</option>
		</select>
	</p>
	<p>
		个人介绍：
		<!--多行文本域：允许用户手动调整尺寸，支持多行输入-->
		<textarea name="uinfo"></textarea>
	</p>

	<!--功能按钮：提交，重置，普通按钮，可以使用value属性设置按钮的显示文本-->
	<!--提交按钮，点击时将数据发送服务器-->
	<p>
		<input type="submit" value="注册">
		<input type="reset" value="重置">
		<input type="button" value="点击">
	</p>
	<!--button 标签表示按钮，标签内容即为按钮的显示文本，书写在form中，等价于提交按钮；书写在form外，就是普通按钮，需自定义点击处理-->
	<button>form内</button>
</form>
<button>form外</button>

CSS

样式及选择器分类

层叠样式表，实现网页布局及元素样式的设置
使用方式

1）行内样式：

借助style标签属性，书写样式声明
样式代码：
css属性名：属性值；
常用属性：
font-size设置字体大小，取像素值，默认16px
color设置文本颜色，取颜色值
background-color设置背景颜色

例如：

<h1 style="color:red;background-color:green;">小泽</h1>

2）内嵌样式表

使用<style></style>书写样式代码，实现结构与样式的分离，使用选择器匹配文档中的元素并设置样式

选择器：根据标签名，属性值或层级结构查找对应元素

选择器{
	属性：值；
}

例如：标签选择器，根据标签名匹配元素

<style>
	h2{
		color:orange;
		font-size:32px;
	}
</style>

3）外链样式表

创建样式表文件（.css），使用选择器匹配元素应用样式。
在HTML文件中使用<link rel="stylesheet" href="XXX.css" type="text/css">

样式表特点
1）层叠性：多个样式共同作用于同一个元素
2）继承性：子元素可以继承父元素或祖先元素的文本样式
注：超链接的文本色需要自行设置
3）优先级：发生样式冲突时考虑优先级，优先级高用谁

优先级划分：

行内样式的优先级最高
选择器样式优先级一致，发生样式冲突时，看样式代码的书写顺序，后来者居上
浏览器默认样式和继承样式优先级最低

4. 选择器分类

标签选择器：根据标签名匹配元素，应用样式，如：h1{ }
id选择器：根据id属性值匹配唯一的元素

<style>
#d1{

}
</style>
<h1 id="d1"></h1>

类选择器：根据class属性值匹配元素，允许重复使用类名，实现样式的复用
特殊：
【1】class属性可以设置多个值，使用空格隔开。如：class=“c1 c2 c3”
【2】选择器可以组合使用，常见：标签选择器与类选择器组合使用。如：p.c1{ }

<style>
.c1{
	
}
.c2{
	/*设置文本的水平对齐方式，默认居左*/
	text-align:center;
}
/*选择器组合使用*/
p.c1{/*匹配类名为c1的p元素*/

}
</style>
<h1 class="c1 c2">示例文本</h1><!--对应多个类选择器-->
<p class="c2">示例文本</p>

群组选择器：为一组元素统一设置样式
selector1,selector2{ }

<style>
#d1,.c2,p{
	font-size:20px;
}
</style>

后代选择器：在选择器1中查找所有满足选择器2的后代元素
selector1 selector2{ }
子选择器：在选择器1中查找所有满足选择器2的直接子元素
selector1>selector2{ }
伪类选择器：伪类用于表示元素的某种状态，必须和基础选择器结合使用
分类：
（1）超链接伪类选择器
:link 访问前
:visited 访问后
补充：a{text-decoration:none; /*取消超链接默认下划线*/}
（2）动态伪类
:hover 鼠标滑过（悬停）
:active 鼠标点按（激活）
（3）表单控件状态
:focus 输入框的焦点状态

input:focus{
	/*取消输入框在焦点状态下的轮廓线*/
	outline:none;
}

（4）子元素过滤选择器
:last-child：匹配最后一个子元素
:first-child：匹配第一个子元素
:nth-child(n)：匹配第n个子元素

选择器的优先级

相同类型的选择器发生样式冲突，后来者居上
不同类型的选择器发生样式冲突，看权重，权重越高，优先级越高
标签选择器 1
类/伪类 10
id选择器 100
后代选择器，子代选择器的权重由各个选择器的权重累加计算
#box span{} /*100+1*/
#box>h1.c1{} /*100+1+10*/
群组选择器的权重由各个选择器单独计算

标签分类及嵌套

标签分类

块元素（h1~h6、p、div、ul、ol、li、form、table、body）
- 独占一行，不与其他元素共行
- 可以手动设置宽高
- 默认情况下宽度与父元素保持一致
行内元素（a、b、strong、label、span）
- 允许共行显示，不能手动调整宽高。尺寸由内容决定
行内块元素（input、img、button）
- 既能共行显示，又可以设置宽高

注：行内元素与行内块元素默认按照文本的基础线对齐，可以设置vertical-align设置元素之间的垂直对齐方式，取top/middle/bottom添加给行内块元素上，调整左右元素与当前元素的垂直对齐。

标签嵌套

块元素中可以嵌套任意类型的标签
注意：p标签中只能嵌套行内或者行内块元素，不能嵌套块元素
行内元素中尽量只嵌套行内或行内块元素

尺寸及颜色表示

尺寸单位
px：默认单位，指定像素值
%：百分比，参照父元素对应属性值进行计算
em：相对单位，表示字体大小，参照父元素的字体大小进行计算。默认1em = 16px
rem：参照根元素的字体大小计算
颜色表示
1）英文单词
2）rgb(r,g,b)使用三原色设置颜色，每种颜色取值0~255，值越大越饱和
3）rgba(r,g,b,alpha)使用三原色设置，并且可以设置透明度，alpha取值0（透明）~1（不透明），取小数设置半透明。特殊值：rgb(0,0,0) 黑；rgb(255,255,255) 白；rgb(0,0,0,0) 透明色，最后一项是0即可（transparent也是透明的意思）
4）十六进制表示颜色
十六进制以#为前缀，每两位为一组代表一种三原色，三原色取值0~255，转换十六进制00 ~ff。十六进制中每位字符的取值范围：0 ~ 9，a ~ f
特殊值：#000000 黑 #ffffff 白
短十六进制：由三位组成，代表三原色。浏览器会自动对每一位进行重复，补全成6位十六进制
#000 --> #000000
#fff --> #ffffff
#0f0 --> #00ff00

盒模型

元素是由各种框组成的（内容框、边框、边距），为元素设置尺寸，边框和边距，会影响元素在文档中的实际尺寸，影响布局
内容框设置
1）大部分元素在设置weight/height时，指定的就是内容框大小（button设置的是加border及其内部的大小）
2）内容溢出：元素内容超出元素设置的尺寸，可以使用属性overflow处理溢出
overflow：visible（默认值，溢出可见）；hidden（隐藏，类似于裁剪）；scroll（强制在水平和垂直方向加可用的滚动条）；auto（自动在发生溢出的方向添加可用的滚动条）
边框设置
1）边框设置
border: width style color;
边框样式（border-style）可取：solid 实线； dotted 点线； dashed 虚线； double 双线
2）单边框设置
border-top 上边框/border-bottom 下边框/border-left 左边框/border-right 右边框
取值: width style color;
3）网页三角标制作
- 设置宽高为0
- 统一设置四个方向透明边框
- 调整某个方向边框可见

特殊：行内元素拼接三角标时，默认不能手动调宽高，自带高度（由字体大小决定），可以设置font-size:0；或者去掉默认高度；或者转换元素类型，转换成块元素/行内块元素设置尺寸为0。

转换元素类型：

属性display
取值：block（块元素）、inline（行内元素）、inline-block（行内块元素）、none（元素隐藏）

4）轮廓线：轮廓线在文档中不占位，边框是实际占位的。
outline：width style color；
常用：outline:none(取消文本框焦点状态下的边框)

5）边框圆角
属性：border-radius设置圆角半径
取值：像素值/百分比（分别按照元素的宽高t计算取值）
使用：常用像素值设置四个角的圆角效果；使用50%调整元素的显示形状（正圆或椭圆）

6）盒阴影
属性：box-shadow
取值：offsetX offsetY blur（speed）color
网页坐标系：一律以左上角为原点，向右向下分别为X轴和Y轴的正方向
属性值：
offsetX/offsetY：设置阴影的偏移距离
blur：设置阴影的模糊程度，取像素值，越大越模糊
spread：选填，设置阴影的延伸距离
color：设置阴影颜色，默认为黑色

内边距设置
设置内容框与边框之间的距离
属性：padding
取值：像素值
取值规律：
1）50px 统一设置四个方向的内边距
2）50px 20px 分别设置上下左右的内边距
3）10px 20px 30px 分别设置上、右、下，缺省方向与右侧内边距保持一致
4）10px 20px 30px 40 px 分别设置上、右、下、左四个方向的内边距
单方向内边距设置：只能取一个值
padding-top、padding-right、padding-bottom、padding-left
取消默认内边距：padding:0
外边距设置
设置元素与元素之间的距离
属性：margin
取值：像素值，取值规律同padding
特殊取值：
1）设置左右自动外边距（auto），实现元素在父元素范围内水平居中
2）取负值，元素位置的微调
单方向外边距设置：margin-top、margin-right、margin-bottom、margin-left
外边距合并：

1）垂直方向

第一个子元素设置的margin-top，作用于父元素上。可以为父元素设置顶部边框或者添加padding-top:0.1px
同时为元素设置上下边距，元素之间最终选用最大的边距值

2）水平方向
- 行内元素对盒模型属性部分支持，不支持width/height设置，不支持上下边距
- 水平方向上外边距会叠加显示

具有默认外边距的元素：

body、h1~ h6、p、ul、ol{
	margin:0;
	padding:0;
	/*取消列表的项目符号*/
	list-style:none;
}

元素在文档中实际尺寸的计算
属性：box-sizing
取值：

content-box：
- 为元素设置的width/height指定的是内容框的大小
- 计算尺寸：各个属性值累加计算（width/height+border+padding+margin）
border-box:
- 为元素设置的width/height指定的是包含边框在内区域的大小
- 计算尺寸：width/height+margin

作业：
参考导航栏，父元素固定500宽，实现在body中居中；5个子元素（导航项）之间设置10px的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        a{
            text-decoration: none;
            color: #ffffff;
            display: inline-block;
            width: 92px;
            height: 50px;
            margin-right: 10px;
            /* background: green; */
            font-size: 20px;
            text-align: center;
            /* 一行文本在当前行中永远是垂直居中，可以手动设置行高跟元素高度保持一致，实现一行文本在元素中的垂直居中效果 */
            line-height: 50px
        }
        a:hover{
            background: green; 
        }
        #nav{
           background: orange;
           width: 500px; 
           height: 50px;
           /* 父元素字体大小为0,解决水平方向上由于代码换行导致的子元素之间出现的空隙,子元素需要手动调整可见字体大小 */
           font-size: 0px;
           margin: 0 auto;
        }
        .no-margin{
            margin: 0
        }
    </style>
</head>
<body>
    <div id="nav">
        <a href="">淘宝</a>
        <a href="">淘宝</a>
        <a href="">淘宝</a>
        <a href="">淘宝</a>
        <a href="" class="no-margin">淘宝</a>
    </div>
</body>
</html>

布局方式

静态流/文档流布局
根据元素类型和代码的书写顺序，从上到下，从左到右依次显示
浮动布局
属性：float
取值：left / right
特点：
1）浮动元素会从它在文档中的原始位置脱离文档流，“悬浮”在父元素的上方，按照浮动方向一次停靠在前一个元素的边缘。
2）元素脱流之后，在文档中不占位，可以手动设置宽高
3）“文字”环绕效果：浮动元素会遮挡正常元素的位置，但是不影响内容显示，正常内容会围绕在浮动元素周围显示
问题：
1）浮动元素不占位，后面正常的元素会向前占位
解决：清除浮动
属性：clear
取值：left / right / both
使用：添加在正常元素上，使其不受前面浮动元素的影响

2）子元素全部浮动，造成父元素高度为0，影响父元素自身背景或边框样式的显示，影响整体布局
解决方式一：给父元素固定高度（适用于内容确定的元素。例如：导航栏）
解决方式二：给父元素设置overflow：hidden（适用于内容不确定，需要动态加载的元素。例如：页面主体）
解决方式三：父元素末尾添加空的块元素，设置clear：both
定位布局
1）定位用于实现元素显示位置的调整
2）属性：position
取值：relative / absolute / fixed
使用：元素设置position属性之后，才能称为已定位的元素，已定位的元素可以结合偏移属性调整显示位置
3）偏移属性：top（设置距离参照物顶部的偏移量） left bottom right
4）分类

相对定位（relative）：设置相对定位的元素会参照它在文档中的原始位置偏移，不会脱离文档流。
绝对定位（absolute）：设置绝对定位的元素会参照离它最近的已定位的祖先元素进行偏移，没有的话最终参考窗口的（0,0）点偏移；会脱离文档流（不占位，可以手动调宽高）
使用：父元素设置相对定位，子元素设置绝对定位。
固定定位（fixed）：设置固定定位的元素会参考浏览器窗口进行偏移，不会跟随页面滚动而滚动，会脱离文档流。常见于聊天窗口，博客的目录或广告。
eg. 模拟右下角的固定广告

#chat{
	width:300px;
	height:300px;
	background:green;
	position:fixed; /*固定定位*/
	right:0; /*居浏览器右为0*/
	bottom:0; /*居浏览器下为0*/
}

5）堆叠次序调整：

已定位的元素与文档中正常元素发生堆叠，已定位元素在上方显示。
同为已定位元素发生堆叠，看标签的书写顺序，后来者居上
可以使用z-index属性调整已定位元素的堆叠次序，取无单位的数值，值越大，越靠上

背景属性

设置背景颜色：background-color:pink
背景图片相关
1）background-image:url(“XXX.jpg”)：设置背景图片
2）background-repeat：设置背景图片的重复方式
默认：元素尺寸 > 背景图的尺寸时，浏览器会自动重复平铺，直至铺满元素；元素尺寸 < 背景图的尺寸时，背景图默认从元素的左上角显示，超出部分不可见。
调整背景图的重复方式：
repeat默认值：沿水平和垂直两个方向重复平铺
repeat-x：沿水平方向重复平铺
repeat-y：沿垂直方向重复平铺
no-repeat：不重复
3）background-position: x y;
设置背景图片显示位置
取值方式：

取像素值，在元素坐标系中设置背景图片的起始坐标
取方位值
- 水平：left / center / right
- 垂直：top / center / bottom
- 默认缺省方向的值为center
百分比：x% y%计算背景图片的起始坐标：（元素尺寸-图片尺寸）*x%
特殊值：0% 0% --> left top; 50% 50% --> center; 100% 100% --> right bottom
4）background-size: width height;
设置背景图片的尺寸
取像素值，百分比或关键字：
像素值，直接指定宽高，只给一个值表示设置宽，高度会等比例缩放
百分比，根据元素尺寸计算背景图的尺寸
关键字：
- cover覆盖，背景图片等比拉伸至足够大完全覆盖元素，超出部分不可见
- contain包含，等比拉伸至刚好被元素容纳
5）简写属性：
background: color url() repeat position;
背景图片的尺寸，background-size需要单独设置

div{
	width:500px;
	height:500px;
	background-color:pink;
	background-image:url("xxx.jpg");
	background-repeat:no-repeat;
	background-position:100px 100px;
}

CSS文本属性

字体相关
1）font-size
2）font-weight：设置字体的粗细程度，取bold / normal；或者取整百数值表示粗细程度100 ~ 900，400等价于normal，700等价于bold
3）font-style：设置斜体，取italic
4）font-family：设置字体名称。如果字体名称为中文或出现空格，必须使用引号；可以取多个值设置备用字体，属性值之间使用逗号隔开。
5）简写属性：
font：style weight size family；
注意：简写属性中，size和family是必填项
文本相关
1）color
2）text-decoration：设置文本装饰线，可取：underline 下划线、overline 上划线、line-through 删除线、none 取消装饰线
注意：装饰线紧贴文本显示，颜色与文本色一致
3）text-align：设置文本的水平对齐方式，默认居左。可取：left/center/right/justify(两端对齐)
4）line-height：设置行高，文本在当前行中一定是垂直居中。可以设置行高根元素高度保持一致，实现一行文本在元素中的垂直居中效果。可以取像素值或无单位的数值（表示字体大小的倍数，以此计算行高）。

酷酷的橙007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端基础回顾（HTML、CSS）

目录前言（前端介绍）Web开发HTML常用标签介绍前言（前端介绍）Web开发网页，交由浏览器运行的程序组成：HTML CSS JavaScript开发前准备：编辑器：Vscode、Pycharm、Sublime、NotePad、EditPlus…运行环境：浏览器 Chrome Firefox调试工具：浏览器自带开发者工具浏览器分类：按照浏览器内核（引擎）：Chrome F...
复制链接

扫一扫

专栏目录