HTML+CSS_第一部分_02（CSS_1:样式、颜色、背景、容器、字体、文本、选择器、继承关系、优先级）

一 CSS介绍

（1）基础

格式：   选择器{属性1：值1; 属性2：值2} 
单位： 	
		 px  像素     
		 %  百分比 (外容器为600px  50%代表300px)
基本样式  
		Width 宽         
		height   高         
		background-color 背景颜色
css注释 :
	   /* CSS注释 */

（2）内联样式和内部样式

  内联样式： 在html标签中直接添加style属性(优先级比较高)
  		<div style="width: 100px;height: 100px;background-color: coral;">这是一个块</div>

   内部样式：
  		 在<style>标签定义样式
  
  内联样式的优先级大于<style>标签的优先级

//在head中定义
<style>

  div{width: 200px;height: 200px;background-color: cyan;}

</style>


<div>还是一个块</div>

​    ***\*内部样式可以实现代码的复用（多次使用）\****

（3）外部样式的两种写法：

  引入一个单独的.css文件（引入一个外部的样式）

		引用方式一：
			用<link>标签（放到head处去引用）
				rel 属性是： 规定当前文档与连接文档之间的关系
							（可选值非常多：一般都用stylesheet）
				href 属性是： .css文件的地址

<link rel="stylesheet" href="./common.css">

		引用方式二：

		    @import方式（放到head处去引用）
		   
			格式：
				<Style>
					@import url(地址);
				</style>

<style>
	   @import url('./common.css');
 </style>

（4）css颜色表示法：

   1：单词表示法：

			Read  blue  green  yellow ..........

   2:十六进制表示法：

			0 1 2 3 4 5 6 7 8 9 a b c d e f
	
			#000000(黑色)  ~  #ffffff(白色)

   3:rgb三色原理表示法：

​      		Rgb(值1，值2，值3);
			值的范围：0 ~ 255
			Rgb(0,0,0)  黑色
			Rgb(255,255,255)   白色

单词表示法知道准确的颜色，但颜色数目较少

十六进制表示法和三色原理表示法颜色丰富但不知道具体值

提取颜色的两种方法：

\1. 下载谷歌浏览器插件FeHelper，可以提取网页上颜色的十六进制值

\2. 利用软件ps

（5） 背景样式

​ 属性：

	（1）Background-color  背景颜色
	
	（2）Background-image  Url(背景地址)   设置背景图片
	
	​       默认情况x,y都会平铺满

	（3）Background-repeat  背景图片的平铺方式
	
		   	Repeat-x  只x进行平铺
	    	 Repeat-y  只y进行平铺
			 Repeat   x,y都进行平铺（默认值）
			 No-Repeat  x,y都不平铺
	    （如果容器位置大于背景图，只放背景图的一部分）

	（4）Background-position： x  y  背景图的位置

		 	默认在容器左上角（0,0）
		    x,y值可以有px也可以用单词（x:left,center,right）(y:top,center,bottom)
	
	（5）Background-attachment  背景图片随滚动条的移动方式

​    		 很多选择，主要学scrool和fixed：
				 Scrool  背景图放到容器内(相对于容器的位置，随着滚动条把容器划走而划走）
				 Fixed   背景图放到浏览器上（相对于浏览器的位置，一直在滚动条的位置）

（6） 容器的边框样式

1 属性：

	（1）  border-style		边框样式
			取值：
				Solid  实线
				Dashed  虚线
				Dotted  点线
	
	（2） Border-width		边框宽度
				px 值
				
	（3）Border-color		边框颜色
			 	Red  #f0f0f0  rgb(255,255,255)
			 	
2 近对一条边框设置样式

		Border-(top/bottom/left/right)-属性
		
		例：
			Border-right-style  只对右边框设置样式

 3边框实现三角形：

	​    当边框比较粗时，会发现两条边的连接处是各种占一半的
		利用该特点，把容器大小为0，边框加宽
		让其一条边显示颜色，其他为透明颜色（transparent）
		改为透明设不管容器什么颜色都会显示三角形

（7）CSS字体设置

1、字体主题

​（1）属性

	font-family:主题1，主题2，主题3.........；
	如果电脑主题1不识别用主题2,依次类推{主题2，主题3是备选方案}

（2） 字体主题的两种写法和常见主题样式：

   		英文表示：Arial 、’Times New Roman’
   		中文表示：微软雅黑、宋体、衬线体、非衬线体

  	有的英文主题对中文不起作用，有的中文主题对英文不起作用
	字体主题中间出现空格的时候要加单引号 ‘字体主题’

2、字体大小

属性：
	 Font-size:  px或单词
	
			默认是16个像素（一个字占多数像素）
			规范：字体大小一般为偶数
	
	单词表示法：

3、 字体的粗细

   Font-weight :         字体的粗细
​ 			   Normal  正常的
			   Bold   加粗的
	
或者直接根据数字设置字体大小（100  200  300  400  ...... 900）
​              (100~500是正常的 600~900是加粗效果)

4、 字体样式

Font-style:       字体样式
		 正常（normal）  
		 斜体（italic或者oblique)

