周末总结：CSS学习

CSS的使用方式

• 内联方式
  • 样式定义在单个HTML元素中

  <!-- 内联样式：在元素的style中直接写样式，无法复用 -->
  <h1 style="color:red;">CSS</h1>
  

• 内部样式表
  • 样式定义在HTML的头元素中，整个网页范围内可复用,在head元素里的style标签里写样式，

  <style >
  /* css的注释是这样的*/
  	h2{
  		color:blue;
  	}
  </style>
  

• 外部样式
  • 将样式定义在外部的一个CSS文件中（.css文件），哪个引用，哪个复用这个样式
  • 由HTML页面引用样式表文件
  • 引用外部标签

  	<link rel="stylesheet" href="名字" />
  

CSS的特性

CSS由多个样式规则组成，每个样式规则有两部分：选择器和样式声明

• 继承性：父元素的CSS声明可以被子元素继承，（字体，颜色等）
• 层叠行：同一个元素若存在不同的CSS，对不同的CSS可以叠加
• 优先级：给同一个元素设置相同声明时，效果以后者为准，也叫就近原则

CSS选择器

• 元素选择器 通过元素名来选择CSS目标

  	h2{
  		color:blue;
  	}	
  

• 类选择器 通过独立于文档的元素来指定样式
  • 选择class等于某值的所有元素。class是程序员根据逻辑自己给元素增加的分类
  • 语法为：className：{ 样式声明 }；
  • 所有能够附带class属性的元素都可以使用此样式声明
  • 将元素的class属性设置为样式类名

  	/* 类选择器：选择class等于某值的所有元素。class
  		是程序员根据逻辑自己给元素增加的分类
  	*/
  	.gay {
  		color:pink;
  	}
  

• id选择器 选择id等于唯一某值的元素
  • 仅作用于id属性的值
  • 语法为 #id { 样式声明 }

  	/*id选择器，选择id等于唯一某值的元素*/
  	#p4{
  		color:yellow;
  	}
  

• 选择器组 写出一组选择器，选中每个选择器所对应目标的并集
  • 选择器声明以逗号隔开的选择器列表

  .gay,#p4{
  	font-weight:bold;
  }
  

• 派生选择器
  • 选择某个元素的子孙 #p 子孙名{}
  • 选择某个元素的儿子 #p>儿子 {}

  /*选择某元素的子孙*/
  #p5 b {
  	color:red;
  }
  /*选择某元素的儿子*/
  #p5>b{
  	font-size:30px;
  }
  

• 伪类选择器 用于设置一个元素在不同状态下的样式
  • :link 向未被访问过的超链接添加样式

    	:link{
    		color:green;
    	}
    

  • :visited 向已被访问过的超链接添加样式

    	:visited{
    		color:red;
    	}
    

  • :active 选择激活态的（正在点，正在使用）元素

    	#i1:active{
    		background-color:blue;
    	}
    

  • :focus 获取焦点时添加央视

    	/*选择有焦点的文本框/密码框/文本域*/
    	#i2:focus{
    		background-color:green;
    	}
    

选择器的优先级

• 选择器是有优先级的，可以通过权重来计算
• eg:ID 100， 类 10，元素 1 等 ，一般定位越准确，分越高

CSS声明

• border属性：用来设置元素边框
  • 样式单位： % 百分比，px 像素 ，em 等

  	/*1.四个边设置相同边框*/
  p{
  	border:1px dashed red
  }
  /*2.单个边设置边框
  	left 左
  	right 右
  	top 上
  	bottom 下
  */
  h1{
  	border-left: 10px solid blue
  }
  /*块元素一般宽度默认是100%，高度自适应，内容越多他越高
  	固定高度可能导致内容溢出*/
  p{
  	width:300px;
  	height:60px;
  	overflow:auto;
  }
  

• padding 内边距 ， margin 内边距

  div{
  	border:1px solid red;
  	width:100px;
  	height:100px;
  }
  /*四个边设置相同的边距*/
  #d1{
  	padding:20px;
  	margin:30px;
  }
  /*四个边设置不同边距
  	上右下左，顺时针定义
  */
  #d2{
  	padding:10px 20px 30px 40px;
  	margin:40px 30px 20px 10px;
  }
  /*单个边设置边距
  	left/right/top/buttom
  	*/
  #d3{
  	padding-left:20px;
  	margin-bottom:30px;
  }
  
  /*对边设置相同边距
  	先设置上下，再设置左右*/
  #d4{
  	padding:20px 40px;
  	margin:30px 10px;
  }
  
  /*对边设置边距的特例
  	设置外边距时，若左右外边距值为auto，则该元素水平居中
  */
  #d5{
  	margin:20px auto;
  	
  }
  

• overflow :当内容溢出时怎么处理
  • visited 默认，溢出部分可见
  • hidden 溢出部分隐藏
  • scroll 加滚动条
  • auto 溢出加滚动条

  p{
  	width:300px;
  	height:60px;
  	overflow:auto;
  }
  

• 背景属性
  • background-image:url(‘路径’)
  • background-repeat:repeat 可控制背景图的平铺效果
    • repeat：在垂直和水平方向重复
    • repeat-x:仅在水平方向重复
    • repeat-y:仅在垂直方向重复
    • no-repeat:仅显示一次
  • background-position:用于改变背景图在元素中的位置
    • 取值：x%,y%或x,y或left/right//top/center/bottom
  • background-attchment:改变背景随页面滚动而移动
    • 默认是 scroll：随页面滚动
    • fixed ：背景图固定

  <style type="text/css">
  body{
  	background-image:url(../image/background.png);
  	background-repeat:repeat-y;
  	background-position:center;
  }
  /*2. 可采用简化的方式，一起设置背景图和背景色，语法如下
  	background:背景色 背景图 平铺 位置
  	上述四个可酌情省略，但至少要保留背景色或者背景图中的一个
  */
  
  .enemy{
  	border:1px solid red;
  	width:50px;
  	height:50px;
  	margin:20px auto;
  	background:
  	url(../image/airplane.png) no-repeat center;
  }
  .hero{
  	border:1px solid red;
  	width:125px;
  	height:125px;
  	margin:20px auto;
  	background:
  	url(../image/hero0.png) no-repeat center;
  }
  /* 固定背景图*/
  body{
  	background-attachment:fixed;
  }
  </style>
  
  

