Web前端学习（2）_css

野性酷女 2022-06-14 11:49 202阅读 0赞

**Web前端学习（2）\_css**

1.CSS入门

> 1.1 引入
> 
> html：负责网页的结构
> 
> css： 负责网页的样式
> 
>   
> 
> 
> 1.2 定义
> 
> CSS（Cascading Style Sheet 层叠样式表） 简称，样式。主要负责网页的美观
> 
>   
> 
> 
> 1.3 css的三种使用方式
> 
> 1.3.1行内样式
> 
> 注意：
> 
> 1）使用标签的style属性进行css控制，css写在style属性值中
> 
> 弊端：只能控制一个标签的样式，如果对于多个标签的样式进行设计，过于麻烦
> 
>     <a href="" style="color:#0F3">超链接</a><br />
>     <a href="" style="color:#0F3">超链接</a><br />
>     <a href="" style="color:#0F3">超链接</a><br />
> 
>   
>

> 1.3.2内部样式
> 
> 注意：
> 
> 1）使用style的标签进行css控制，css内容写在style标签体内
> 
> 2）一次控制多个标签的样式
> 
> 3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
> 
>     <style type="text/css">
>     	a{
>     		color:#F30;
>     		font-size:36px;
>     		}
>     </style>
> 
> 分析：把style标签写在haed标签里面，使用如上语法选中对应标签，进行样式设置  
>   
> 
> 
> 1.3.3外部样式（推荐使用）
> 
> 注意：
> 
> 1）建立独立后缀为css的文件，css内容写在该文件中
> 
> 2）在使用css的html页面中，导入外部css文件
> 
> 使用方法：
> 
> 
> 
> <link href="01.css" rel="stylesheet"/>
> 
>     <link href="css示例.css" rel="stylesheet" />
> 
> 分析：在一个css文件里面写好样式代码，使用上面的句子进行导入  
>   
>

2 CSS语法