oblique也表示斜体，但是用的比较少是和italic有区别的：
	区别：
		 1：italic 所有带有倾斜属性的主题可以设置
		 2：oblique 主题带不带倾斜属性都可以设置

（8）文本（段落） < p >标签的

1、文本样式

	Text-decoration:       文本装饰
			下划线：underline			
			上划线：overline
			删除线：line-through		
			不添加任何修饰：none
	可以同时添加多个值（空格隔开）

2、文本大小写 (针对英文的)

	Text-tarnsform:	
		全部小写： lowercase
		全部大写：uppercase
		首字母全改为大写：capitalize

3、文本缩进

	   主要用于首行缩进（默认一个文字是16px）
		Text-indent:  px或者em  首行缩进px/em个位置     
			em单位：相对单位，永远都是1em的大小为一个汉字大小

4、文本对齐方式

	   Text-align:    
			eft、right、center、justify(两端点对齐)  

5、文本的行高（行间距）

	   默认行高不是固定值，根据字体的大小变化
		Line-height:  
				px或数字（比例值：与字体的大小成比例）  

6、字间距

	letter-spacing:  px                    字与字之间的间距

7、词间距（针对英文段落的）

	Word-spacing:  px                    词与词之间的间距

8、英文和数字实现自动折行

 方法一： word-break:  break-all   非常强烈的折行处理
 方法二： word-wrap:  break-word 不是那么强烈的折行处理、会产生一定的空白处理

（9）css复合样式

符合的写法是通过空格的方式实现的
  （有的复合写法是不需要关心顺序的：background、border）
  （有的复合写法是需要关系顺序的：font）
列如：
	1. background： red  url(...)   repeat 
	2.Border:  1px  red  solid
	3.Font  30 
font最少要有两个值size和family字体类型（主题）,其在最后写，有序
注意：如果非要单一样式和混合样式混合写，先写混合样式在写单一样式，这样样式才不会被覆盖掉

（10）选择器

（1）ID选择器

在css中       #选择器{....}
在html中使用   id=”#选择器”
注意：
	1 根据规范：id是惟一的，一个界面只能出现一次（虽然有错）
	2命名规范，有字母、下划线、字母（且第一个不能为数字）
	3命名方式（规范）：驼峰写法、下划线写法、短线写法

 #div1{color: red;}
<div id="div1">id选择器</div>

（2）class选择器

   css:  .选择器{}
   html class=”选择器”
   
注意：
	1.  一条选择器样式可以作用于多个html语句，可进行复用
	2. 可以添加多个选择器 class=”选择器1  选择器2  选择器3}
	3.多个选择器时，样式的优先级根据css定义时顺序决定，并不是		class属性顺序
	4 .css:   标签.选择器{}   html中只对该标签的类为该选择器的生效
	5. 可选用对个class选择器   class="选择器1  选择器2 ....."

.div2{color: rosybrown;}
 p.div3{color: sandybrown;}
<div class="div2">class选择器</div>
 <p class="div3">class选择器</p>

