CSS层叠样式表-13

最新推荐文章于 2024-04-19 15:58:50 发布

不吃肉的小胖

最新推荐文章于 2024-04-19 15:58:50 发布

阅读量148

点赞数

分类专栏： html 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_59074037/article/details/125991502

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS层叠样式表

一、CSS入门使用

网页三要素：

HTML 决定了网页中的内容

CSS 决定了网页中视图的显示效果

JavaScript 决定了视图的功能及动态效果

在这里插入图片描述

1.1 样式

在几乎所有的HTML标签中都可以添加style属性，在style属性中可以添加键值对来设置当前标签的外观，这些键值对（样式属性）就称为样式

<label style="color:red ; font-size:15px">千锋武汉Java2208</label>
<div style="">
    
</div>

1.2 样式表

如果在一个网页中有多个HTML标签需要使用相同的样式，一般我们不在style属性定义样式，我们将多个HTML标签使用的共同样式定义在head标签中的style标签中；定义在style标签中的样式列表——样式表，在一个style标签中可以定义多个样式表。

style属性后的样式属性列表也是一个样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* . 表示class选择器 ：此处定义的样式对网页中 class="mystyle" 的HTML标签有效果  */
			.mystyle{ width: 300px;  height: 30px;}
			.btnStyle{ width: 300px; height: 35px ; background: deepskyblue; color: white;}
		</style>
	</head>
	<body>
		
		<input class="mystyle"/> <br/>
		<input class="mystyle"/><br/>
		<input class="mystyle"/><br/>
		<input class="mystyle"/><br/>
		<input class="mystyle"/><br/>
		
		<input type="button" class="btnStyle" value="测试按钮1"/><br/>
		<input type="button" class="btnStyle" value="测试按钮2"/><br/>
		<input type="button" class="btnStyle" value="测试按钮3"/><br/>
		
	</body>
</html>

1.3 层叠样式表

在一个HTML标签上可以使用多个样式表，多个样式表的效果会叠加显示在这个HTML标签上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.style1{
				width: 200px;
				height: 200px;
				border: 1px solid blue;
			}
			.style2{
				width: 400px;
				background: orangered;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="style1 style2"></div>
	</body>
</html>

1.4 CSS选择器

class选择器 .styleName{...} 表示对网页中class="styleName"的标签有效
id选择器 #id{...} 表示对网页中id="id"的标签有效
标签选择器 tagName{...} 表示对网页中的所有tagName标签有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- CSS选择器 -->
		<style type="text/css">
			/* class选择器(.) : .style1 表示此样式表对网页中所有 class属性值位 style1的标签有效 */
			.style1{
				width: 400px;
				height: 100px;
				border: 1px solid red;
			}
			
			/* 标签选择器 ： body 表示此样式表对网页中body标签有效 */
			body{
				padding: 0px;
				margin: 0px;
			}
			
			/* id选择器(#)： #div2  表示此样式对网页中id="div2"的HTML标签有效 */
			#div2{
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		
		<div class="style1"></div>
		
		<div id="div2"></div>
		
		<div class="style1"></div>
		
	</body>
</html>

1.5 样式文件

我们可以将网页中使用的样式表单独定义在后缀名为.css的文件中，以达到简化HTML网页、CSS样式表重用的目的。后缀名为.css的文件即为样式文件。

在这里插入图片描述

二、常见的CSS样式

2.1 CSS盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F2KdP2YP-1658806435711)(imgs/image-20220721143714145.png)]

2.2 尺寸样式

/*宽度:取值可以是百分比，也可以是具体的像素*/
width: 200px

/*高度*/
height: 200px

2.3 边框样式

.boderStyle{
    /* 边框宽度，边框颜色(颜色名|色号|rgb())，边框样式(solid，dotted，dashed，double) */
    /* border:4px rgb(8,90,239,1) double; */
    border-top: 1px red solid;
    border-bottom: 4px green double;
    border-left: 1px blue dotted;
    border-right: 1px purple dashed;

    border-radius: 0px  50px 100px 200px;  	/* 1个值  表示同时设置四个角 */
    /* 2个值  表示分别设置左上右下  和  左下右上 */
    /* 4个值  表示从左上角顺时针设置四个圆角 */
}

2.4 背景样式

.bgStyle{
    /* background 设置背景颜色 */
    /* background: rgb(255,200,177,0.7); */

    /* 设置背景图片：如果图片太大，则裁剪图片作为背景； 如果图片太小则进行平铺 */
    background: url(imgs/img02.png);
}

2.5 外边距

/* 1个值，表示同时上、下、左、右四边的外边距 */
/* 2个值，表示分别设置上下、左右的外边距 */
/* 4个值，表示分别设置上、右、下、左四边的外边距 */
margin: 10px 30px 50px 100px;

/* margin-left: 30px;
margin-top: 30px;
margin-right:30px
margin-bottom:30px*/

2.6 内边距

/* 内边距：设置容器的内边距，表示凡是放在此容器中的元素都要与容器边框保持距离 */
/* 设置内边距，会增加容器的总体宽尺寸  总体宽度 = width + padding-left + padding-right */
padding: 30px 0px;
/* padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px; */

2.7 字体样式

color:deepskyblue;  	/* 设置字体颜色 */
font-size: 40px; 		/* 设置字体大小 */
font-family: "华文行楷";	/* 设置字体名称 */
font-weight: bold;		/* 字体加粗 */

2.8 文本样式

text-align: center; /* 对容器进行设置：设置文本在容器中的水平位置(left|center|right) */
text-decoration: none; /* 设置文本装饰: underline   oveeline  line-througth  none */
text-shadow: 3px 3px 5px red; /* 设置文本阴影 */