> 2.1 选择器（selector）：使用选择器来选择需要添加样式的标签。
> 
>   
> 
> 
> 2.1.1 标签选择器
> 
> 作用：选择同名的标签
> 
> 注意：这种方法会选择到该文件里面的所有同名的标签
> 
> 分析：如下，会选中所有的div标签
> 
>     <style type="text/css">
>     	div{
>     		color:#963;
>     	}
>     
>     </style>
> 
>   
> 
> 
> 2.1.2 类选择器
> 
> 作用： 选择同类的标签
> 
> 注意：
> 
> 1）选择的标签必须有class的属性。同类的标签使用同名
> 
> 2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先
> 
> 分析：.加类名，会选中标签中类的属性为该名字的所有标签
> 
>     .class1{
>     		color:#36F;
>     	}
> 
>   
> 
> 
> 2.1.3 id选择器
> 
> 作用： 选择一个标签
> 
> 分析：同上述类选择器，但是使用  \# 开头的
> 
>     #id1{
>     		color:#00C;
>     	}
> 
> 注意：
> 
> 1）选择的标签必须有id属性。
> 
> 2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
> 
> 3）id选择器的优先级最高！
> 
>   
> 
> 
> 2.1.4 并集选择器
> 
> 作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容
> 
>     /*当两个类css代码相同的时可以使用并集选择器将两个选择其中的代码进行抽取,形     成一个并集选择器*/	
>     	.c1,.c2{
>     		color:#00F;
>     	}
> 
>   
> 
> 
> 2.1.5 交集选择器
> 
> 作用： 选择某个选择器中的子标签
> 
> 分析：选中div标签中的span标签
> 
>     div span{
>     	color:#006;
>     	}
> 
>   
> 
> 
> 2.1.6 通用选择器
> 
> 作用； 选择所有的标签
> 
>   
> 
> 
> 2.1.7伪类选择器
> 
> 作用：控制标签在不同状态下的样式。
> 
> 标签有四种状态：
> 
> （1）link: 没有访问过的状态
> 
> （2）hover: 鼠标经过的状态
> 
> （3）active:鼠标激活（按下但没有松开）的状态
> 
> （4）visited: 已经被访问过的状态（鼠标点下且松开）
> 
> 注意：
> 
> 1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
> 
> 2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
> 
> 正确顺序： link visited hover active
> 
>     <style type="text/css">
>     	a:link{
>     		color:#3F0;
>     	}
>     	a:visited{
>     		color:#3FF;
>     	}
>     	a:hover{
>     		color:#9C0;
>     	}
>     	a:active{
>     		color:#00F;
>     	}
>     
>     </style>
> 
>   
> 
> 
> 2.2 常用的CSS属性和值
> 
>   
> 
> 
> 2.2.1 文本属性
> 
>     /*设置字符间距*/
>     	letter-spacing:4px;
>     	
>     	/*设置文本的位置*/
>     	text-align:center;
>     	
>     	/*给文本设置上划/下划/中划线*/
>     	text-decoration:underline;
>     	
>     	/*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/
>     	word-spacing:10px;
> 
>   
> 
> 
> 2.2.2 设置字体
> 
>     /*设置字体*/
>     		/*font-family:"黑体";*/
>     		
>     		/*设置字体大小*/
>     		/*font-size:36px;*/
>     		
>     		/*设置字体样式*/
>     		/*font-style:italic;*/
>     		
>     		/*设置字体的粗细*/
>     		/*font-weight:bold;*/
>     		
>     		/*字体设置的简写属性,一定要注意属性的顺序*/
>     		font:italic bold 36px "黑体";
> 
>   
> 
> 
> 2.2.3 设置背景
> 
>     /*给标签设置背景颜色*/
>     		/*background-color:#006;*/
>     		
>     		/*将背景设置为图片*/
>     		/*background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);*/
>     		
>     		/*设置背景图片的重复规则
>     		repeat:默认显示的重复方式,x,y方向都重复
>     		repeat-x:设置图片仅在x方向上重复
>     		repeat-y:设置图片仅在y轴方向上进行重复
>     		no-repeat:图片不重复
>     		*/
>     		/*background-repeat:no-repeat;*/
>     		
>     		/*设置图片的位置*/
>     		/*background-position:top right ;*/
>     		
>     		/*设置图片背景的简写样式*/
>     		background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;
> 
>   
> 
> 
> 2.2.4 设置列表
> 
>     ul{
>     		/*设置列表选项前面的样式*/
>     		/*list-style-type:circle;*/
>     		
>     		/*将图片设置为列表选项的一个标记*/
>     		/*list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);*/
>     		
>     		/*列表样式的简写属性*/
>     		list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);
>     		}
> 
>   
> 
> 
> 2.2.5 设置表格
> 
>     table{
>     	 /*合并表格的边框*/
>     	 border-collapse:collapse;}
> 
>   
> 
> 
> 2.2.6设置边框
> 
>     div{
>     	width:300px;
>     	height:200px;
>     	
>     	/*必须首先设置边框的样式之后,边框的颜色才可以显示*/
>     	/*border-color:#F00;*/
>     	
>     	/*给四个边框非别设置不同的颜色*/
>     	/*
>     	border-top-color:#0F0;
>     	border-bottom-color:#063;
>     	border-left-color:#9C0;
>     	border-right-color:#F00;*/
>     	
>     	
>     	/*设置边框的样式*/
>     	/*border-style:solid;*/
>     	/*实线:solid*/
>     	/*border-left-style:solid;*/
>     	
>     	/*点划线:dotted*/
>     	/*border-top-style:dotted;*/
>     	
>     	/*双实线:double*/
>     	/*border-right-style:double;*/
>     	
>     	/*虚线:dashed*/
>     	/*border-bottom-style:dashed;*/
>     	
>     	/*设置边框的宽度*/
>     	/*border-width:5px;*/
>     	/*border-left-width:1px;
>     	border-top-width:3px;
>     	border-right-width:6px;
>     	border-bottom-width:9px;*/
>     	
>     	/*使用简写属性,设置边框样式:booder:border-width border-style border-color*/
>     	/*这个简写属性必须牢记*/
>     	border:2px solid #F00;
>     	}
> 
>   
>

3 盒子模型

> 3.1 定义
> 
> 可以把html页面上每个标签看做是一个盒子。
> 
>   
> 
> 
> 3.2 盒子相关的属性：
> 
> 宽度和高度（width和height）： 决定这个盒子的容量
> 
> 内边距（padding）： 盒子边框与内容的距离
> 
> 边框（border）： 盒子的厚度
> 
> 外边距（margin）： 盒子与盒子之间的距离
> 
>     div{
>     	width:100px;
>     	height:100px;
>     	border:6px solid #900;}
>     	
>     
>     #d1{
>     	width:200px;
>     	height:200px;
>     	padding-top:10px;
>     	padding-left:10px;
>     	margin-bottom:10px;}
> 
>   
>

4 CSS定位

> （1）相对定位：relative（相对自己之前的位置）
> 
> （2）绝对定位：abosolute（相对父标签的位置）
> 
> （3）固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)
> 
>     /*相对定位,相对于自己之前的位置*/
>     	/*
>     	position:relative;
>     	top:20px;
>     	left:20px;*/
>     	
>     	
>     	/*绝对定位:相对于自己的父标签而言的*/
>     	/*
>     	position:absolute;
>     	top:20px;
>     	left:20px;*/
>     	
>     	/*固定定位:相对于浏览器而言*/
>     	position:fixed;
>     	left:500px;
>     	top:300px;
> 
>   
>   
>