HTML 10.22

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>
注意一个标签可以有多个类  多个标签可以属于同一个类


应用场景： 用来对同一类标签进行样式的设定


第四种      id选择器
语法规则：   #id名 {}
选取内容：   该id名对应的标签   因为id是唯一标识符 相当于身份证号 所以标签的id不能重复 （CSS中如果id重复能行 但是js就会出问题）
代码示例： 
  <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;}
.hehe {font-size: 66px;}

#foo {color: blue;}
</style>

</head>
<body>

<div id="foo">123</div>
<div>123</div>
<div class="haha    hehe">123</div>
<p>345</p>
<span class="haha">789</span>
<a href="">123123123</a>

<ul>
<li>123123</li>
<li id="foo">123123</li>
<li>123123</li>
</ul>
</body>


应用场景： css中有的时候使用 主要在js中使用

高级选择器：  高级选择器就是基本选择器再按照不同的规则组合

后代选择器

语法规则：   选择器1    选择器2 {    }
选取内容：   选取再选择器1下面符合选择器2标准的内容
代码示例： 
<head>
<meta charset="utf-8" />
<title></title>

<style type="text/css">
        /* 需求  只对  123 456 操作 */
#foo  .bar   span {color: red;}
#foo  span  {background-color: blue;}
</style>

</head>
<body>

<div id="foo">
<div class="bar">
<span>123</span>
<span>456</span>
</div>
<span>789</span>
</div>

<span>159</span>

</body>
应用场景： css中有的时候使用 主要在js中使用

1.2选择器的优先级


CSS称之为 层叠样式表 
    
    
在css设定样式的时候 如果遇到  
    
1  多个选择器对同种标签添加不同样式 ： 叠加性原则
     <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           #foo{color: red;}
           .bar{background-color: blue;}
        </style>
    </head>
    <body>
        <div  id="foo" class="bar">123</div>
    </body>

2  多个选择器对同种标签添加相同样式： 权值大的优先 权值一样 就近原则 
   *    0   
   标签  1
   类    10
   id    100
   行内   
   !important 
   <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           .haha{color: red;}
           .bar{color: orange;}
           
           #a1 {color: green !important ; }
        </style>
    </head>
    <body>
        <span  id="foo" class="bar  haha" >123</span>
        <div  id="a1"  style="color: blue;">123</div>
    </body>

1.3 背景属性


background  以前我们设定背景颜色

背景颜色：
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
             div {
                 width: 200px;
                 height: 200px;
                 background-color: red;
             }
        </style>
    </head>
    <body>
        <div>
            你好世界
        </div>
    </body>

颜色的赋值 可以有三种形式：  
1  英文单词  
2  rgb   red  green  blue  三原色
         其他的颜色都可以通过这三种颜色按照不同的比例调和出来
      0-255  
   rgba  a代表透明度  0-1 1代表不透明 0 全透明
   

3 十六进制
  
  #124578 代表 12 红色  45 绿色 78 蓝色
  特殊情况 如果是aabbcc的情况 可以简写成 abc



背景图片

我们在html中 要显示图片可以有两种方式： 1 img标签  2 任意标签设定背景图
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           
             div {
                 width: 500px;
                 height: 500px;
                 border: 2px solid red;
                 
                 background-image: url(img/bdbri.png);
                 background-repeat: no-repeat;
                 /* 300px 100px    center center 30% 30%*/
                 background-position: 50% 50%;
                 /* 100px  100px*/
                 background-size: 100% 100%;
             }
             
            
        </style>
    </head>
    <body>
        <div>你好 世界</div>
    </body>

复合属性： 一个属性可以设定多个值  background

 background: red  url(img/bdbri.png)  no-repeat  center center /  100% 100% ;

多背景设定： 注意此时就不能设定颜色

background:  url(img/bdbri.png)  no-repeat  center center /  10% 10% ,
                               url(img/01.jpg)  no-repeat  top left /  10% 10% ;

1.4 精灵图


精灵图： 特殊的图片 将一些小图标集中到一张图片中

