Day3:html和css

标题图

Day3:html和css

多类名选择器

样式的显示效果是跟html元素中的类名先后顺序无关,而是跟css样式的书写上下顺序有关.




    
    Demo
    


    多类名
    多类名
    多类名
    多类名
    多类名
    多类名

`id`选择器

id选择器是使用#符号的:

#id名{属性:属性值;}

class好比人的名字,可以多次使用,而id选择器是代表唯一的,如人的身份证号码.一个id只能使用一次.(不允许使用多次,浏览器兼容性好,虽然可以用多次,但是是不允许这样做的)

id只使用一次,class可以使用多次.




    
    Demo
    


    id选择器
    id选择器

通配符选择器

*代表所有,通配符选择器用*号表示.




    
    Demo
    


    我是文字
    我是文字
    我是文字
    我是文字

基础选择器

标签选择器 -

类选择器 - .nav可使用多次
 id选择器 - 只能使用一次
通配符选择器 - 几乎不用
字体样式
css是如何控制样式的



    
    Demo
    


    123

2018 体育收藏本文

新浪[微博]中国


字体样式属性:
font-size字体大小;
   
   
   
   
  
  
  
  
  
  
 
 
   
    
    单位 
    说明 
    
   
   
    
    em 
    1em相当于一个字体 
    
    
    px 
    像素 
    
    
    in 
    英寸 
    
    
    mm 
    毫米 
    
    
    pt 
    点 
    
   
  
 在网页统一使用px 
 font-family:字体 
 p{font-family:"微软雅黑";}
 
 font-weight:字体 
 语法: 
 font-weight: normal | bold | bolder | lighter | number |
参数:
normal正常字体
bold:粗体
span{ font-weight: 600}
 
 font-style:字体类型 
 // 语法

font-style: normal  | italic |
italic: 斜体
 
  
  要点:
 数字400等于normal,而700等于bold
 font-style font-weight font-size font-family 
  
 


    
    Demo
    


    字体连写


 
 文本样式 
 color属性: 
  
  预定义的颜色 
  十六进制 
  RGB代码 
  
 红加绿黄,红绿蓝. 
 line-height:行间距
 text-align:水平居中,让盒子中的文本居中
 text-indent:首行缩进 
 left right center
 
  
   
     
    
   
  
    效果 
   
  
  textOdecoration文本的修饰 
  
   
    
    值 
    说明 
    
   
   
    
    none 
    默认 
    
    
    underline 
    文本下的一条线 
    
    
    overline 
    定义文本上的一条线 
    
    
    line-through 
    定义穿过文本下的一条线 
    
   
  
 语法： 
 text-decoration : none || underline || blink || overline || line-through 
 
 参数： 
 none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线 
 
 


    
    Dome
    


    达叔小生
    现在
    倾斜 
        倾斜
    加粗
    下划线


 
  
  复合选择器 
  
 // 子代选择器



    
    Demo
    


    
        
            一级菜单
            
                二级菜单
                二级菜单
                二级菜单
            
        
    


 
 后代选择器 
 


    
    Dome
    


    
        
           123
           
                
                    abc
                
            
        
    


 
 后代选择器例子: 
 div p {
 color: blue;
}


  

 
 .da p{
 color: blue;
}

 

 
 


    
    Demo
    


     1 
     1 
     1 
     
        2 
    
     
        2       
    
     
        2       
    
     
        3       
    

     1 
     1 

    
        苹果
        梨子
        苹果
        梨子
    
    
        苹果
        梨子
        苹果
        梨子
    



 
  
  交集选择器和并集选择器 
  
 


    
    Demo
    


    交集选择器
    交集选择器
    交集选择器
    交集选择器


 
 


    
    Demo
    


    并集选择器
    并集选择器
    并集选择器
    并集选择器
    并集选择器


 
 链接伪类选择器 
 :link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
 
 


    
    Demo
    


    


 
 


    
    Demo
    


    


 
     
 
 显示模式 
 display显示模式 
  
  block-level块级元素 
  
 ~, , , , , 等
 
  inline-level行内元素 
 , , , , , , , , , 
 
  
   
     
    
   
  
    行内元素的特点.png 
   
  
  
   
     
    
   
  
    块级元素的特点.png 
   
  
 行内块元素(inline-block) 
   
 
  
   
     
    
   
  
    行内块元素的特点.png 
   
  
 块转行内: display:inline
行内转块: dispaly:block;
块,行内元素转为行内块: dispaly: inline-block;
 
 // 转换
    

    123
    123
    123
    abc
    abc
    abc
    百度
    百度
    百度
    百度

 
 


    
    Demo
    


      
        网站导航
        网站导航
        网站导航
        网站导航
    
    
        123
    
    baidu


 
  
  达叔小生：往后余生，唯独有你
 You and me, we are family !
 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
 博客： 达叔小生
 https://www.jianshu.com/u/c785ece603d1 
  
 结语 
  
  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注 
  小礼物走一走 or 点赞

Day3:html和css

多类名选择器

`id`选择器

通配符选择器

字体样式

123

字体连写

文本样式

`textOdecoration`文本的修饰

并集选择器

链接伪类选择器

显示模式

~

`, ,`
`,`
`,`
`,`
`等`

`inline-level`行内元素

行内块元素(`inline-block`)

结语

你可能感兴趣的:(Day3:html和css)

单位	说明
`em`	1`em`相当于一个字体
`px`	像素
`in`	英寸
`mm`	毫米
`pt`	点

值	说明
`none`	默认
`underline`	文本下的一条线
`overline`	定义文本上的一条线
`line-through`	定义穿过文本下的一条线