前端页面之CSS

最新推荐文章于 2023-08-17 18:03:00 发布
随风者1997
最新推荐文章于 2023-08-17 18:03:00 发布
阅读量142
点赞数
分类专栏：学习HTML 小白学习学习java
本文链接：https://blog.csdn.net/weixin_45277752/article/details/104400165
版权
小白学习同时被 3 个专栏收录
45 篇文章 0 订阅
订阅专栏
学习java
41 篇文章 1 订阅
订阅专栏
学习HTML
2 篇文章 0 订阅
订阅专栏
(CSS)层叠样式表

1.CSS:层叠样式表（Cascading Style Sheet).W3C要求页面内容和样式分离(HTML专门用来展		示内容,CSS专门用来排版写样式).
	  CSS文件后缀名:.css

2.页面引入CSS的方式:优先级:就近原则.
	2.1:行内样式:在标签中直接用style属性写样式.
		优点:直接方便
		缺点:代码复用性差;内容和样式混在一起,违反W3C要求.
		eg:<!--行内样式-->
			<h1 style="color:red;">大家今天写代码要细心</h1>

	2.2:内部样式:在<head>标签中写
		优点:可以实现页面内样式复用
		缺点:不能实现页面间的样式.
		eg:<!--内部样式-->
		<style type="text/css">
			h2{
				color:red;
			}
		</style>

	2.3:外部样式:先写一个外部css文件,那个页面要用这个文件,就在这个页面的<head>中			用<link/>引入就可.
		优点:可以实现页面间样式复用;符合W3C规范.
		eg:<!--引入外部样式-->
		  <link rel="stylesheet" href="css/1.css" />

	2.4:(了解)导入样式:在<head>中<style>标签中用@import导入外面css
		<!--导入外部CSS文件-->
		<style type="text/css">
			@import url("css/1.css");
		</style>
		注意:导入样式 VS 外部样式
		  2.4.1:导入样式只有部分浏览器支持;外部样式所有浏览都支持.
		  2.4.2:加载时机不同:导入样式,先加载完html页面,再加载导入css文件;
					外部样式,执行时就将CSS文件中代码引用了.

3.CSS的总语法:
	选择器{
		样式名1:样式值1;
		样式名2:样式值2;
		...
	}

4.注释:/*注释内容*/

5.选择器:优先级: id选择器>类选择>标签选择器
	5.1:标签选择器:选中页面上同一种标签.
		eg:/*标签选择器*/
			h1{
				color:blue;
			}
	
	5.2:类选择器:先给标签取类名,然后以.类名开头.
		eg:<!--给标签取类名-->
		  <h3 class="c2 c3">活的,女的</h3>
		  /*类选择器*/
			.c2{
				color: yellow;
			}
			.c3{
				border: solid 1px red;
			}

	5.3:ID选择器:先给标签取id名,然后以#id名开头.
		注意:在一个 HTML 文档中，每个ID 选择器会使用一次，所以同一个页面中不能有相同			名称ID名,但是同一个页面中可以有多个不同ID选择器。
		eg:<!--给标签取id名-->
		  <h4 id="d2">潘金莲这款</h4>
		  /*id选择器*/
			#d2{
				color: green;
			}

	5.4:通用选择器(全局选择器):用*表示选中页面上所有标签.
		eg:	/*通用选择器*/
			*{
				color: orangered;
			}

	5.5:后代选择器:选择器之间以空格分隔
		eg:/*后代选择器*/
			body span{
				color: red;
			}
			
	5.6:子选择器:选择器之间以>分隔
		eg:/*子选择器*/
			body>span{
				color: red;
			}

	5.7:相邻兄弟选择器:(选中当前标签紧跟着弟弟标签),选择器之间以+分隔
		eg:/*相邻兄弟选择器*/
			h2+h3{
				color: red;
			}

	5.8:群组选择器:选择器之间以,分隔
		eg:/*群组选择器*/
			h1,h2,h3{
				color: red;
			}

	5.9:属性选择器:标签名[属性1][属性名2=值]
		eg:/*属性选择器:标签名[属性1][属性名2=值]*/
			h3[class]{
				color: red;
			}

6.超链接伪类样式
		/*鼠标单击前样式*/
			a:link{
				color: red;
			}
			
			/*鼠标经过样式*/
			a:hover{
				color: green;
			}
			
			/*鼠标单击时样式*/
			a:active{
				color: blueviolet;
			}
			
			/*鼠标单击后样式*/
			a:visited{
				color: deeppink;
			}

