JAVAEE学习日记（二）HTML框架及CSS层叠样式表_关于javaee如何放css和html代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44500487/article/details/102630439

这篇JAVAEE学习日记详细介绍了HTML元素的分类，包括块级元素、行内元素和行内块元素，并深入探讨了CSS的概念、作用及在网页中的引用方式。文章还涵盖了CSS的基本语法、选择器分类以及常用属性，如布局定位、颜色、宽高、背景图片和字体等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML元素分类

块级元素

<div>这是一个块级元素</div>
其他常见的还有<p>,<h1>到<h6>,<ol>,<ul>,<dl>,<tabal>,<from>

1.每个块级元素都从新的一行开始，并且其后的元素也另起一行
2.元素的高度、宽度、行高以及顶和底边距都可设置
3.元素宽度在不设置的情况下，是它本身父容器的100%（和父容器宽度一致），除非设定一个宽度

行内元素

<span>这是一个行内元素</span>
其他常见的还有<a>,<br>,<i>,<label>,<input>,<img>

1.和其他元素都在一行
2.元素的高度、宽度、行高及顶部和底部边距不可设置
3.元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块元素

<span style="display: inline-block;">这是一个行内块元素</span>

1.从严格上的意义来说，没有一个元素是天生属于行内块元素的，但是我们可以通过display：inline-block（css2.1）新增将一个元素设置为行内块元素
2.特点是和其他元素都在一行上，元素宽、高、行高、顶部和底部边距可设置。

CSS相关概念

CSS(Cascading Style Sheet)即层叠样式表

CSS作用

将结构和格式分离
可以方便的更新网页格式和外观
强大的控制页面格式和布局的功能
制作美观的界面

在网页中引用的三种方式

1.style属性（行内样式）
	HTML标记中使用style属性

<div style="width: 200px; height: 200px; border: 1px solid red;">测试行内样式</div>

2.style元素（内部样式表）
	文档中定义style节点

<head>
<style type="text/css">
			/*id选择器*/
			#d2{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				background-color: cyan;
				margin-top: 10px;
			}
		</style>
<head>
<body>
<div id="d2">测试内部样式表</div>
<body>

3.link元素（外部样式表）
	引用外部封装好的css文件

<link rel="stylesheet" href="css/main.css" />

CSS基本语法（定义规则）

每一条声明，都是一个属性和一个值组成
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191021230243616.png

样式表选择器分类

HTML选择器
混合选择器（多种选择器一起使用）
类选择器
ID选择器
伪类选择器（多用于标签）

<head>
	<style type="text/css">
			/*html标签选择器*/
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			
			/*id选择器*/
			#a1{
				/*文字装饰*/
				text-decoration: none;
			}
			/*类选择器*/
			.div2{
				width: 500px;
				height: 500px;
				background-color: cyan;
			}
			/*混合选择器*/
			.div2 span{
				display: inline-block;
				background-color: red;
			}
			.div2 #div2-div1{
				background-color: yellow;
			}
			/*伪类选择器*/
			a:link{  /*鼠标的链接*/
				color: red;
			}
			a:hover{ /*鼠标悬浮时的颜色*/
				color: cyan;
			}
			a:active{
				/*鼠标点击下去但是不松开的颜色*/
				color: green;
			}
			
			a:visited{
				/*鼠标点击跳转之后的颜色*/
				color: gray;
			}
	</style>
</head>
<body>
	<div>测试html标签选择器</div>
	<a id="a1" href="#">测试id选择器</a>
		<div class="div2">测试类选择器
		    <span>测试混合选择器</span>
		    <div id="div2-div1">div2中的div标签</div>
		    <a href="html元素的分类.html">测试伪类选择器</a>
		</div>
</body>

常用属性

CSS框模型概述

在这里插入图片描述

样式属性功能

布局定位

居中，居左，具有
相对布局和绝对布局
广告栏之绝对布局 position:fixed

# main{
	margin: 0 auto;<!-- 居中 -->
	float: left;<!-- 居左 -->
	float: right;<!-- 居右 -->
	clear: both;<!-- 图像的左侧和右侧均不允许出现浮动元素： -->
}

相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的
空间仍保留

position: relative;

绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中
的另一个元素或者是初始包含块。元素原先在正常文档流所占的空间会关闭，就好像该元素
原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

position: absolute;

通用属性

颜色
宽和高
背景图片
字体
边框

颜色:
	opacity: value|inherit
		value:规定不透明度。从0.0（完全透明）到1.0（完全不透明）
		inherit：应该从父元素继承opacity属性的值。
宽和高：
	width和height
背景图片：
	background-image: url('URL')|none|inherit
		url('URL')：指向图像的路径
		none：默认值。不显示背景图片
		inherit：规定应该从父元素继承background-image属性的设置
字体：
	front-style:normal|italic|oblique|inherit
		nomal:默认值。浏览器显示一个标准的字体样式
		italic：浏览器会显示一个斜体的字体样式
		oblique：浏览器会显示一个倾斜的字体样式
	front-family:family-name(generic-family)|inherit
		family-name(generic-family)：用于某个元素的字体族名称或及类族名称的一个优先表
	front-size：xx-small到xx-large|smaller|large|length|%|inherit
		xx-small到xx-large：设置字体尺寸
		smaller：把 font-size 设置为比父元素更小的尺寸。
		larger：把 font-size 设置为比父元素更大的尺寸。
		length：把 font-size 设置为一个固定的值。
		%：把 font-size 设置为基于父元素的一个百分比值。
	front-weight：normal|bold|bolder|lighter|100到900|inherit
		normal：默认值。定义标准的字符。
		bold：定义粗体字符。
		bolder：定义更粗的字符。
		lighter：定义更细的字符。
		100到900：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。