javaWeb基础02-CSS

最新推荐文章于 2023-03-11 17:11:58 发布

火鸟菲戈

最新推荐文章于 2023-03-11 17:11:58 发布

阅读量91

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/ss1168805219/article/details/117232760

版权

javaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css:渲染

层叠样式表
	作用:
		渲染页面
		提高工作效率
格式:
	选择器{属性:值;属性1:值1;}
后缀名:
	.css 独立的css(样式)文件

和html元素的整合

	方式1:内联样式表 通过标签的style属性设置样式
	方式2:内部样式表 在当前页面中使用的样式
		通过head标签的style子标签导入
		例如:

<style>
	#divId2{
		background-color: #0f0;
	}
</style>

	方式3:外部样式表 有独立的css文件
		通过head标签的link子标签导入
		例如:

<link rel="stylesheet" href="css/1.css" type="text/css"/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/1.css" />
		<style >
			#div2{
				color: green;
			}
			
		</style>
	</head>
	<body>
		
		<div style="color: red;font-size: 1cm;"> hello css 内联样式表</div>
		<div id="div2" style="font-size: 1cm;"> hello css 内部样式表</div>
		<div id="div3" style="font-size: 1cm;"> hello css 外部样式表</div>
		
	</body>
</html>

选择器

	id选择器
		要求:
			html元素必须有id属性且有值   <xxx id="id1"></xxx>
			css中通过"#"引入,后面加上id的值  #id1{...}
	class选择器
		要求:
			html元素必须有class属性且有值 <xxx class="cls1"/>
			css中通过"."引入,后面加上class的值  .cls1{...}
	元素选择器
		直接用元素(标签)名即可   xxx{...}
	
派生的选择器
	属性选择器★
		要求:
			html元素必须有一个属性不论属性是什么且有值  <xxx nihao="wohenhao"/>
			css中通过下面的方式使用
				元素名[属性="属性值"]{....}
				例如:
					xxx[nihao="wohenhao"]{....}

div[attr="val"]{
	color: green;
}

	后代选择器
		选择器 后代选择器{...}   在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
了解的选择器
	锚伪类选择器