为什么要将一群小图标 集中一张图片中？
这是为了网络请求更加快 所做的操作。例如 如果每个图标都是一个图片 此时一个网页需要大量图标 此时就需要发送多次请求 ，如果集中到一张图片中 则只请求一次即可。

精灵图片的使用：
1 测量图片的大小和位置
2 在代码中创建一个div标签  宽高是图标大小  调整背景图在标签的位置
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           
           div{
               width: 15px;
               height: 15px;
               background: url(img/1.png)  no-repeat   -137px -126px;
           }
           
            
        </style>
    </head>
    <body>
        <div></div>
    </body>

二盒子模型

1.1 什么是盒子模型


box model 翻译成中文叫做 盒子模型

盒子模型就是将标签 视为一个二维的盒子 包含的设定有 外边距 边框 内填充 内容

1.2 外边距


盒子模型的外边距指的是边框以外占据的空白区域
例如：黄色部分就是


使用 margin属性进行调整  可以设定四个位置
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           
           div{
               width: 150px;
               height: 150px;
               background-color: blue;
               
               margin-top: 100px;
               margin-bottom: 200px;
               margin-left: 60px;
               margin-right: 80px;
            }
           
            
        </style>
    </head>
    <body>
        <div></div>
        <span>123123</span>
    </body>
复合属性
margin：  上  右  下 左;
margin：  上  左右   下;
margin：  上下     左右;
margin：  上右下左;


实际应用场景：
1 调整标签之间的位置关系 
2 位置居中   注意 能居中的才有居中一说
   块级标签居中  margin: 0 auto;
   行内标签     设定父标签的text-algin：center

外边距冲突
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           
           div{
               width: 300px;
               height: 200px;
               background-color: black;
            }
            #foo{
                margin-bottom: 150px;
            }
            #bar{
                margin-top: 100px;
            }
            
        </style>
    </head>
    <body>
        <div id="foo">123</div>
        <div id="bar">123</div>
        
    </body>
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           
           span{
               width: 300px;
               height: 200px;
               background-color: black;
            }
            #foo{
                margin-right: 150px;
            }
            #bar{
                margin-left: 100px;
            }
            
        </style>
    </head>
    <body>
        <span id="foo">123</span>
        <span id="bar">123</span>
        
    </body>

上下冲突 取最大值   左右冲突 叠加

1. 3 边框


<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           
           div{
               background-color: red;
               width: 300px;
               height: 300px;
               
               border-top: 20px solid blue;
               border-bottom: 30px dashed  orange;
               border-left: 40px double  gray;
               border-right: 50px groove  black;
           }
        </style>
    </head>
    <body>
        
        <div>123</div>
        
    </body>

应用：

   1  单独边框 下划线
   2  输入框

1.3 内填充



内填充叫做 padding
指的是 内容到边框之间的空白区域 并且设定被填充会增大标签面积


<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           
           div{
               
               width: 300px;
               height: 300px;
               border: 5px solid green;
               
               padding-top: 66px;
               padding-left: 55px;
               padding-bottom: 22px;
               padding-right: 33px;
           }
           
          
        </style>
    </head>
    <body>
        <div>123</div>
    </body>

内填充也可以写一个值： 
复合属性：  padding    写多个值和margin一样的位置


实际应用： 
  1 让内容不贴边
  2 设定居中
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           
           a{
               background-color: black;
               padding: 5px 10px;
               border-radius: 5px;
               color: white;
               text-decoration: none;
           }
          
        </style>
    </head>
    <body>
        <a href="">你好世界</a>
    </body>

三总结


1.选择器
2. 背景的一些属性
3. 精灵图
4. 盒子布局

posted @ 2021-10-22 09:30 吴光熠阅读(131) 评论(0) 收藏举报

刷新页面返回顶部

HTML 10.22

Html第五天

一 css进阶

1.1选择器

1.2选择器的优先级

1.3 背景属性

1.4 精灵图

二 盒子模型

1.1 什么是盒子模型

1.2 外边距

1. 3 边框

1.3 内填充

三 总结

公告

二盒子模型

三总结