慕课网CSS(2)

选择器{
	  样式;
	  }

标签选择器：html代码中的标签

类选择器：类选器名称{
				css样式代码
					}
					使用方法：1.<span>小米</span>
							 2.<span class= "stress">小米</span>
							 3.   <style>
							  .stress{color:red;}
								</style>

ID选择器：(一个文档只能出现一个ID选择器)
			使用方法：1.<span id ="setGreen">小米</span>
				     2  <style>
				     .#setGreen{
				     			color:green;
				     			}
				     	</style>

子选择器：
					<style>
					.first>span{border:1px solid red;}
					</style>
					<p= class="first">三年级<span>我还是一个</span>

包括（后代选择器）：
   .first  span{color:red;}

总结：1：子选择器中>作用于元素的第一代后代
	  2：后代选择器空格作用于元素的所有后代

通用选择器：
			*{color：red；}
			*：匹配html所有标签元素

伪类选择符
		a：hover{color：red；}
		<a href ="http://www.imooc.com">胆小如鼠</a>

9-2CSS特殊性：按权值的规则
						1.标签的权值为1
						2.类选择符的权值为10
						3.ID选择符的权值最高为100

9-3 层叠：
css样式优先级
				内联样式表 >  嵌入样式表 >  外部样式表
				（标签内部）（当前文件中）（外部文件中）。

9-4重要性：!important
例：
	p{color:red!important;}
	p{color:green;}
	<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
	最终颜色显示红色。

10.1
文字排版--字体：body{font-family:"宋体";}
			   body{font-family:"Microsoft Yahei";}
			  						 微软雅黑
			  						 
10.2：
文字排版--字号、颜色：body{font-size:12px;color:#666}

10.3：
文字排版--粗体：p span{font-weight:bold;}

10.4：
文字排版--斜体：p a{font-style:italic;}

			  <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

10.5：
文字排版--下划线：p a{text-decoration:underline;}

				<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

10.6：
文字排版--删除线： .oldPrice{text-decoration:line-through;}

10.7：
段落排版--缩进：p{text-indent:2em;}
			  <p>1922年的春天</p>

10.8：
段落排版--行间距（行高）：p{line-height:1.5em;}

10.9：
段落排版--中文字间距、字母间距：h1{
    							letter-spacing:50px;
								}
								...
							<h1>了不起的盖茨比</h1>

单词间距设置：h1{
		  	  word-spacing:50px;
				}
				...
			<h1>welcome to imooc!</h1>

10.10：
段落排版--对齐：h1{
   				 text-align:center;
				}	
			<h1>了不起的盖茨比</h1>

11-1：
元素分类：在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：

<img>、<input>

11-2：
元素分类--块级元素：
			a{display:block;}
			将内联元素a转换为块状元素
块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

11-3：
元素分类--内联元素：
				 div{
     				display:inline;
					 }

					......
	
					<div>我要变成内联元素</div>
将块状元素div转换为内联元素，
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

11-4：
元素分类--内联块状元素：同时具备内联元素、块状元素的特点。
代码display:inline-block    将元素设置为内联块状元素
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。


11-6：
盒模型--边框（一）：
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

div{
    border:2px  solid  red;
    }
 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
 
 注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

11-7：
盒模型--边框（二）：
为 p 标签单独设置下边框，而其它三边都不设置边框样式：
div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

11-8：
盒模型--宽度和高度：
css内定义的宽（width）和高（height），指的是填充以里的内容范围


11-9：
盒模型--填充：（元素内容与边框）
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}

11-10：
盒模型--边界：(元素与元素之间)
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}

12-1：
css布局模型：
CSS包含3种基本的布局模型：1、流动模型（Flow）
						2、浮动模型 (Float)
						3、层模型（Layer）
12-2：流动模型（一）
流动（Flow）是默认的网页布局模式
2个特征：
第一点：
第二点:

12-4:
浮动模型:
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

12-5:
什么是层模型？:
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作,但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

层模型--绝对定位:
div元素相对于浏览器窗口向右移动100px，向下移动50px。
								div{
  								     width:200px;
   									 height:200px;
 									 border:2px red solid;
  									  position:absolute;
 									left:100px;
  									 top:50px;
								  }
					              <div id="div1"></div>


12-7:
层模型--相对定位:
position:relative（表示相对定位）:
如下代码实现相对于以前位置向下移动50px，向右移动100px;
						#div1{
  							  width:200px;
 					  		 height:200px;
  							  border:2px red solid;
   							 position:relative;
    						left:100px;
  							 top:50px;
							}

						<div id="div1"></div>

12-8:
层模型--固定定位:
fixed：表示固定定位
以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>

12-9:
Relative与Absolute组合使用:
相对于其它元素进行定位呢:使用position:relative来帮忙
1、参照定位的元素必须是相对定位元素的前辈元素：:
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

2、参照定位的元素必须加入position:relative;
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
....
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

13-1：
盒模型代码简写：
margin:10px 10px 10px 10px;
可缩写为：
margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：
margin:10px 20px 10px 20px;
可缩写为：
margin:10px 20px;

3、如果left和right的值相同，如下面代码：
margin:10px 20px 30px 20px;
可缩写为：
margin:10px 20px 30px;

13-2：
颜色值缩写：
p{color:#000000;}
可以缩写为：
p{color: #000;}

例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}

13-3：
字体缩写：
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句：
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}
注意：
1、
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
    font:12px/1.5em  "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。

14-1:
颜色值:
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色:
p{color:red;}
2、RGB颜色:
p{color:rgb(133,45,200);}
3、十六进制颜色:
p{color:#00ffff;}

14-2:
长度值:
1、像素
2、em:
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}

15-1:
水平居中设置-行内元素:
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
css代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>


15-2:
水平居中设置-定宽块状元素:
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

定宽块状元素:
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>
也可以写成：

margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。



15-3:
水平居中总结-不定宽块状元素方法（一）:

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1.加入 table 标签
2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的


15-6:
垂直居中-父元素高度确定的单行文本:
1:父元素高度确定的单行文本
如下代码：

<div class="container">
    hi,imooc!
</div>
css代码：

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>
2:父元素高度确定的多行文本
html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码：

table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。



 15-9:
 隐性改变display类型:
 有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

 1. position : absolute 

 2. float : left 或 float:right 

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>
css代码

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>