1、css的三种引入方式：

1.1、行内引入

     
      魔降风云变
     

 

    
         
     
      魔降风云变
     

用的是行内的

    
             
     
      魔降风云变
     

没有找到它的样式

1.2内嵌式：

head中写    

    
             
     
      魔降风云变
     

换了就有了，不能覆盖，优先级没它高

 

1.3外接式：

外接式是定义在head标签中，并且不在style中。

 

 index.css文件

#box{    background-color: black;}

    
             
         
     
      魔降风云变
     

1.4、三种样式的优先级

行内样式>内嵌式和外接式

内嵌式和外接要看谁在后面，在后面的优先级高，会覆盖前面的。

 

2、基础选择器

2.1、id选择器

唯一的

#xxx

 id选择器就是在标签里面加个id,可以和class同名  #id名字{css}

    
             
     
      小马过河
     
    
     
    
     
    
     
    
     

 

2.2、类选择器

可以重复，归类，类也可以设置多个

.xxx

border-radius边框圆角，似乎当边框圆角和正方形div的宽高一致的时候就会成圆形

.active{            border-radius: 40px; #将200改为40        }

 2.3标签选择器

标签{css} div{}   p{}

 作用于多个相同标签

    
             
     
      小马过河
     
    
     
    
     
    
     
    
     

 

使用场景一（a标签）：

取消所有a标签的默认下划线

    
             百度    百度    百度    百度    百度

 

使用场景二（重新设置边框）：

    
         用户名：

添加标签选择器，取消边框

    
             用户名：

鼠标放到那个位置点击一下，又出现蓝色框，这个被叫做外线：

去掉外线，这样默认的线都没了，可以重新设置边框：

input{            border: none;            outline: none;        }

重新设置边框：

    
             用户名：

 

#mcw{            border:9px solid #0000cc ;            height: 60px;        }

给边框加个高度，字体的高度还是没有变化　　 

 将字体设置大点：

#mcw{            border:9px solid #0000cc ;            height: 60px;            font-size: 30px;        }

 和别人的框比起来，别人的框文字在左右不能到边，下面设置一下

#mcw{            border:9px solid #0000cc ;            height: 60px;            font-size: 30px;            padding: 0 100px; #第一个表示上下，第二个表示左右，内部填充，边框长度也加了，        }

 

3、盒模型

3.1、

    
             
     
      魔降风云变
     

盒模型200*200

3.2、pading设置一个值，上下左右。

pading设置上下左右各50px内边距，一个值。盒子大小变成300*300

如果我在div中加些字，如果不设置pading。默认内部子元素都在左上角开始显示，。所以通过pading可以调整内部子元素的位置。一个元素也叫一个标签。

再添加一个边界  border    ，盒子加锁边框大小变成了308*308

如果我想保持盒子大小，那么我要调整pading，border，和盒子高度宽度的大小。

302*302

#box{            width: 200px;            height:200px;            background-color: red;            padding: 50px;            border: 1px solid #000;            }

3.3pading两个值，表示上下和左右

#box{            width: 200px;            height:200px;            background-color: red;            padding: 0 20px; #上下0，左右20.0px可以省略px            border: 1px solid #000;            }

3.4、pading三个值，表示上 左右 下

#box{            width: 200px;            height:200px;            background-color: red;            padding: 0 20px 30px; /* 0上  20左右  30下            border: 1px solid #000;            }

 3.5、pading四个值，表示 上 右  下 左 ，

#box{            width: 200px;            height:200px;            background-color: red;            padding: 10px 20px 30px 40px;  /*上 右  下 左  顺时针*/            border: 1px solid #000;            }

3.6、pading单独设置一个方向 

#box{            width: 200px;            height:200px;            background-color: red;            padding-top: 20px;            border: 1px solid #000;            }

单独设置pading-top ,文字在盒子里往下挤了。单独左边增加，文字往右走；  此外还有其他

pading

pading-top

pading-bottom

pading-left

pading-right

3.7盒子设置magin

#box{            width: 200px;            height:200px;            background-color: red;            padding-top: 20px;            margin-left: 30px;            border: 1px solid #000;            }

 左边加个30的margin，盒子边框整体右移。

盒子body本身还有8px的大小

 

4、标签嵌套关系

4.1标签的嵌套关系之块级标签

块级标签特点：独占一行，可以设置宽高，如果不设置宽，默认是父标签的100%宽度。

块级标签属性：display

p标签的使用这个样式，p标签上下还有16的margin。

 

body 上下左右浏览器默认设置8px的margin

块级标签，比如div。块级标签display的属性值默认是block，浏览器内置的，默认给div设置的。

块级标签可以将display修改掉，将它修改为inline。

没有显示东西：

因为么有添加内容呢

    
     
      魔降风云变
     
    
小马过河

就像将它们变成了span标签一样，不好使

4.2、标签的嵌套关系之行内标签

行内标签特点：1、在一行内显示 2、不可以设置宽高，如果不设置宽高，默认是字体大小 

 

    
     
      魔降风云变
     
    
小马过河
    百度一下    小郭吹雪

如果div标签，p标签都和 a标签和span标签都在一行内显示，证明块标签转行内标签是没有问题的。这里块转行内标签了。块转行内用的不多，但是行内转块用的比较多。

如果我给行内标签加个宽度和高度，没有生效的。

    百度一下    小郭吹雪

行内标签不能设置宽高

如果我想要设置行内标签的宽度和高度，那么把行内标签改成块标签

a{            width: 100px;            height: 40px;            background-color: red;            display: block;        }

再给a标签设置一下

a{            width: 100px;            height: 40px;            background-color: red;            display: block;  /*显示方式 block 显示块  inline 显示行内  inline-block 行内块*/            text-align: center; /*水平文本排列方式 ：左中右显示*/            line-height: 40px; /*行高：一行的高度。当行高=盒子模型高度的时候，实现垂直居中*/            text-decoration: none; /*文本修饰： none 无修饰  underline 下划线  line-through 有点像删除线 */            color: #333333;        }

给a标签水平居中，垂直居中，去下划线，设置颜色

修改一下测试text-decoration: line-through; 有点像删除线

放大点看

用标签del实现删除线效果：

    
         
         百度一下    小马过河    小郭吹雪

4.3行内标签之行内块标签

 行内块标签特点：1、在一行内显示 2、可以设置宽高

    
         小郭吹雪        

input{            width: 40px;            height: 60px;        }    

给input添加宽和高之后，也可以变高，变宽，因为它是行内块，这样看来行内块也是可以设置宽度和高度的。

 

行内块使用演示

    
         小郭吹雪    小马过河

两个行内标签span结果：

        　　　#s1{height: 40px;display: block;background-color: #d33333;}

如上设置为块则会换行

 

如果设置为行内块则同行显示。当同行中某部分要设置宽度、高度且不换行的时候可以设置为行内块

#s1{height: 40px;display: inline-block;background-color: #d33333;}

#s1{
   width: 60px;height: 40px;display: inline-block;background-color: #d33333;}

当再添加宽度的时候，宽度不够，这个是换行了吗？但是其它内容还是跟它在同行，

 问题：行内标签能包裹一个块么？比如  a标签不能设置宽高，包一个块标签能撑起来么？是撑不起来的。行内标签不能放块，有个别例外的。也可以把块变成行内块，行内块是放到行内的。块里面可以包行内。div里面可以包div，可以包a标签。a里面可以包image，因为image是行内块，是行内的，可以先把a标签转成块的。

比如如下栗子：

行内标签a包行内块image，可以包着，但是难以撑起来。但是点击图片任一部位还是可以跳转的。

 

可以给a标签变成块

a{            width: 200px;            height: 100px;            display: block;        }

4.4嵌套关系总结：

　　块级标签可以嵌套块级标签、行内标签和行内块

　　p标签不要嵌套div，也不要嵌套p，

　　　　p里可以放 a img 表单控件

　　行内标签尽量不要嵌套块级标签

比如例外的p标签

    
        小马过河        
     
      魔降风云变
     
    

浏览器修改掉了：

所有不要p包div，可以用div去包p。

 网页大多是图片和文字，所以一般最内层的标签大都是a标签和span这些标签

 

 5、高级选择器

5.1、后代选择器

    
             
     
        
      
            
       
                
        
                    
         
                        魔降风云变                    
                
        
            
       
        
      
    
     

后代选择器和单独用p标签的区别：后代选择器限定了选择区间，哪个div下的哪个标签。限定了独立的逻辑区 。

一般嵌套也不能嵌套太多层，一般是不超过8层，超过8层写代码都费劲。

如果我修改一下#box p{color: red} 为#box p a{color: red} ，p下的a标签也可以的

p内包一个a标签                    
                        魔降风云变                    
 #box p a{color: red}

5.2、子代选择器

    
             
     
        
      
            
       
                
        
                    
         
                        魔降风云变                    
                
        
            
       
        
      
        
      
            小马过河        
    
     

 子代选择器只能作用于它本身下的那一层。魔降风云变不是子代，所以子代选择器不能作用于魔降风云变。

 

    
             
     
        
      
            
       
                
        
                    
         
                        魔降风云变                    
                
        
            
       
        
      
        
      
            小马过河        
    
     

子代选择器也可以连续>，但是不宜太多

5.3组合选择器

很多标签都有margin。

    
             
     
        
      
            小马过河        
        
      
            
       
锄禾
            
       
当午
            
       
千门万户曈曈日
        
      
    
     

ul标签有margin和pading，ol也有。body有8pxmargin，p标签也有margin。

很多标签都有margin，你不确定它是多少呀，这样的话布局不好计算，那就把它们都去掉。

我添加个组合选择器，我们已经这些p,ul,ol,body都有margin，那就都选中，让这些标签组合起来共用一套样式。把这几个设置为0然后后面重新设置被叫做重置样式

去掉之后都定格写了

可以重置样式的有：也可以把a标签的下划线重置样式。

p,ul,ol,body{            margin: 0;            padding: 0;        }        input,textarea{            border: none;            outline: 0;        }

重置样式，去掉所有的margin和padding。然后在画布上按照自己的想法去画。常用。

比如小米的网站重置margin

 

 5.4、交集选择器

两个选择器作用于同样的内容

    
             
正常字体
    小马过河

 

 

 

    
             
正常字体
    小马过河    小马过河2    魔降风云变1    魔降风云变2

 交集span.active{}，既是span标签，又有类active的可以被选中。中间不要隔开，隔开就不生效了

 

 

6、css的继承

 6.1继承实例演示

    
             
     
        
      
魔降风云变
    
     

这样字体肯定是红色的

 

但是如果装饰的是父的呢？字体也是红的么？同样是红的。#box{}作用的是div，但是p标签也变红了。

     
     
      
魔降风云变
 
     

看开发工具可看见p标签的继承来自哪里：

那么还有没有其他的可以被继承的属性呢

#box{            color: red;            height: 40px;            text-align: center;        }

可以看到height是浅红色，没有继承过来。高是盒子模型的属性，不能继承

 

行高不是盒子属性，那么行高可以被继承么？

#box{            color: red;            height: 40px;            text-align: center;            line-height: 80px;        }

可以继承行高

继承性：在css有某些属性是可以继承下来，color,text-xxx,line-height,font-xxx是可以继承下来

 

如下：

    
             
     
        
      
魔降风云变
    
     

继承来的字体是26px。bgc不能被继承过来，自己设置了红色背景，给p标签。p标签继承来的行高30，div的高是40，所以黄色漏出10px高度。

 

 

    
             
     
        
      
魔降风云变
    
     
    小马过河

body14，box26,继承了box的26.

 

用的p标签自己的，没用

 

没用那几个继承的，用的p标签自己的。

    
             
     
        
      
魔降风云变
    
     
    小马过河

由下图可知，用的#box p{}装饰的。这里尽量用#box p{}指定哪里p标签。而不是其它div下的p标签。body和box可以继承过来，但是我需要单独给它写，就选中它单独为它赋值，覆盖掉父的属性。这里用的是后代选择器。因为有继承关系，那么我们就应该给body设置一个样式作为默认样式。当某一部分需要单独设置，那么选中这一部分单独设置。于是，就出现了一个问题，就是继承的顺序是什么？

 6.2继承顺序问题

 下面程序，看看结果是继承哪个的呢？

    
             
     
        
      
            
       
                
        
魔降风云变
            
       
        
      
    
     

首先是：<p class="active">魔降风云变</p> ，style 直接写在行内的优先级最高，那么这里只研究内嵌中的继承顺序。

样式如下的时候结果是红色：

样式有了重叠性。当标签选择器和类选择器同时在的时候，类选择器覆盖了标签选择器的：

 

 是类选择器和标签选择器放的位置先后导致的么？那么我调换顺序试试：

结果还是现实类选择器的。由上可知，内嵌样式中，继承的顺序是类选择器优先于标签选择器，实际类选择器权重10，标签选择器权重1

 

当标签选择器，类选择器，id选择器都在时，显示的是id选择器里的。 #id选择器的权重实际上是100，权重更大些。在行内写的style是1000

上面三个里id选择器权重最大，优先级高，那我用它再来做比较：

结果是下面那个优先。类选择器#active{}是100,　#box1 p{}类选择器是100+1=101的权重，优先于单独的类选择器。　

 

再看下面的优先级：

先比id,之前id选择器没有的把它去除掉了；然后再看id选择器后面的选项，结果是下面那个优先

再看下面的：

结果还是gold。gold和green对比：它们都有id选择器。继承来的权重为0#box1 #box2 {color: green}，如果选中p标签了的，就按这个规则来，如果没有选中，那就看继承不继承，跟继承没关系那就忽略掉。继承的权值为0，那么如果是同时继承来的怎么办呢？

看下面这个

越接近的权值越大

 

6.3继承总结

综上

继承性：在css有某些属性是可以继承下来，color,text-xxx,line-height,font-xxx是可以继承下来

权重比较规则：

继承来的属性权重为0

前提是选中了标签权重比较；

　　1.数选择器数量： id 类 标签 谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属

　　2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性

　　3.同是继承来的属性

　　　　3.1 谁描述的近，谁的优先级越高

　　　　3.1 描述的一样近，这个时候才回归到数选择器的数量

 6.4其它继承栗子

1）

2）

 或者

　　　　#box1 #box2  .wrap3 p{color: brown}   # 100 100 10 1  #权值大

　　　　#box1 .wrap2 .wrap3 p{color: gold}    #100 10 10 1            

3)

在这种情况下谁在下面就是谁

 4）数选择器 两个优先级高的id选择器

 5）！importent不常用，大多调试

6）即使!important也比不过行内的

 
魔降风云变

 

 

 调试的话可以用行内的来调试