DIV和CSS

最新推荐文章于 2023-09-23 15:51:54 发布

jiangtea

最新推荐文章于 2023-09-23 15:51:54 发布

阅读量922

点赞数

分类专栏： javaee 文章标签： css DIV

本文链接：https://blog.csdn.net/jiangtea/article/details/74503147

版权

javaee 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于页面的布局。
Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
CSS指层叠样式表，它是对整个网站骨架的内容进行美化。

div的语义是division“分割”； span的语义就是span“范围、跨度”。

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

2、使用
语法和规范：

选择器{
	属性名 1:属性值 1;
	属性名 2:属性值 2;
	属性名 3:属性值 3;
}

2.1、CSS的选择器
2.1.1、元素选择器

元素名{
	属性名 1:属性值 1;
	属性名 2:属性值 2;
	属性名 3:属性值 3;
}

如果多个相同的元素设置相同的样式，使用此种方式最为合适。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				font-size: 50px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			11111
		</div>
		
		<div>
			22222
		</div>
	</body>
</html>

2.1.2、类选择器

.类名{
	属性名 1:属性值 1;
	属性名 2:属性值 2;
	属性名 3:属性值 3;
}

对多个元素设置相同的样式，此时使用类选择器比较合适。class属性可以重复。
同一个标签，可能同时属于多个类，用空格隔开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.divc{
				font-size: 50px;
				color: gold;
			}
		</style>
	</head>
	<body>
		<div class="divc">
			11111
		</div>
		
		<div>
			22222
		</div>
		
		<div class="divc">
			33333
		</div>
	</body>
</html>

2.1.3、ID选择器

#id 属性名{
	属性名 1:属性值 1;
	属性名 2:属性值 2;
	属性名 3:属性值 3;
}

Id 保证唯一。
同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#divid{
				font-size: 50px;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="divc">
			11111
		</div>
		
		<div id="divid">
			22222
		</div>
		
		<div class="divc">
			33333
		</div>
	</body>
</html>

2.1.4、层级选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div p{
				font-size: 50px;
				color: green;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				11111
			</p>
		</div>
		
		<div id="divid">
			22222
		</div>
		
		<div class="divc">
			33333
		</div>
	</body>
</html>

2.1.5、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input[type='text']{
				background-color: red;
			}
			input[type='password']{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		用户名：<input type="text" name="username"/><br />
		密码：<input type="password" name="password"/>
	</body>
</html>

权重问题大总结：
1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
2）如果没有选中，那么权重是0。如果大家都是0，就近原则。

2.2、CSS的引入方式
2.2.1、内部引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				font-size: 50px;
				color: green;
			}
		</style>
	</head>
	<body>
		<div>
			11111
		</div>
		
		<div>
			22222
		</div>
		
		<div>
			33333
		</div>
	</body>
</html>

2.2.2、行内引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				font-size: 50px;
				color: green;
			}
		</style>
	</head>
	<body>
		<div>
			11111
		</div>
		
		<div>
			22222
		</div>
		
		<div style="font-size: 20px; color: pink;">
			33333
		</div>
	</body>
</html>

2.2.3、外部引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="stylecss.css" type="text/css"/>
	</head>
	<body>
		<div>
			11111
		</div>
		
		<div>
			22222
		</div>
		
		<div>
			33333
		</div>
	</body>
</html>

stylecss.css文件

div{
	font-size: 50px;
	color: green;
}

2.3、CSS 的浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float: left;

清除浮动：

clear: both;

2.4、盒子模型
内容(content)，内边距（padding），边框（boder），外边距（margin）。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和外边距的值均为 0。

#one{
	border: 1px solid red;
	width: 300px;
	height: 150px;
	float: left;
}

padding-top: 20px;

设置外边距去居中：

margin: auto;

2.5、其他
一行显示列表标签：

ul li {
	display: inline;
}

设置字体大小：

style="font-size: 20px;"

让块级元素文本内容居中：

text-align: center;

去掉超链接的下划线：

a{
	text-decoration: none;
}

2.6、一些常见的属性

字符颜色：

color:red;

color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制。

字号大小：

font-size:40px;

font就是“字体”，size就是“尺寸”。px是“像素”。
单位必须加，不加不行。

背景颜色：

background-color: blue;

background就是“背景”。

加粗：

font-weight: bold;

font是“字体” weight是“重量”的意思，bold粗。

不加粗：

font-weight: normal;

normal就是正常的意思

斜体：

font-style: italic;

italic就是“斜体”

不斜体：

font-style: normal;

下划线：

text-decoration: underline;

decoration就是“装饰”的意思。
sublime中的快捷键是tdu，然后tab

没有下划线：
1text-decoration:none;

jiangtea

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DIV和CSS

1、Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于页面的布局。 Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。 CSS指层叠样式表，它是对整个网站骨架的内容进行美化。 2、使用语法和规范：选择器{ 属
复制链接

扫一扫

专栏目录