快速生成标签 快速生成css">
锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

css学习第二天

时间：2023-01-27 07:00:00 5w200kr碳膜电阻

目录

emmet语法

标签-toc" style="margin-left:40px;">快速生成标签

快速生成css样式

格式化代码

css复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

链接伪类

:focus伪类选择器

css元素显示模式

块元素

行内元素

行内块元素

转换元素显示模式

小工具Snipaste

  1. emmet语法

    1. 快速生成标签

      1. 它使用缩写来改进html编写速度，Vscode语法已经在内部集成

      2. 快速生成标签，重复使用输入标签名称tab一键生成。

      3. 父子关系标签，使用>如输入ul>li再按tab键一键生成

      4. 兄弟关系标签，使用 如输入div p

      5. 后者生成类名id直接写名字.demo或者p.one（.开头就是类）或者#two（#就是id） tab键可以直接生成

      6. 自增符号$

      7. 在生成的内容写在标签内使用{}

      8. 代码

                               Document             
                  
                   
        •      
                   
             
                   
             
                   
                              
                              
                   
        •      
                   
                   
        晴朗

      9. 结果

    2. 快速生成css样式

      1. w200按tab生成width：200px

      2. lh26按tab生成line-height：26px

      3. p>代码

        



    
    
    
    Document
    



    
        123
        
    
        456

         

      4. 结果

    3. 格式化代码

      1. 右键使用格式化代码：当代码没有使用规范格式可以右键使用格式化代码

      2. 设置里面搜索format ---用户格式化---保存自动格式化打钩

  2. css复合选择器

    1. 基础选择器与复合选择器建立在一起，由两个或者多个选择器组合而成

    2. 常用复合选择器：后代选择器、子选择器、并集选择器、伪类选择器

    3. 后代选择器

      1. 又称包含选择器

      2. 语法：元素1 元素2 {样式声明}  如：ul li{ color： pink；}

      3. 元素1与元素2使用空格隔开

      4. 元素1是父级，元素2是子级，选择元素1里面的所有的元素2，（只选择了元素2里面的内容）

      5. 代码

        



    
    
    
    Document
    



    
          
        
        1. 我是ol的孩子
          2. 
        
        2. 我是ol的孩子
          3. 
        
        3. 我是ol的孩子
          4. 
        
        4. 我是ol的孙子
          5.

      6. 结果

         

    4. 子选择器

      1. 只能选择最近的某个子元素

      2. 语法：元素1>元素2{样式声明}  如div>p{样式声明}/*选择div里面所有最近一级的一级p标签

      3. 最终选择的是元素2,使用>号隔开

      4. 代码

        



    
    
    
    Document
    



    
        
        我是儿子
        
        
            我是孙子

      5. 结果

         

    5. 并集选择器

      1. 可以选多组标签，同时为他们定义相同的样式

      2. 并集选择器习惯竖着写

      3. 语法：元素1，元素2{样式声明}  如：ul, div {样式声明}/*选择ul和div标签*/

      4. 使用“，”隔开，意味着“和”的意思

      5. 代码

        



    
    
    
    Document
    



    
        熊大
        
    
        熊二
        
    光头强
    
          
        
        • 小猪佩奇
          • 
        
        • 猪爸爸
          • 
        
        • 猪妈妈
          •

      6. 结果

         

    6. 伪类选择器

      1. 给某些特殊选择器添加效果，如：鼠标放在选择器上，颜色发生变化

      2. 使用冒号“：”表示

      3. 有链接伪类、结构伪类选择器

      4. 链接伪类

        1. 未被访问过的链接语法：a:link

        2. 已被访问过的链接语法：a:visited

        3. 鼠标指针位于其上的链接：a:hover

        4. 活动链接：a:active

        5. 书写顺序：:link---:visited:--:hover--:action。（口诀lvha）

        6. 链接必须单独指定样式

        7. 代码

          



    
    
    
    Document
    



    小猪佩奇
    未按下的链接

        8. 结果

           

        9. 代码

          



    
    
    
    网页常见书写样式
    



    网页

        10. 结果

           

      5. :focus伪类选择器

        1. 选取获得光标的表单元素

        2. 语法：input:focus {blackground-color:yellow;}、

        3. 代码

          



    
    
    
    Document

        4. 结果

           

        5.  

           

  3. css元素显示模式

    1. 元素以什么样的方式进行显示， 如

      自己占一行，如一行可以放多个

    2. HTML元素分为块元素和行内元素

    3. 块元素

      1. div最典型、h 、p、ul、ol、li

      2. 独占一行

      3. 宽度、高度外边距都可以控制

      4. 宽度默认是100%

      5. 注意：文字类的元素不能使用块级元素 。如

        里面不能放

      6. 代码

        



    
    
    
    Document
    



    
        块元素自己独占一行
        瑟瑟发抖

      7. 结果

         

    4. 行内元素

      1. 最典型，、、、

      2. 一行可以显示多个

      3. 设置宽和高是无效的

      4. 默认宽度就是本身的内容宽度

      5. 行内元素只能容纳本身内容的宽度

      6. 链接里面不能再放链接

      7. 但是链接里面可以放块级元素

      8. 代码

        



    
    
    
    Document
    



    正在加载
    加粗显示

      9. 结果

         

    5. 行内块元素

      1. 、、具有块元素和行内元素的特点

      2. 一行上可以有多个行内块元素

      3. 行内块元素中间会有间隔

      4. 默认宽度就是内容的宽度

      5. 高度、行高、外边距及内边距都是可以控制的

      6. 代码

        



    
    
    
    Document

      7. 结果

      8.  

    6. 元素显示模式的转换

      1. 将行内元素转换为块元素：display:block

      2. 将块级元素转换为行内元素：display:inline

      3. 转换为行内块元素:display:inline-block

      4. 代码

        



    
    
    
    Document
    



    行内元素转换为块元素
    行内元素转换为块元素
    行内元素转换为块元素
    
        块级元素转换为行内元素

      5. 结果

         

  4. 小工具Snipaste

    1. F1截图，测量长度大小

    2. F3置顶显示

    3. 点击图片进行取色，先截图再按alt再按c取色

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

相关文章