前端的学习-CSS（四）

银杏也要学习代码

已于 2024-07-25 21:47:59 修改

阅读量635

点赞数 22

文章标签：前端学习 css

于 2024-07-25 21:46:48 首次发布

本文链接：https://blog.csdn.net/m0_68823256/article/details/140699909

版权

一：CSS 的元素显示模式

HTML 元素一般分为块元素、行内元素、行内块元素三种类型。

1：块元素

常见的块元素有<div>,<h1>~<h6>,<p>,<ul>,<ol>,<li>等标签。

块级元素的特点：

1：比较霸道，自己独占一行。

2：高度，宽度、外边距以及内边距都可以控制。

3：宽度默认是容器（父级宽度）的100%。

4：是一个容器及盒子，里面可以放行内或者块级元素。

注意：文字类的元素内不能使用块级元素。如<p>标签里面主要用于方文字，不能放<div>类的块元素。

2：行内元素

常见的行内元素有<a>,<span>,<i>,<strong>,<sup>,<sub>,<del>等标签。

行内元素的特点：

1：相邻行内元素在一行上，一行可以显示多个。

2：高、宽直接设置是无效的。

3：默认宽度就是它本身内容的宽度。

4：行内元素只能容纳文本或其他行内元素。

3：行内块元素

常见的行内快标签有<img>,<inpput>,<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

1：和相邻行内元素或行内块元素在一行上，但他们之间会有空白缝隙。一行可以显示多个元素（这是行内元素特点）。

2：默认宽度就是它本身内容的宽度（这是行内元素特点）。

3：高度，行高、外边距以及内边距都可以控制（这是块级元素特点）。

二：CSS 的背景

1：背景颜色

background-color 属性定义了元素的背景颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			div{
				width: 180px;
				height: 180px;
				background-color: aqua;

			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		
	</body>
</html>

默认情况下，背景颜色为透明，background-color: transparent 。

2：背景图片

background-image 属性描述了元素的背景图像。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			div{
				width: 180px;
				height: 180px;
				background-image: url("url");

			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		
	</body>
</html>

url('URL')：指向图片的路径。

none：默认值。

3：背景平铺

background-repeat 属性描述了元素的背景图像进行平铺。

background-repeat: no-repeat;

值：

repeat：默认。背景图像将在垂直方向和水平方向重复。

repeat-x：背景图像将在水平方向重复。

repeat-y：背景图像将在垂直方向重复。

no-repeat：背景图像将仅显示一次。

inherit：规定应该从父元素继承 background-repeat 属性的设置。

4：背景图片位置

background-position 属性可以改变图片在背景中的位置。

background-position: x y;

x,y为位置，可以为center。

5：背景图片大小

background-size: cover;

length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

6：背景色半透明

background: rgba(0, 0, 0, 0.3);设置透明度，RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）。

R：红色值。正整数（0~255）

G：绿色值。正整数（0~255）

B：蓝色值。正整数（0~255）

A：透明度。取值0~1之间

background: rgba(132, 56 ,56, 0.1);

opacity设置透明度。

opacity: 0.5;

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度; 而rgba()只作用于元素的颜色或其背景色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			.div1{
				width: 180px;
				height: 180px;
				background: rgba(132, 56 ,56, 0.1);
				font-size: 20px;
			}
			.div2{
				width: 180px;
				height: 180px;
				opacity: 0.3;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			hello1
		</div>
		<div class="div2">
			hello2
		</div>
		
	</body>
</html>

7： CSS的三大特性

1：层叠性

谓层叠性是指多种CSS样式的叠加。

这是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

样式不冲突：不会层叠

2：继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			div{
				width: 120px;
				height: 120px;
				background-color: red;
				color: green;
			}
		</style>
	</head>
	<body>
		<div>
			<p>hello</p>
		</div>
	</body>
</html>

3：优先级

当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行。

可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为 10， id选择器 100，行内样式表为 1000，!important 无穷大。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

	
.div2 p{
	background-color: red;
	color: green;
}

如上面，优先级为：类选择器的优先级为10，标签选择器的优先级为1，加起来为11

4：CSS的注释

注释用于解释代码。CSS 中的注释以“ /* ”开头，以“ */ ”结尾。 /* 需要注释的内容 */

/* color: green; */

银杏也要学习代码

关注

22
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
前端的学习-CSS（四）

前端CSS基础
复制链接

扫一扫