• CSS选择器


     1 CSS学习大纲
     2     在标签上设置style属性:
     3         background-color:#2459a2  ;
     4         height:48px  ;
     5     编写CSS样式:
     6         1.标签的style属性
     7         2.写在head里面,style标签中写样式
     8             ID选择器
     9                 #i1{
    10                     background-color:2459a2  ;
    11                     height:48px  ;
    12                      }
    13             class选择器  *****
    14                 .c1{
    15                     background - color: 2459a2  ;
    16                     height: 48px  ;
    17                     }
    18                 <标签 class='名字'> </标签>
    19             标签选择器
    20                 div{
    21                     background - color: 2459a2;
    22                     height: 48px ;
    23                    }
    24                  所有的div都使用这个样式
    25             层级选择器(空格)  *****
    26                 .c1 .c2 div{
    27                       background - color: 2459a2;
    28                       height: 48px;
    29                            }
    30             组合选择器(逗号)  *****
    31                 #i1,.c1,div{
    32                             }
    33             属性选择器   *****
    34                 对选择到到标签再通过属性再进行一次筛选
    35                 .c1[n='alex']{100px ;height:200px;}
    36         3、多行注释
    37             /*
    38             ...内容...
    39             */
    CSS学习大纲
     1 <!DOCTYPE html>
     2 <!--CSS选择器1 手动选择器-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7 </head>
     8 <body>
     9     <div style="background-color:#2459a2;height:48px;">111111</div>
    10     <div style="background-color:#2459a2;height:48px;">222222</div>
    11     <div style="background-color:#2459a2;height:48px;">333333</div>
    12 </body>
    13 </html>
    CSS选择器1 手动选择器
     1 <!DOCTYPE html>
     2 <!--CSS选择器2 ID选择器-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         #i1{
     9             background-color:#2459a2  ;
    10             height:48px  ;
    11             }
    12         #i4{
    13             background-color:#2459a2  ;
    14             height:48px  ;
    15             }
    16         #i5{
    17             background-color:#2459a2  ;
    18             height:48px  ;
    19             }
    20         #i6{
    21             background-color:#2459a2  ;
    22             height:48px  ;
    23             }
    24     </style>
    25 </head>
    26 <body>
    27     <div id="i1">111111</div>
    28     <div id="i1">222222</div>
    29     <div id="i1">333333</div>
    30     <!--ID只能唯一,但是强制写也可以显示,不要用不规范-->
    31 
    32     <div id="i4">444444</div>
    33     <div id="i5">555555</div>
    34     <div id="i6">666666</div>
    35 </body>
    36 </html>
    CSS选择器2 ID选择器
     1 <!DOCTYPE html>
     2 <!--CSS选择器3 class选择器-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         .c1{
     9             background-color:#2459a2  ;
    10             height:48px  ;
    11             }
    12         .c2{
    13             background-color:#E80203;
    14             height:48px  ;
    15             }
    16 
    17     </style>
    18 </head>
    19 <body>
    20     <div class="c1">444444</div>
    21     <div class="c1">555555</div>
    22     <div class="c1">666666</div>
    23 
    24     <span class="c2">77777</span>
    25     <span class="c2">88888</span>
    26     <span class="c2">99999</span>
    27 </body>
    28 </html>
    CSS选择器3 class选择器
     1 <!DOCTYPE html>
     2 <!--CSS选择器4 标签选择器-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         div{
     9             background-color:#2459a2  ;
    10             color:white;
    11             height:48px  ;
    12             }
    13     </style>
    14 </head>
    15 <body>
    16     <div>111111</div>
    17     <div>222222</div>
    18     <div>333333</div>
    19 
    20     <span>4444</span>
    21     <span>5555</span>
    22 </body>
    23 </html>
    CSS选择器4 标签选择器
     1 <!DOCTYPE html>
     2 <!--CSS选择器5 层级选择器-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         span div{
     9             background-color:#2459a2  ;
    10             color:#E80203;
    11             height:48px  ;
    12                   }
    13         .c1 .c2 div{
    14             background-color:#5EA21A  ;
    15             color:#E8D215;
    16             height:48px  ;
    17                   }
    18         <!--层级不要写太深没有意义-->
    19     </style>
    20 </head>
    21 <body>
    22     <div>111111</div>
    23     <div>222222</div>
    24     <div>333333</div>
    25 
    26     <span>4444</span>
    27     <span>5555</span>
    28     <span>66666
    29         <div>77777</div>
    30     </span>
    31 
    32     <span class="c1">8888
    33         <div class="c2">99999
    34             <div>000000000000</div>
    35         </div>
    36     </span>
    37 </body>
    38 </html>
    CSS选择器5 层级选择器
     1 <!DOCTYPE html>
     2 <!--CSS选择器6  组合选择器-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         #i1,#i2,#3{
     9             background-color:#2459a2  ;
    10             height:48px  ;
    11             }
    12         #i4{
    13             background-color:#2459a2  ;
    14             height:48px  ;
    15             }
    16         #i5{
    17             background-color:#2459a2  ;
    18             height:48px  ;
    19             }
    20         #i6{
    21             background-color:#2459a2  ;
    22             height:48px  ;
    23             }
    24     </style>
    25 </head>
    26 <body>
    27     <div id="i1">111111</div>
    28     <div id="i2">222222</div>
    29     <div id="i3">333333</div>
    30     <!--ID只能唯一,但是强制写也可以显示,不要用不规范-->
    31 
    32     <div id="i4">444444</div>
    33     <div id="i5">555555</div>
    34     <div id="i6">666666</div>
    35 </body>
    36 </html>
    CSS选择器6 组合选择器
     1 <!DOCTYPE html>
     2 <!--CSS选择器7 属性选择器-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         input[type='text']{width: 100px;height: 200px;}
     9         input[n='alex']{width: 80px;height: 160px;}
    10         .c1[n='alex']{width: 60px;height: 100px;}
    11     </style>
    12 </head>
    13 <body>
    14     <input type="text">
    15     <input type="text"n="alex">
    16     <input class="c1" type="text" n="alex">
    17 
    18     <input type="password">
    19     <input class="c1" type="password">
    20 </html>
    CSS选择器7 属性选择器
     1 <!DOCTYPE html>
     2 <!--CSS选择器6  组合选择器-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         #i1,#i2,#i3{
     9             background-color:#0632A2  ;
    10             height:48px  ;
    11             }
    12         #i4,span{
    13             background-color:#A24500  ;
    14             height:48px  ;
    15             }
    16         #i5,.c1{
    17             background-color:#A29F00  ;
    18             height:48px  ;
    19             }
    20         #i6{
    21             background-color:#36A200  ;
    22             height:48px  ;
    23             }
    24     </style>
    25 </head>
    26 <body>
    27     <div id="i1">111111</div>
    28     <div id="i2">222222</div>
    29     <div id="i3">333333</div>
    30     <!--ID只能唯一,但是强制写也可以显示,不要用不规范-->
    31 
    32     <div id="i4">444444</div>
    33     <div id="i5">555555</div>
    34     <div id="i6">666666</div>
    35     <span>7777</span>
    36 
    37     <div class="c1">9999999</div>
    38 </body>
    39 </html>
    CSS选择器6 组合选择器加强
  • 相关阅读:
    mysql 分库分表
    深度学习(四)转--入门深度学习的一些开源代码
    深度学习(三)转-可视化理解卷积神经网络 直接查看卷积神经网络的过程特征
    深度学习(二)神经网络中的卷积和反卷积原理
    深度学习(一)神经网络中的池化与反池化原理
    转-------基于R-CNN的物体检测
    vs2013下c++调用python脚本函数 出现的一些问题总结
    关于mfc作为上位机接收硬件端USB或串口数据显示成图片 解决串口接收数据丢字节丢包问题
    转-------CNN图像相似度匹配 2-channel network
    深度学习(五)基于tensorflow实现简单卷积神经网络Lenet5
  • 原文地址:https://www.cnblogs.com/ujq3/p/7413376.html
Copyright © 2020-2023  润新知