JavaWeb自学之css学习笔记

最新推荐文章于 2025-01-31 21:25:48 发布
原创最新推荐文章于 2025-01-31 21:25:48 发布 · 425 阅读
0 ·
CC 4.0 BY-SA版权
css 专栏收录该内容
2 篇文章
订阅专栏
本文深入探讨了CSS的基础概念，包括层叠样式表的原理、与HTML的结合方式、选择器的使用以及盒子模型的应用。同时，介绍了CSS布局技术，如漂浮与定位，并通过实际案例演示了图文混排与图像签名的功能实现。
1、css简介
	*css 层叠样式表
		**层叠：一层一层的
		
		**样式表：
				很多的属性和属性值
		*使页面显示效果更加好
		*css将网页内容和显示样式进行分离，提高了显示功能
		
2、css和html的结合方式（四种结合方式）
	(1)在每个html标签上面都有一个属性style，把css和html结合在一起
		<div style="background-color:red;color:green">今天天气很不错</div>
		属性和属性之间用分号隔开，属性和值之间用冒号
	(2)使用html的一个标签实现 <style>标签：写在head里面
		*<style type="text/css">
				css代码;
		</style>
		
		*<style type="text/css">
			div{
				background-color:pink;
				color:red;
			}
		</style>
	(3)在style标签里面 使用语句（了解）
			@import url(css文件的路径);
		-第一步，创建一个css文件
			div{
					background-color:yellow;
					color:black;
				}
		-第二步，在style标签里面引用css文件
			<style type="text/css">
				@import url(div.css);
			</style>

		***第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式
		
	(4)使用头标签 link,引入外部css文件(在head里面没有style标签)
		-第一步：创建一个css文件
			
		-<link rel="stylesheet" type="text/css" href="css文件的路径"/>
		
		这种方式无需更改html页面，只需修改div文件即可，实现网页内容与显示样式的分离
				例子：汶川地震各大网页内容显示为灰色，就是通过div实现
	
	***优先级(一般情况)
		从上到下，从外到内，优先级由低到高
		***后加载的优先级高
		
3、css的选择器
	选择器：要对哪个标签里面的数据进行操作
	***选择器格式  选择器名称{属性名:属性值;属性名:属性值;...}
		
	(1)标签选择器
		*使用标签名作为选择器的名称
		如	div{
				background-color:gray;
				color:red;
			}
	
	(2)class选择器
		*每个html标签都有一个属性class
		-<div class="haha">aaaaa</div>
		- div.haha{
				background-color:pink;
			}
		.haha{
				color:red;
			}
			
	(3)id选择器
		*每个html标签上面有一个属性id
		-<div id="hehe">bbbbb</div>
		-	div#hehe{
				background-color:pink;
			}
		使用 #hehe{
					color:tomato;
				}	可以将id都为hehe的标签全部修改
	***优先级
		style>id选择器>class选择器>标签选择器
		
	4、css的扩展选择器
		(1)关联选择器
			*<div><p>wwwwwww</p></div>
			*设置div标签里面p标签的样式，嵌套标签里面的样式
				* div p{
					background-color:red;
				}
		
		(2)组合选择器
			*<div>111111</div>
			 <p>2222222</p>
			*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
				*div,p{
					background-color:red;
				}
		
		(3)伪元素选择器
			*css里面提供了一些定义好的样式，可以拿过来使用
			*比如超链接
				**超链接的状态
				原始状态 :link
				鼠标放上去的状态 :hover
				点击	:active
				点击之后	:visited
	
	5、css的盒子模型(div+css)
		在进行布局前需要把数据封装到一块一块的区域(div)内，这个区域的专业术语叫盒子
			(1)边框
				border: width style color 可统一设置，也可以分别设置
					上 border-top
					下 border-bottom
					左 border-left
					右 border-right
			
	代码：	<head>	
			<style type="text/css">
			div{						//统一设置边框
					width:200px;
					height:100px;
				
					border:2px solid red;
				}
			
			#div12{						//分别设置边框
					border:2px dashed tomato;
				}
					</style>
					</head>
			<body>
				<div id="div11">这是第一个div</div>
				<div id="div12">这是第二个div</div>
				<div id="div13">这是第三个div</div>
			</body>
			
			(2)内边距
				padding:20px;可统一设置，也可分别设置
					上 padding-top
					下 padding-bottom
					左 padding-left
					右 padding-right
					
			(3)外边距
				margin:20px;可统一设置，也可分别设置
					上 margin-top
					下 margin-bottom
					左 margin-left
					右 margin-right
					
			**对数据进行操作，需要把数据放到一个区域里面(div)
			
	6、css的布局漂浮(了解，某些浏览器不好使)
		float:
			**属性值
			left：文本流向对象的右边(后面的div到右边)
			right：文本流向对象的左边(后面的div到左边)
			
	7、css的布局定位
		position:
			**属性值
				-absolute:
					***将对象从文档流中拖出，漂浮在下一个div的上面
					***可以使用top、bottom等属性进行定位
				-relative:
					***不会把对象从文档流中拖出
					***可以使用top、bottom等属性进行定位
					
	8、案例：图文混排案例
			**图片和文字在一起显示(首先使用div把图片和文字包起来)
	代码：		<html>
				<head>
					<title>案例—图文混排</title>
					<style type="text/css">
						#imgtext11{
							width:200px;
							height:200px;
							border:2px dashed green;
						}
						#img11{
							float:left;
						}
						#text11{
							color:tomato;
						}
					</style>
				</head>
				<body>
					<div id="imgtext11">
					<div id="img11"><img src="a.png"/></div>
					<div id="text11">世俱杯恒大0-3巴萨 邹正重伤离场
										恒大发布战广岛海报:为邹正而战
										恒大足校小球员:长大找巴萨复仇
									西媒评恒大:技术差得很 防守最棒</div>
					</div>
				</body>
			</html>
		
	9、案例	图像签名
		**在图片上面显示文字
		<html>
		<head>
			<title>案例二图像签名</title>
			<style type="text/css">
				#text21{
					position:absolute;
					top:140px;
					left:50px;
					color:white;
				}
			</style>
		</head>
		<body>
			<div id="img21"><img src="b.png"></div>
			<div id="text21">网球双生花半裸写真</div>
		</body>
		</html>