7.CSS中常用样式
	7.1:字体样式
		font-family:字体类型,eg:宋体,楷体
		font-size:字体大小
		font-style:字体倾斜类型,eg:italic,normal
		font-weight:字体粗细
		color:字体颜色
		eg:/*字体样式*/
			div{
				/*font-size: 30px;
				font-family: "宋体";
				font-style: italic;
				font-weight: bolder;
				color: red;*/
				
				font:italic bolder 30px "宋体";
			}

	7.2:文本样式
		letter-spacing:设置字符间距。
		line-height:设置行高。
		text-align:规定文本的水平对齐方式。
		text-decoration:规定添加到文本的装饰效果。
		text-indent:规定文本块首行的缩进。
		eg:
			/*文本样式*/
			p{
				text-indent: 50px;
				letter-spacing: 20px;
				line-height: 100px;
				text-align: center;
				text-decoration: underline;
			}
			
			/*去掉超链接下划线*/
			a{
				text-decoration: none;
			}

	7.3:背景样式
		background-color:设置元素的背景颜色。
		background-image:设置元素的背景图像。
		background-position:设置背景图像的开始位置。
		background-repeat:设置是否及如何重复背景图像。
		eg:/*背景样式*/
			body{
				/*background-color: red;
				background-image:url(img/gameBg2.jpg);
				background-repeat: no-repeat;
				background-position: 500px 200px;*/
				background: url(img/gameBg2.jpg) 500px 200px no-repeat;
			}

	7.4:列表样式
		list-style:在一个声明中设置所有的列表属性。
	list-style-image:将图象设置为列表项标记
	list-style-position:设置列表项标记的放置位置。
	list-style-type:设置列表项标记的类型。
		eg:/*列表样式*/
			li{
				border: solid 1px red;
				list-style-position:inside;
				/*list-style-type: decimal;
				list-style: none;*/
				list-style-image: url(img/sub-3.gif);
			}

8.盒子模型:将html页面每个标签看作是一个盒子模型.
	8.1:盒子模型的组成:标签内容,边框(border),内边距(padding),外边距(margin)
	8.2:盒子模型的属性(border,padding,margin)按方位来设值:上-右-下-左
		border:5px;上-右-下-左每个边框线都是5像素.
		border:1px 2px; 上下边框线1px,左右边框线2px
		border:1px 2px 3px; 上边框线1px,左右边框线2px,下边框线3px
		border:1px 2px 3px,4px; 上边框线1px,右边框线2px,下边框线3px,左边框线4px
	
		border-方位名:直接给指定方位设值

	8.2:边框(border):
			border-color:边框颜色
			border-style:边框类型,eg:solid(实线),dashed
			border-width:边框粗细
			border:类型,粗线,颜色.
	8.3:内边距(padding):标签内容与边框之间距离.
	8.4:外边距(margin):标签边框与其他标签边框之间距离.
	8.5:盒子模型的宽度=元素的宽度+左右内边距+左右边框线.
	8.6:盒子模型的高度=元素的高度+上下内边距+上下边框线.
	8.7:每个页面从里到外的结构:
			margin->背景颜色->背景图片->padding->content->border
		 

		注意:客户从外到里看的.
	8.8:能用外边距微调距离时,就不要用内边距.

9.position定位:静态定位(static,默认),相对定位(relative),绝对定位(absolute),
			固定定位(fixed).
	9.1:相对定位(relative):相对标签原来位置发生偏移,不影响其他标签.没有脱离标准文			档流.
			eg:/*相对定位*/
				position: relative;
				left: 200px;
				top:50px;
	9.2:绝对定位(absolute):相对当前标签的设置了position的父标签或父父级标签或视窗				原点来发生偏移.脱离标签文档流,所以当前标签后面标签会将当前标签					位置占着.
			eg:/*绝对定位*/
				position: absolute;
				left:400px;
				top:150px;
	9.3:固定定位(fixed):生成绝对定位的元素，相对于浏览器窗口进行定位。
			z-index:数字;  设置标签所在页面层次,默认页面在0层
			 

		eg:/*制作流氓广告*/
			img{
				/*固定定位*/
				position: fixed;
				z-index: 1;
				left:500px;
				top:150px;
			}
	
	9.4:定位一般用来微整标签的位置,能用相对定位,就不要用绝对定位.

10.浮动(float):将块级元素变成行级元素.float:left/right;
	清除浮动:clear:left/right/both;
	注意:如果一个元素浮动了,后面的元素受到浮动影响,如果后面的元素不想受浮动影响,			就要清除浮动.
		eg:#d1,#d2{
				float: left;
			}
			
			#d3{
				clear: both;
			}

11.CSS布局:(重点)
	11.1:div+css:整体布局.
	11.2:div+ul-li:做导航条/左右侧菜单
	11.3:div+dl-dt-dd:做图文混排功能
	11.4:form+table:做规整的表单
	11.5:margin:0px auto; 页面整体居中
	11.6:text-align:center;文字水平居中
	11.7:line-height:高度; 文字在这一行垂直居中
	11.8:vertical-align: middle;当前这一行如果有文字和图片时,想让图片垂直居中,用这个属性