02.Day02-WEB-HTML之DIV+CSS学习总结

最新推荐文章于 2024-09-15 21:36:06 发布

芝士晓哥

最新推荐文章于 2024-09-15 21:36:06 发布

阅读量228

点赞数

分类专栏： MR_ALiang JavaEE学习之旅

本文链接：https://blog.csdn.net/MR_ALiang/article/details/79953706

版权

MR_ALiang JavaEE学习之旅专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一div相关技术:

1.1什么是div?

div就是html一个普通标签,进行区域划分.特性: 独自占一行.独自不能实现复杂效果,必须结合CSS样式进行渲染.

div通常是块级元素它主要用于页面的布局。

<div>可定义文档中的区域或节(division/section)

<div>标签可以把文档分成独立的,不同部分.他可以用作严格的组织工具,并且不使用任何格式与其关联.

如果用 id 或者 class 来标记<div>,那么该标签的作用将会变得更有效.

1.2什么是Span?

Span它是一个html标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合CSS来使用。它主要用于对括起来的内容进行样式的修饰。

二CSS相关知识:

2.1什么是CSS?

CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素样式通常存在样式表中把样式添加到HTML4.0中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率外部样式通常存储在CSS文件中多个样式可以层叠为一

2.2CSS的作用?

HTML:他是整个网站的骨架

CSS:他是对整个网站骨架进行美化(修饰)

2.3CSS如何使用?

语法和规范
选择器{
   属性名 1:属性值1;
   属性名 2:属性值2;
   属性名 3:属性值3;

}

2.4CSS的引入方式:

2.4.1行内引入

<div style="color:red;font-size: 100px;">
JavaEE就业班
</div>

2.4.2内部引入

<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>

2.4.3外部引入

如果 <style type=”text/css”></style> 可以省略不写,因为他的默认值就是 text/css

优先级问题:
谁离需要修饰的元素近，谁的样式生效，其它的被覆盖掉。 (就近原则)

2.5选择器

要想将CSS样式用于特定的HTML元素,首先要找到该目标元素,在CSS中,执行这一样式规则的部分被称为选择器.

2.5.1元素选择器

标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式.其基本如法如下:

标记名{
属性名 1:属性值1;
属性名 2:属性值2;
属性名 3:属性值3;
}
该语法中,所有的HTML标记名都可以作为标记选择器,例如body,h1,p,strong等,用标记选择器定义的样式对页面中该类型的所有标记都有效

div{
		font-size: 30px;
		color: pink;
			}
<h>
成熟时给陌生人看的
</h>

优点:快速为页面中同类型的标记统一样式

缺点:不能设置差异化样式

2.5.2ID选择器

id选择器使用"#"进行标识,后面紧跟id名,其基本语法如下:

#id 属性名{
属性名 1:属性值1;
属性名 2:属性值2;
属性名 3:属性值3;
}
该语法中,id即为HTML元素的id属性值,大多数HTML都可以定义id属性,元素的id值是唯一的,只能对应文档中某一个具体的元素.

#div5{
	font-size: 30px;
	color: yellow;
			}

<div id="div5">
	逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>

2.5.3类选择器

类选择器用"."(英文点号)进行标识,后面紧跟类名,其基本语法如下:

.类名{
属性名 1:属性值1;
属性名 2:属性值2;
属性名 3:属性值3;
}
对多个元素设置相同的样式，此时使用类选择器比较合适。
该语法中,类名即为HTML元素的class属性值,大多数HTML都可以定义class属性,类选择器最大的优势是可以为元素对象定义单独或者相同的样式:

代码片段:

<style>
			.div2{
				font-size: 30px;
				color: gold;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>

效果图

2.5.4属性选择器

属性选择器,在标签后面使用括号标记,其基本语法格式如下:

标签名[标签属性 = '标签属性值']{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该选择器,是对"元素选择器"的扩展,对一组标签进一步过滤

代码片段:

<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>

效果图

2.5.5包含选择器

包含选择器,两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内设置样式.

父标签后代标签{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该选择器是对"元素选择器"的扩展,对一个内部所有后代标签进行过滤.

代码片段:

<style>
			div p{
				font-size: 30px;
				color: green;
			}
		</style>
	</head>

	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			<p>
				逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
			</p>
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
		<p>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！66
		</p>
	</body>

效果图: