HTML 10.22

最新推荐文章于 2024-09-27 09:37:38 发布

WGY0227

最新推荐文章于 2024-09-27 09:37:38 发布

阅读量96

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/WGY0227/article/details/120899421

版权

这篇博客主要介绍了HTML学习的第五天内容，涵盖了CSS的进阶知识，包括选择器及其优先级、背景属性和精灵图的使用。同时详细讲解了盒子模型的概念，探讨了外边距、边框和内填充等关键概念。

摘要由CSDN通过智能技术生成

Html第五天

一 css进阶

1.1选择器

CSS选择器 是CSS中的一种语法 用来更好更快的选取页面元素

第一种 统配符选择器
语法规则：   * {}
选取内容：  全部标签
代码示例： 
   <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            * {color: red;}
        </style>
        
    </head>
    <body>
        
        <div>123</div>
        <p>345</p>
        <span>789</span>
    </body>

应用场景： 经常用来清除标签的 默认的外边距 和 内填充
         * {margin: 0;padding: 0;} 
         这是以前的写法 现在换成了这种写法        blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

第二种 标签选择器

语法规则：   标签名 {}
选取内容：   该标签名对应的所有标签
代码示例： 
   <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            div {color: red;}
        </style>
        
    </head>
    <body>
        
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <p>345</p>
        <span>789</span>
        
        <ul>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
        </ul>
    </body>

应用场景：用来对某一种标签进行样式设定 例如  a标签集体去掉下划线
       a {text-decoration: none;}
       ul,ol { list-style: none;}


第三种   类选择器
语法规则：   .类名 {}
选取内容：   该类名对应的所有标签
代码示例： 
  <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            *{margin: 0;padding: 0;}
            a {text-decoration: none;}
            ul,ol { list-style: none;}
            
            div {color: red;}
            
            .haha {background-color: yellow;}
        </style>
        
    </head>
    <body>
        
        <div>123</div>
        <div>123</div>
        <div class="haha">123</div>
        <p>345</p>
        <span class="haha">789</span>
        <a href="">123123123</a>
        
        <ul>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
        </ul>
    </body>
注意一个标签可以有多个类  多个标签可以属于同一个类


应用场景： 用