Web前端-CSS

最新推荐文章于 2024-08-03 20:32:29 发布

在乎且叭叭

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量200

点赞数

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

本文链接：https://blog.csdn.net/weixin_46051964/article/details/126788244

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基本概念，包括内联定义样式（通过div和style标签修改）、选择器的应用（id、类选择器），以及常用的display、字体、文本装饰和浮动样式。通过实例演示了如何使用CSS来美化HTML页面。

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

1 CSS概述

CSS: Cascading Style Sheet (层叠样式表语言)。
CSS是一种样式表语言。专门用来修饰HTML页面的。让HTML页面更好看。
CSS是HTML的化妆品。CSS是离不开HTML的, CSS离开了HTML就没有意义了。
所以还是新建HTML文件,编写HTML代码,在HTML代码当中编写样式，修饰HTML节点。

2 内联定义样式

2.1 第一种方式

div中对style进行修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入CSS的第一种方式</title>
	</head>
	<body>
		<div style="width: 200px;height: 200px; background-color: chartreuse;">
			
		</div>
	</body>
</html>

2.2 第二种方式

在head标签里使用style标签来修改样式

定义内部样式块对象

设置某个元素的样式，首先你需要选中这个元素，怎么选中一个或者多个元素呢?
常见的选择元素的方式有三种: ( 这里说的是常见的)
id选择器：优先级最高 标签选择器：优先级最低 类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入CSS的第二种方式</title>
		
		<!-- 样式块对象 -->
		<style type="text/css">
			/* 这是css的注释 */
			/*设置mydiv元素的宽度高度和背景颜色*/
			/* id选择器的使用 */
			#mydiv{
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			
			/* 标签选择器 */
			input{
				width: 300px;
				height: 30px;
				border-color: bisque;
				border-style: solid;
				border-width: 1px;
			}
			/* id选择器优先级高于标签选择器 */
			#email{
				width: 600px;
				height: 10px;
				border-color: coral;
			}
			/* 类选择器 */
			.student{
				width: 100px;
				height: 50px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="mydiv"></div>
		用户名：<input type="text" name="username" /><br>
		密码:<input type="password" name="password" />
		<hr >
		邮箱：<input type="text" name="email" id="email" />
		<hr >
		<br>
		<input type="text" class="student"/><br>
		<input type="text" class="student"/>
		<div class="student"></div>
	</body>
</html>

2.3 第三种方式

引入外部独立的CSS样式表文件，单独创建一个css文件专门写样式内容

演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引入外部独立的CSS样式表文件</title>
		<link rel="stylesheet" type="text/css" href="css/my.css"/>
	</head>
	<body>
		<div id="mydiv1">
			
		</div>
		<div id="mydiv2">
			
		</div>
	</body>
</html>

css文件：

#mydiv1{
	width: 200px;
	height: 200px;
	background-color: #0000FF;
	position: absolute;
	/* 绝对定位的时候只要设置x轴和y轴的坐标即可 */
	top: 100px;
	left: 100px;
}

#mydiv2{
	width: 200px;
	height: 200px;
	background-color: chartreuse;
	position: absolute;
	/* 绝对定位的时候只要设置x轴和y轴的坐标即可 */
	top: 120px;
	left: 120px;
}

结果：

3 常用的CSS样式

display样式：

属于布局样式，用来设置显示或者隐藏。
隐藏:none
显示: block或者inline-block
block:以块的形式展现,并且独自占用一行。
inline-block :以块的形式展现，但是不会独自占用一行。

字体修改：color修改颜色，font-size修改大小

text-decoration：修改文本样式，可以将超链接的下换线修改没有

list-style-type：修改列表前面的符号，可以是空心圆或者数字或者字母或者空等等等。

在样式块后面加上:hover可以设置鼠标悬停效果，当鼠标悬停在指定文字上执行样式，离开取消样式。

内补丁和外补丁

外补丁：margin；内补丁：padding

float样式是用来设置当前元素在父元素当中的浮动效果。

演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用CSS样式</title>
		<style type="text/css">
			.citys{
				display: none;
			}
			
			#error{
				font-size: 18px;
				color: red;
			}
			
			.baidu{
				text-decoration: none;
			}
			
			.country{
				list-style-type: amharic-abegede;
			}
			
			#itzw:hover{
				color: red;
				cursor: pointer;
			}
			
			#mydiv3{
				width: 100px;
				height: 6.25rem;
				background-color: aqua;
				border: 1px #FFE4C4 solid;
				/* 外补丁 */
				margin-top: 50px;
				margin-left: 100px;
				/* 内补丁 */
				padding-left: 100px;
				padding-right: 30px;
				/* float样式设置浮动效果 */
				float: right;
			}
		</style>
		
		
	</head>
	<body>
		<div id="mydiv3">
			
		</div>
		
		<span id="itzw">
			有你好果汁吃哦
		</span>
		
		<ul class="country">
			<li>中国
				<ul class="citys">
					<li>上海</li>
					<li>徐州</li>
					<li>北京</li>
				</ul>
			</li>
			<li>美国
				<ul class="citys">
					<li>芝加哥</li>
					<li>华盛顿</li>
					<li>纽约</li>
				</ul>
			</li>
			<li>日本</li>
		</ul>
		
		<span id="error">
			用户名不能为空
		</span>
		
		<br><br>
		<a class="baidu" href="http://www.baidu.com">百度</a>
	</body>
</html>