（3）标签选择器（TAG选择器）

       css:  标签{}     所有标签都是该格式
	   例：
			div{}      ---->    <div></div>
		使用的场景：
			先去掉某些标签的默认样式时
			复杂的选择器：如层次选择器

  h2{color: #011d1a;}
  <h2>标签选择器</h2>

（4）群组选择器

	css:  div , #text ,  .text2{}
	如果多种选择器想定义同一种样式----> 群组选择器
	（id,class,标签都适合使用）

 	#div4 , em , .div5 {color: chartreuse;}
 
	<div id="div4">群组选择器</div>
    <div class="div5">群组选择器</div>
    <em>群组选择器</em>

（5）通配选择器

	*{ }
			把所有的标签都设置为该样式
	应用场景：
			去掉所有标签的添加样式时

*{color: red;}
//把所有标签样式全改为红色

（6）层次选择器

后代  M  N{  }
父子  M > N{  }
兄弟  M ~ N{  }   当前M下面所有的兄弟N标签
相邻  M + N{  }   当前M下面相邻的N标签

ul li{color: red;}  //ul下li全部为该样式
 	 <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
</ul>
#list > li {color: red;} //引用id=”list”的标签下的li为红色，list下下面（孙子）一层的不会改变
 <ul id="list">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>
            <ul>
                <li>444</li>    //不会变
                <li>555</li>    //不会变
            </ul>
        </li>
</ul>
Div~h2{color: red;}  //div下面的h2标签全为该样式
div+h2{color: red;}  //div下面相邻的要的为h2标签，则h2标签为该样式

（7）属性选择器

	M[attr]{ }   该标签有attr属性的全部设置为该样式
            =          完全匹配
		    *=		   部分匹配
			^=         起始匹配
			$=         结束匹配
			[][][]..       组合匹配

		div[class]{color: red;}            //带有class属性的
        div[class=1] {color: salmon;}	  //class属性为1的
        div[class*=2]{color: salmon;}		//class属性中包含2字符的
        div[class^=3]{color: sandybrown;}  //class以3开头的
        div[class$=4]{color: seagreen;}    //class以4结尾的
        div[class][id]{color: teal;}      //同时带有class和id属性的

（8）伪类选择器

伪类选着器用于给某些元素添加特殊的效果，一般用于初始样式添加不上的时候
M:伪类{  }   给M添加伪类

1.

:link 			访问前的样式   （只能添加给a标签）
:visited		访问后的样式	（只能添加给a标签）
:hover			鼠标移入时的样式	（可以添加给所有标签）
:active			鼠标按下时的样式    （可以添加给所有标签）

 		div{width: 100px;height: 100px; background-color: red;}
        div:hover{background-color: royalblue;}//鼠标移入时的背景颜色
        div:active{background-color: black;}//鼠标按下时的背景颜色

注意：如果四个伪类都添加，注意顺序l v h a
一般都只设置a{} 和a:hover{}

2.

使用content属性添加内容（也可以添加别的属性）
:after   在该标签内容的最后添加内容
:before  在该标签内容前面添加内容

	div::after{content: "你好";color: red;}//在div内容后面添加红色的”你好”
    div::before{content: "XXX:";}//在div内容前面添加XXX

  清除浮动，列表前面的下图标都可以用他来做

3.

这三个都是针对表单元素的
:checked   当该表单被选中（checked）时，表单显示该样式               
:disabled	当该表单被设置为不能选中时（disabled）显示该样式
:focus		当光标在该表单处时显示该样式

:checked{background-color: royalblue;width: 100px;height: 100px;}
:disabled{background-color: rebeccapurple;width: 50px;height: 50px;}
:focus{background-color: red;}
<input type="checkbox">
<input type="checkbox" disabled>
<input type="checkbox">

4.结构伪类选择器

:net-of-type(值)   该结构下该标签的第x个为该样式
:net-child(值)     该结构下所有标签的第x个如果为该标签则为该样式

:first-of-type      该结构下该标签的第1个为该样式
:first-child        该结构下所有标签的第1个如果为该标签则为该样式

:last-of-type       该结构下该标签的最后一个为该样式
:last-of-type       该结构下所有标签的最后一个如果为该标签则为该样式

:only-of-type       该结构下该标签为仅有的一个则为该样式
:only-child         该结构下所有标签仅有的一个该标签如果为该标签则为该样式

值有两种写法
	方法1：直接写数字
	
	方法2：数字和n配合使用，n属于0到无穷

	  //li的第2n个为红字体
		li:nth-of-type(2n){color: red;}
		
	   //第2n+1个为红色字体
	        li:nth-child(2n+1){color: red;}
	        
	   //第一个li为红色字体
	        li:first-of-type{color: red;}
	        
		//第一个如果为li标签则为红色字体
	        li:first-child{color: red;}
	        
		//最后一个li标签为红色字体
	        li:last-of-type{color: red;}
	        
	    //最后一个标签如果为li标签则为红色
	        li:last-child{color: red;}
	        
    	 //该结构下面如果只有一个li则该li为红色
	        li:only-of-type{color: red;}
	        
		//该结构下面如果只有一个li则该li为红色
	        li:only-child{color: red;}

<ul>
        <p>2</p>
        <li>1</li>
        <p>5555</p>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <p>66</p>
    </ul>

（10）css样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承

<style>
        div{width: 300px;height: 300px;border: 3px;color: tan;font-size: 50px;}
</style>

<div>
       <p>这时一个段落</p>
</div>

可以发现p标签里面的内容，继承了div标签的字体颜色

（11）优先级

可以选用不同的选着器对同一个标签进行设置样式，当对这么多选着的时候，谁的优先级高？

1 相同样式的优先级：

		当对同一标签设置样式时，后面优先级较高
		（不建议出现重复设置样式）

div{color: red;}
div{color: blue;}
//对统一标签设置了两遍样式，后者把前者样式覆盖（只显示蓝色）

2内部样式和外部样式：

	内部样式与外部样式相同的时候，如果设置了相同的样式，那么后写的引入方式优先级高

 <style>
        div{color: blue;}
 </style>
 <link rel="stylesheet" href="./common.css">//引入外部样式
外部样式后引入，优先级高

3单一样式优先级

style属性设置 > id > class > tag > * > 继承

<style>
        .div1{color: blue;}
        #div2{color: red;}
    </style>

<div id="div2" class="div1">123</div>
会发现现实红色字体，应为优先级 id>class

权重：
style属性设置  1000
 id            100
class           10
tag             1

注意：
 <style>
        #div1{color: blue;}
        .div2{width: 100px;color: red;background-color: chartreuse;}
 </style>
 
  <div id="div1" class="div2">123</div>

可以看到id选择器未设置边框和背景颜色，但class选择器设置了；
同时他俩都设置了字体颜色；优先级只是针对每一个属性，并不是整体样式；
结果显示为蓝色字体和边框和蓝色背景颜色

 <style>
        div{width: 100px;color: red;background-color: chartreuse;}
        div{color: blue;}
 </style>
 <div>这是一个区域</div>
 结果为：蓝色字体+100px的宽+绿色背景

4、提升优先级

   ！Important
提升属性的优先级（非规范方式，不推荐使用，可以把该属性优先级提示到最高）
（不能提升继承的属性的优先级）

<style>
        div{red !important;}
        div{color: blue;}
</style>

<div>这是一个区域</div>
x显示结果为红色字体

5、标签.类{} 和 .类 两种class选择器优先级比较

     标签.类>.类

<style>
         div.div1{color: red;}
         .div2{color: blue;}
    </style>

 <div  class="div1 div2">123</div>
结果为红色字体

6、群组优先级

群组选择器与单一选择器优先级相同，谁靠后定义谁优先级高

<style>
        div{color: blue;}
        div,p{color: red;}   //靠后优先级高
 </style>

<style>
        div,p{color: red;}
div{color: blue;}   //靠后优先级高
    </style>

7、层次优先级

1.权重比较
	  比如：
			ui  li  .box  p  input   1+1+10+1+1
			.hello  spacing   #elem  10+1+100
		    权重相加相比较
		
2.约分比较
     		ui  li  .box  p  input  
			.hello  spacing   #elem 
			按照相同的优先级进行约分