文本样式

• text-aligh:文本位置
• text-decoration:文本下划线，删除线等
• line-height:行高，文字在其行高范围内垂直居中

<style type="text/css">
	h1,p{
		border:1px solid red;
		width:300px;
		
	}
	h1{
		text-align:center;
		text-decoration:underline;
		height:100px;
		line-height:100px;
	}
	p{
		text-indent:2em;
		line-height:3em;
	}
</style>

定位

• .定位的作用：解决元素排列（摆放）的问题

使用定位可以将元素摆放到任意位置

• 定位的分类

  • 流定位(默认的)：块元素垂直排列，行类左右排列

  流：元素有序排列而形成的队伍

  • 浮动定位：可以让元素左右排列

    • 分类：左/右浮动
    • 浮动的步骤
      1. 浮动时脱离流
      2. 目标的弟弟元素跟上
      3. 到达指定位置
    • 规则 目标脱离队伍（流）
    • 左浮动：顺序排列（从左到右） 右浮动：倒序排列
    • 如何消除浮动影响
      1. 只消除对叔叔的影响，父元素边框不需要显示
         - clear:left/right 在哪个元素加clear，该元素不受影响，出现在浮动元素下方
      2. 消除对父亲元素的影响，父元素边框显示
         1. 在父元素内增加新的块
         2. 对此空块定义clear
         3. 该空块会出现在浮动元素下方
         4. 因为空块还在流内，所以拉伸了父元素高度

    	<style>
    	#d0,p{
    			border:1px solid red;
    			width:400px;
    		}
    		#d1,#d2,#d3{
    			width:100px;
    			height:100px;
    			margin:10px;
    		}
    	#d1{
    		background-color:#f00;
    	}
    	#d2{
    		background-color:#0f0;
    	}
    	#d3{
    		background-color:#00f;
    	}
    	/*浮动*/
    	#d1,#d2,#d3{
    		float:left;
    	}
    	/*消除浮动影响
    		在哪个元素加clear，则该元素就不受影响，
    		他会出现在所有浮动元素的下方*/
    	/*p{
    		clear:left;
    	}*/
    
    	#d4{
    		clear:left;
    	}
    </style>
    

  • 相对定位：可以让元素以自身为目标产生微小的偏移

    • 通过position:relative;设置位相对定位

    	/*鼠标悬停时，图片向右上方偏移两像素，从而实现抖动的效果*/
    	li:hover{
    		position:relative;
    		left:2px;
    		top:-2px;
    	}
    

  • 绝对定位 以父亲为目标产生很大偏移

    <style>
    div{
    	border:3px solid #ccc;
    	width:185px;
    	height:160px;
    	margin:30px auto;
    	/*只设置position，不设置偏移量，让他成为子元素绝对定位的目标，
    	并非让他真的偏移*/
    	position:relative;
    }
    p{
    	position:absolute;
    	bottom:10px;
    	width:185px;
    	background-color:#fff;
    	text-align:center;
    }
    </style>
    

  • 固定定位 可以让元素以窗口为目标，产生巨大偏移

    <style>
    	div{
    		width:80px;
    		border:1px solid #ccc;
    		text-align:center;				
    		position:fixed;
    		bottom:20px;
    		right:10px;
    	}
    	a{
    		text-decoration:none;
    	}
    </style>
    

定位比较

• 共同点
  • 都要设置偏移，设置偏移方式一样
  • 设置偏移的语法 left:像素（以某条边为基准）向中心偏移为正数，反之为负
• 区别
  • 相对定位
    • 以自身为目标
    • 元素不脱离流（其位置不释放）

    只有相对定位不释放

    • position:relative
  • 绝对定位
    • 以带有Position属性的父辈为目标
    • 若父辈中都有position元素，则采用就近原则
    • 若所有父辈都没有position元素则以body为目标
    • 绝对定位目标脱离流，位置释放
    • position:absolute
  • 固定定位
    • 以浏览器窗口为目标
    • 元素脱离流，位置释放
    • position:tixed;

    可以把元素挂在窗口上永不移动

如何选择定位

1. 固定定位：是否要将元素挂在窗口上不移动
2. 浮动定位：是否要将元素左右排列
3. 相对定位：是否要将元素在原位置上产生很少偏移
4. 绝对定位：15秒没想出来就为绝对定位

设置值图片的堆叠

• z-index属性的大小

/*堆叠顺序：元素的显示层次，数值越大越靠上，反之越靠下*/
	img:hover{
		z-index:999;
	}

列表样式的改变

• list-style-type属性
  • 无序列表
    • none:无标记
    • disc: 实心圆 默认
    • circle:空心圆
    • square:实心方块
  • 有序列表
    • nono:无标记
    • decimal:数字（1，2，3，。。。） 默认
    • lower-roman:小写罗马数字
    • upper-roman:大写罗马数字
• 通过设置 list-style-img：url( ) 使用图像替换列表项的标记

修改元素的显示方式

• display:这个属性可以将元素的显示方式设置为块，行，或元素块，或隐藏的方式
  • 属性
    • block：块
    • inline：行内
    • inline-block:行内块
    • nono：隐藏

div改为行内元素时，中间的空格无法去掉，所以一般使用浮动