资讯详情

css学习第二天

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. 代码

        <!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .one {             /* 按tac 再tab生成 */             text-align: center;             /* ti2em */             text-indent: 2em;             /* w100 */             width: 100px;             /* h200 */             height: 200px;             /* ti2em */             text-indent: 2em;             /* lh26px */             line-height: 26px;             /* tdn */             text-decoration: none;         }     </style> </head>  <body>     <div></div>     <!-- 父类关系 ul>li 再tab键生成 -->     <ul>         <li></li>     </ul>      <!--兄弟关系 div p -->     <div></div>     <p></p>      <!--兄弟关系 div p -->     <div></div>     <p></p>      <!-- div.nav -->     <div class="nav"></div>      <!-- 生成带有id名标签 div#banner 再tab键生成 -->     <div id="banner"></div>      <!-- 用类名生成标签 p.one 再tab键生成 -->     <p class="one"></p>      <!-- span.gray -->     <span class="gray"></span>      <!-- ul>li#one -->     <ul>         <li id="one"></li>     </ul>      <!-- 用类名生成标签 div.class 再tab键生成 -->     <div class="demo"></div>      <!-- 标签中显示的单词 div{晴朗} 再tab键生成-->     <div>晴朗</div>  </body>  </html>

      9. 结果

    2. 快速生成css样式

      1. w200按tab生成width：200px

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

      3. p>代码

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div>123</div>
    <div>456</div>

</body>

</html>

         

      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. 代码

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 我想要把ol里面的小li选出来改为pink  */
        ol li {
            color: pink;
        }

        /* 父 子 孙 */
        ol li a {
            color: red;
        }

        /* 有两组ul 指定某个ul有个nav类名 */
        .nav li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是ol的孙子</a></li>

    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">我是ul的孩子</a></li>
    </ul>
    <!-- 有两个ul 给其中一个ul一个类名nav  -->
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">我是ul的孩子</a></li>
        <li><a href="#">我是ul的孩子</a></li>
    </ul>

</body>

</html>

      6. 结果

         

    4. 子选择器

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

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

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

      4. 代码

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <P>
            <a href="#">我是孙子</a>
        </P>
    </div>
</body>

</html>

      5. 结果

         

    5. 并集选择器

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

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

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

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

      5. 代码

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 并集选择器，将熊大熊二改为蓝色 */
        /* div,
        p {
            color: blue;
        } */

        /* 要求把熊大熊二改为粉色，还有小猪一家都变为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

      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. 代码

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问过的链接 a:link */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 选择访问过的链接 a:visited */
        a:visited {
            color: orange;
        }

        /* 选择鼠标经过的链接 a:hover */
        a:hover {
            color: skyblue;
        }

        /* 选择鼠标正在按下还没有弹起的链接 a:active*/
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="#">未按下的链接</a>
</body>

</html>

        8. 结果

           

        9. 代码

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页常见书写样式</title>
    <style>
        /* 链接平时的状态 */
        a {
            color: #333;
            text-decoration: none;
        }

        /* 鼠标一经过的状态 */
        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <a href="#">网页</a>
</body>

</html>

        10. 结果

           

      5. :focus伪类选择器

        1. 选取的

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

        3. 代码

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把获得光标的input表单元素选取出来 背景变为粉红色 */
        input:focus {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

        4. 结果

           

        5.  

           

  3. css元素显示模式

    1. 元素以什么样的方式进行显示， 如<div>自己占一行，如一行可以放多个<span>

    2. HTML元素分为和

    3. 块元素

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

      2. 独占一行

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

      4. 宽度默认是100%

      5. 注意：文字类的元素不能使用块级元素 。如<p>里面不能放<div>

      6. 代码

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>块元素自己独占一行</div>瑟瑟发抖
</body>

</html>

      7. 结果

         

    4. 行内元素

      1. <span>最典型，<a>、<label>、<b>、<em>

      2. 一行可以显示多个

      3. 设置宽和高是无效的

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

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

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

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

      8. 代码

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <span>正在加载</span>
    <label>加粗显示</label>
</body>

</html>

      9. 结果

         

    5. 行内块元素

      1. <img/>、<input/>、<td>具有块元素和行内元素的特点

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

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

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

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

      6. 代码

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 100px;
            height: 35px;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
</body>

</html>

      7. 结果

      8.  

    6. 元素显示模式的转换

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

      4. 代码

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 150px;
            height: 100px;
            background-color: aqua;
            /* 把行内元素a转换为块级元素 display:cblock;*/
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把块元素div转换为行内元素 */
            display: inline;
        }
    </style>
</head>

<body>
    <a href="#">行内元素转换为块元素</a>
    <a href="#">行内元素转换为块元素</a>
    <a href="#">行内元素转换为块元素</a>
    <div>块级元素转换为行内元素</div>
    <span></span>
</body>
</html>

      5. 结果

         

  4. 小工具Snipaste

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

    2. F3置顶显示

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

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程

标签： 5w200kr碳膜电阻

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台