a:link {color: #FF0000}	/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

选择器使用小结:
	id选择器:一个元素(标签)
	class选择器:一类元素 
	元素选择器:一种元素
	属性选择器:元素选择器的特殊用法
使用的时候注意:(了解)
	若多个样式作用于一个元素的时候
		不同的样式,会叠加
		相同的样式,最近原则
	若多个选择器作用于一个元素的时候
		越特殊优先级越高 id优先级最高

<!-- font_xx 字体的属性-->
<span style="font-family: '微软雅黑'; font-size: 2cm; color: 'red';">Hello CSS</span>

属性(了解)

字体
	font-family:设置字体(隶书) 设置字体家族
	font-size:设置字体大小
	font-style:设置字体风格
文本:改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进
	color:文本颜色
	line-height:设置行高
	text-decoration: 向文本添加修饰。 none underline
	text-align:对齐文本
列表:
	list-style-type:设置列表项的类型 例如:a 1  实心圆 
	list-style-image:设置图片最为列表项类型 使用的时候使用 url函数  url("/i/arrow.gif");
背景:
	background-color:设置背景颜色
	background-image:设置图片作为背景 url
尺寸:
	width:
	height:
浮动:
	float: 可选值 left right
	
分类:
	clear:设置元素的两边是否有其他的浮动元素
		值为:both 两边都不允许有浮动元素
	display:设置是否及如何显示元素。
		none 此元素不会被显示。 
		block 此元素将显示为块级元素，此元素前后会带有换行符。 
		inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

框模型:(理解)

一个元素外面有padding(内边距) border(边框) margin(外边距)
	padding:元素和边框的距离
	margin:元素最外层的空白
上面这三个属性都有简写的属性
	若设置大小的时候 四个值:顺序 上右下左
		padding:10px 10px 10px 10px
		若只写一个的话 代表四个边使用同一个值  padding:10px
		若只写两个个的话 代表四个边使用同一个值 padding:10px 20px
		若只写三个个的话 代表四个边使用同一个值 padding:10px 20px 30px
border(边框)
	还可以设置颜色 风格
	简写属性:
		border:宽度	风格 颜色;

		border:5px solid red;
		
		solid:实线
		dashed:虚线
		double:双实线

首页

采用css实现布局

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			a{
				text-decoration: none;
			}
			.header{
				width: 100%;
			}
			.header div{
				width: 33.3%;
				height: 60px;
				display: inline;
				line-height: 60px;
			}
			.header a{
				padding: 15px;
			}
			
			.menu{
				width: 100%;
				height: 50px;
				background-color: #000;
				
			}
			
			.menu ul li{
				list-style-type: none;
				display: inline;
			}
			.menu a{
				font-size: 25px;
				color: #fff;
			}
			
			/*  
			 如果轮播div设置了高度，那么下面的div会顶上来，必须设置margin-top>轮播div的高度
			 * */
			.lunbo{
				width: 100%;
				/*height: 200px;*/
				margin-top: 10px;
				margin-bottom: 10px;
			}
			
			.lunbo img{
				width: 100%;
			}
			
			/*.hot{
				margin-top: 600px;
			}*/
			
			.left{
				width: 16%;
				height: 500px;
				float: left;
			}
			.right{
				width: 84%;
				height: 500px;
				float: left;
				text-align: center;
			}
			.middle{
				width: 50%;
				height: 250px;
				float: left;
			}
			
			
			.item{
				float: left;
				width: 16.6%;
				height: 250px;
			}
			
			/*给广告*/
			.ad1{
				width: 100%;
			}
			.ad1 img{
				width: 100%;
			}
			
			/*版权*/
			.foot{
				width:100%;
			}
			.foot p{
				text-align: center;
			}
			
		</style>
	</head>

	<body>
		<div class="header">
				<div>
					<img src="../img/logo2.png" height="40px" />
				</div>
				<div>
					<img src="../img/header.jpg" />
				</div>
				<div>
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
			
			<div class="menu">
				<ul>
					<li><a href="#" >首页</> </li>
					<li><a href="#" >首页</> </li>
					<li><a href="#" >首页</> </li>
				</ul>
				
			</div>
			
			<!--轮播图-->
			<div class="lunbo">
				<img src="../img/1.jpg"/>
			</div>
		
			
			<!--热门商品-->
			<div class="hot">
				<div>
					<font size="6" face="黑体">热门商品</font>
					<img src="../img/title2.jpg" />
				</div>
				<div>
					<div class="left">
						<img src="../img/big01.jpg" />
					</div>
					<div class="right">
						<div class="middle">
							<img src="../img/middle01.jpg" />
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
					</div>
					
				</div>
			</div>
			
			<div class="ad1">
				<img src="../img/ad.jpg" />
			</div>
			<div class="ad1">
				<img src="../img/footer.jpg"/>
			</div>
			
			
			<div class="footer">
				<div>
					<p align="center">
						<a href="#">关于我们</a>
						<a href="#">关于我们</a>
						<a href="#">关于我们</a>
						<a href="#">关于我们</a>
						<a href="#">关于我们</a>
					</p>
					<p align="center">
						Copyright &copy; 2005-2016 传智商城 版权所有
					</p>
				</div>
			</div>
	</body>
</html>

火鸟菲戈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaWeb基础02-CSS

css:渲染层叠样式表作用: 渲染页面提高工作效率格式: 选择器{属性:值;属性1:值1;}后缀名: .css 独立的css(样式)文件和html元素的整合方式1:内联样式表通过标签的style属性设置样式方式2:内部样式表在当前页面中使用的样式通过head标签的style子标签导入例如:<style> #divId2{ background-color: #0f0; }</style> 方式3:外部样式表有独立
复制链接

扫一扫