2020-11-26

最新推荐文章于 2020-12-26 19:38:18 发布

量子次元

最新推荐文章于 2020-12-26 19:38:18 发布

阅读量59

点赞数

分类专栏：选择器

本文链接：https://blog.csdn.net/fengchang11111/article/details/110205932

版权

选择器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           span{
               /*font-style: italic;
               font-weight: bold;
               font-size: 36px;
               font-family: "华文彩云";*/
               font: 36px "华文彩云"；
           }
           p{
               border: 2px solid red;
               width: 100px;
               height: 50px;
               /*line-height: 50px;
               font-size: 30px;
               font-family: "楷体";*/
               font: 30px/50px "楷体";
           }
       </style>

   </head>
   <body>
       <span>河南</span>
       <div style="border-bottom:1px solid aquamarine ;">A</div>
       <p>郑州</p>
   </body>

今天，老高讲了好多有趣的东西选择器在<head></head>中用<style></style>选择，蓝色部分就是选择区，而红色部分就是被选择区的属性。

a.顺序font-style font-weight font-size font-family。 b. font-size font-family必须有。

line-hight不能与font共同使用，应这样font字体大小/line-height。

<head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           span{
               background-color: red;
           }
           .text-center{
               text-align: center;
           }
           #indent{
               text-indent: 20px;
           }
           span{
               display: block;
           }
           #login{
               border: 1px solid yellow;
               width: 200px;
               height: 20px;
               line-height: 20px;
               text-align: center;
               cursor: pointer;
               background-color: orangered；

   }
       </style>
   </head>
   <body>
       <span>鲁山</span>
       <span>郑州</span>
       <div class="text-center">郑州大学</div>
       <p class="text-center">河南工业大学</p>
       <input id="indent"/>
       <input />


       <p style="letter-spacing: 12px;">河南工业大学</p>
       <span>河南工业大学</span>
       <a href="http://www.baidu.com">baidu</a>
       <div style="display: inline;">郑州</div>
       <div id="login">登录</div>
       <input />
   </body>
</html>

什么是选择器：是浏览器选过滤标签的一种工具。 id标记属性值不能重复，id标记时选择前加个“#”，

egg： <div id="login">登录</div>

#login{
               border: 1px solid yellow;
               width: 200px;
               height: 20px;
               line-height: 20px;
               text-align: center;
               cursor: pointer;
               background-color: orangered；

   }