htmlbolg_3

CSS选择器

1、标签选择器(TAG选择器)

css:div{}  html:


使用的场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中,如层次选择器

2、群组选择器(分组选择器)

css:div , p , span{}

div , #text , .title{background:red;    }

通过逗号的方式,给多个不同的选择器添加CSS样式,来达到代码的复用

3、通配选择器(给所有标签添加样式)

*{ } -> div , ul , li , p , h1 , h2 …{ }
使用场景:去掉所有标签的默认样式时可以使用。

4、层次选择器

后代:M N
父子:M > N
兄弟:M ~ N(当前M下面所有的兄弟N标签)
相邻:M + N(当前M相邻下面的N标签)

例: 后代

后代(ul下面的li都要)
 <style>    
    ul li{ border:1px solid; }
    </style>
<body>
        
    <ul>
        <li>

        <ul>
            <li>

            </li>
        </ul>
        </li>
    </ul>
</body>

在这里插入图片描述

例:父子

只关心一个后代,后代的后代不关心
在这里插入图片描述


#list > li{ border:1px solid; }

兄弟

div~h2 {background:red;}  (当前div下的h2   在div上面的不行)

在这里插入图片描述

相邻

在这里插入图片描述
在这里插入图片描述

div+h2 {background:red;} 

5、属性选择器

在这里插入图片描述

<style>
        div[class*=box]{ background:red;}     加*号可以使带有box的都能被选中
    </style>
</head>
<body>
    <div>111</div>
    <div class="box">222</div>
    <div class="box-buttom">233</div>
    <div class="search">333</div>
</body>

在这里插入图片描述

div[class][id]{ background:red;}  组合的方式

在这里插入图片描述

6、伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。

1.M :伪类{} hover等

:link     访问前的样式(只能添加给a标签)
:visited  访问后的样式(只能添加给a标签))
:hover   鼠标移入时的样式(可以添加给所有标签)
:active   鼠标按下时的样式
注:
 1.link visited只能给a标签加,hover和active可以给所有的标签加。
 2.如果四个伪类都生效,一定要注意顺序:L V H A。
 3.一般网站只这样去设置:a{}:hover{}。
 eg1:鼠标

    <style>
        div{height: 200px;width: 200px;background: red;}    
        div:hover{background:blue}     移入
        div:active{background:green}    按下
    </style>

eg2:访问

<style>
    a:link{ color:red ;}
    a:visited{ color:blue ;}
    a:hover{ color:green ;}
    a:active{ color: yellow;}
</style>
</head>
<body>
    <a href="#">一个连接</a>
</body>

注:一般网站都只设置
a{}  ( link visited active )  a:hover{}

2.after等伪类

:after、:before  通过伪类方式给元素添加一段文本内容,使用content属性

   <style>
   div:before{content:"world";color:red;}
    </style>
</head>
<body>
    <div>hello</div>
</body>

在这里插入图片描述
:checked、:disable、:focus  都是针对表单元素的

    <style>   
        :disable{width:100px;height:100px;}     不选择时呈现的样子
        :focus{ background:red}     选中后表单的颜色
        </style> 
    </head>
    <body>  
        <input type="checkbox">
        <input type="checkbox" checked>     默认选中状态
        <input type="checkbox">
        <input type="text">
    </body>

在这里插入图片描述

3.结构性伪类选择器

:nth-of-type()、:nth-child()
(角标从1开始,1表示第一项;n值 表示从0开始到无穷)
:first-of-type、:first-child (第一行)
:last-of-type、 :last-child (最后一行)
:only-of-type、:only-child (只有一个)(唯一一个)

type:类型
 child:孩子

    <style>
        li:nth-of-type(3){background:red;}
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
    </body>
    </html>

在这里插入图片描述

 li:nth-of-type(3){background:red;}   代表隔行换色

注:
type只会在

  • 中选择某一个。
    child会在全部里选某一个,但是
    不会有效果。
  • CSS样式的继承

    文字相关的样式可以被继承(颜色,字形,大小等)
    布局相关的样式不能被继承(边框,宽高等)(默认不能继承,但可以设置继承属性 inherit值)

    div{ width:300px; height: 300px; border:1px red solid; color:red; font-size:30pX;}
    p{ border:inherit;}
    

    CSS优先级

    1.样式优先级

    相同样式优先级
      当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。

          <style>
        div{ color: red;}
        div{ color:blue; }
        </style>
    </head>
    <body>
          <div>
            aaaaaaa
          </div>
    

    在这里插入图片描述

    内部样式与外部样式
      内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。
      在这里插入图片描述
    最后的结果由后写入的决定

    单一样式优先级
    style行间 > id > class > tag > * > 继承
    例:(#elem > .box > div > * > 继承)
    style行间  权重 1000
    id      权重 100
    class   权重10
    tag      权重 1

    2.!important优先级

    !important
    提升样式优先级,非常规写法,不建议使用。
    不能针对继承的进行优先级提升
    标签+类与单类
    标签+类 > 单类

    div.box{color:blue;}
    

    群组优先类
    群组选择器与单一选择器的优先级相同,靠后写的优先级高

    div,p{color:blue} 
    div{color:red}
    

    3.层次优先级(建议三层以内)

    1.权重比较
    ul li .box p input{}(1+1+10+1+1)(数字为等级,不能越级)
    .hello span #elem{}(10+1+100)

    2.约分比较
    ul li .box p input{}
    .hello span #elem{}
    (同种类型相约分,如.box和.hello约掉)

    CSS盒子模型(类比成快递)

    组成 :content -> padding -> border -> margin
    类比成 物品  填充物  包装  盒子与盒子之间距离
    content :内容区域 width和height组成的
    padding :内边距(内填充)
      只写一个值 :30px
      写两个值:30px 40px(上下、左右)
      写四个值:30px 40px 50px 60px(上、右、下、左)

    单一样式只能写一个值
      padding-left
      padding-right
      padding-top
      padding-bottom

    margin :外边距(外填充)
      只写一个值 :30px
      写两个值:30px 40px(上下、左右)
      写四个值:30px 40px 50px 60px(上、右、下、左)

    单一样式只能写一个值
      padding-left
      padding-right
      padding-top
      padding-bottom
    注:
    1.背景颜色会填充到margin以内的区域。
    2.文字会在content区域。
    3. padding不能出现负值,margin是可以出现负值。

    在这里插入图片描述

    style>
        #box{
            width:200px; height:200px; background:red; border:10px /* transparent solid */;
            padding : 30px 50px;      
            margin: 10px;
            }
         #box2{ width:200px; height :200px; background:black; color:white;}
    </style>
        </head>
        <body>
            <div id="box1">这是一个盒子</div>
            <div id="box2">这是另一个盒子</div>
        </body>
        </html>
    

    1、box-sizing

    盒尺寸,可以改变盒子模型的展示形态。
    默认值:content-box :width、 height -> content
    border-box : width、 height -> content padding border (宽高分配给三个类型)

        <style>
        #box{
            width:200px; height:200px; background:red; border:10px blue solid;
            padding : 30px 50px;
            box-sizing: border-box;     不用再去计算尺寸大小
        }
        input{ width:100%; padding: 30px;box-sizing: border-box;}
        </style>
    </head>
    <body>
        <div id="box1">这是一个盒子</div>
        <input type="text">
    </body>
    </html>
    
    

    在这里插入图片描述

    使用的场景:
      1.不用再去计算一些值
      2.解决一些百分比的问题

    2、盒子模型的一些问题

    1.maegin叠加

    当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题。这个问题,只在上下有,左右是没有这个叠加问题的。
    1.margin叠加间题,出现在上下margin同时存在的时候,会取上下中值较大的作为叠加的值。
    eg:

        <style>
        #box1{width:200px; height:200px; background:red;margin-bottom: 30px;}
        #box2{width:200px; height:200px; background:blue;margin-top: 30px;}
        </style>    上下边距不会进行累加,而是叠加,谁大用谁的值
    </head>
    <body>
        <div id="box1">盒子1</div>
        <div id="box2">盒子2</div>
    </body>
    </html>
    

    在这里插入图片描述
    30px而不是60px,因为叠加了,按照谁的值大按谁来
    解决方案:
      1.BFC规范
      2.想办法只给一个元素添加间距。

    2.maegin传递

    margin传递的问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向是没有传递问题的。

    <style>
    #box1{width:20opx; height: 200px; background :red; }
    #box2{ width:10opx; height:100px; background:口blue; margin-top:100px;}
    </style>
    
    

    在这里插入图片描述

    解决方案:
      1.BFC规范
      2.给父容器加边框。
      3.margin换成padding。

    3.margin扩展

    1.margin自适应:
      margin左右自适应是可以的,上下自适应则不行。
    2.不设置content现象:
      width、height不设置的情况下,对盒子模型的影响,会自动去计算容器的大小,省去部分代码。
    在这里插入图片描述
    左边全部自适应:
    在这里插入图片描述
    在这里插入图片描述

    左右两边全都自适应:
    在这里插入图片描述
    不设置content现象(节约资源):
    1.设置时:
    在这里插入图片描述
    2.不设置时(自动沿着父容器充满):
    在这里插入图片描述

    盒子嵌套练习

    在这里插入图片描述

    <style>
        #box1{width:350px; height:350px; border:1px black dashed;padding:27px;}
        #box2{border: 5px #d7effe solid;padding:20px;}
        #box3{background: #ffa0df;padding:40px;}
        #box4{border: 1px white dashed;padding:3px;}
        #box5{border: 1px white dashed;padding:49px;}
        #box6{width:100px; height:100px; background:#96ff38;border:#fcff00 5px solid;}
        </style>                             
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3">
                    <div id="box4">
                        <div id="box5">
                            <div id="box6"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    

    标签分类

    1、按类型

    block :div、p、ul、li、h1 …
      1、一个块独占一行
      2、支持所有样式
      3、不写宽的时候,跟父元素的宽一样
      4、所占区域是一个矩形

    inline :span、a、em、strong、img …
      1、挨在一起的(不独占一行)
      2、有些样式不支持,例如:width、height、marign、padding
      3、不写宽的时候,宽由内容决定
      4、所占的区域不一定是矩形
      5、内联标签之间有空隙,是换行原因引起的(可以将font-size:0放在body里来解决,后面样式再添加回字原来的大小font-size:xxx)(通过优先级来处理)

    inline-block :input、select …
      1、挨在一起,且支持宽高

    注:布局一般用块标签,修饰文本一般用内联标签

    2、按内容

    Flcw :流内容
    Metadata :元数据
    Sectioning :分区
    Heading :标题
    Phrasing :措辞
    Embedded:嵌入的
    Interactive :互动的
    html.spec.whatwg.org
    在这里插入图片描述

    3、按显示

    替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
      img、input …
    非替换元素:将内容直接告诉浏览器,将其显示出来。
      div、h1、p …

    display显示框类型

    display:
      block
      inline
      inline-block
      none
    区别:1.dispaly:none 不占空间的隐藏
      2.visibility:hidden 占空间的隐藏

    <style>
        div{width: 100px;height: 100px;background: red;display: inline-block;}
     </style>  
    

    标签嵌套规范

    ul、li
    di、dt、dd
    able、tr、td

    1、块能够嵌套内联

    <div>
    	<span></span><a href="#"></a>
    </div>
    

    2、块嵌套块

    <div>
    	<div></div>
    </div>
    

    错误的写法
    eg:p标签补课嵌套

    <p>
    	<div></div>
    </p>
    

    3、内联是不能嵌套块

    错误的写法

    <span>
    	<div></div>
    </span>
    

    特殊:
    (正确的写法)

    <a href="#">
    	<div></div>
    </a>							
    

    注:(a里面不能再写a)

    溢出隐藏

    overflow:
      visible :默认
      hidden
      scroll(一直显示滚动条)
      auto(字多的时候显示滚动条)
      x轴、y轴
      在这里插入图片描述

    解决方法:

    <style>
        div{width: 100px;height: 100px;border:1px black solid;overflow:hidden;}
    </style>  
    

    透明度与手势

    opacity:
      opacity: 0(透明,占空间)~1(不透明)、0.5(半透明)
    注:
     占空间,所有的子内容也会透明

    rgba
      rgba() : 0~1
    注:
     可以让指定的样式透明,而不影响其他样式

    cursor : 手势
     default : 默认手势
     要实现自定义手势:
      准备图片: .cur 、.ico (ur(图片地址),auto;)

    最大、最小宽高

    min-width、min-height(扩)
    max-width、max-height(缩)
     注:强化对百分比的理解
     %单位:换算 ->以父容器的大小进行换算的

    (一个容器怎么适应屏幕的高:肉鳍加height:100%; body%; html:100%)

    CSS默认样式

    有些标签有默认样式,有些标签没有默认样式。

    没有默认样式:
      div、span、…

    有默认样式:
      body、h1…h6、p、ul、…

    body -> marign : 8px
    h1 -> marign : 上下 21.440px
    p -> marign : 上下 19px
    ul -> marign : 上下 16px  padding :左 40px
       默认点:list-style : disc
    a -> text-decoration: underline;

    CSS重置样式(reset)

    简单的CSS reset :
      *{ margin:0; padding:0; }
      ul{ list-style:none; }
      a{ text-decoration:none; color:#666; }
      img{ display:block; }

    CSS reset :
     margin:e; padding:e;}
      优点:不用考虑哪些标签有默认的margin和padding
      缺点:稍微的影响性能
      body,p,h1,ul{ margin:0; padding:0; }

    1.ul{ list-style : none;}

    2.a{ text-decoration: none; color:#999;}

    3.img{ dispaly:block }
     问题的现象:图片跟容器底部有一些空隙。
      内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。
       vertical-align: baseline;基线对齐方式,默认值
       img{ vertical-align:bottom;}解决方式是推荐的
    常见的CSS重置样式
    在这里插入图片描述

    写具体页面的时候或一个布局效果的时候;
      1,写结构
      2. css重置样式
      3. 写具体样式

    float浮动

    1、float浮动概念

    文档流
      文档流是文档中可显示对象在排列时所占用的位置。

    float特性
      加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。

    float取值
      left
      right
      none(默认)
    eg:

    <style>
        body{ border:1px black solid; }
        #box1{ width: 100px;height: 100px; background:yellow; float: left;}
        #box2{ width: 200px;height: 200px; background:red; float: left;}
        </style>                             
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
    </html>
    
    

    2、float注意点

    1.只会影响后面的元素。

    <style>
        body{ border:1px black solid; }
        #box1{ width: 100px;height: 100px; background:yellow;}
        #box2{ width: 200px;height: 200px; background:red; float: left;}
        #box3{ width: 200px;height: 200px; background:blue;}
        </style>                             
        </style>                             
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
    </html> 
    

    在这里插入图片描述
    2.内容默认提升半层。
    (不被覆盖)

    3.默认宽根据内容决定。
    (例如:文字长度)

    4.换行排列。
    (浮动元素放不下会折行,第二行元素可能会被第一行元素挡住而不会顶到最左边)

    5.主要给块元素添加,但也可以给内联元素添加。

    3、清除float浮动

    上下排列:
      clear属性,表示清除浮动的,left、right、both(全部)

      <style>
        #box1{ width: 100px;height: 100px; background:yellow;float: left;}
        #box2{ width: 200px;height: 200px; background:red;clear: both;}                           
      </style>                             
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
    </html> 
    
    

    嵌套排列:
    固定宽饰 : 不推荐,不能把高度固定死,不适合做自适应的效果。
    父元素浮动 : 不推荐,因为父容器浮动也会影响到后面的元素。
    overflow : hidden (BFC规范),如果有子元素想溢出,那么会受到影响。
    display : inline-block (BFC规范),不推荐,父容器会影响到后面的元素。
    设置空标签 : 不推荐,会多添加一个标签。
    after伪类 : 推荐,是空标签的加强版,目前各大公司的做法。
    (clear属性只会操作快标签,对内联标签不起作用)
    after伪类 :

     <style>
        #box1{ width: 100px;border: 1px black solid}
        #box2{ width: 200px;height: 200px; background:red;float: left;}
        .clear::after{content:'';clear:both;display: block;}
    </style>                                                          
    <body>
        <div id="box1" class="clear">
            <div id="box2"></div>
        </div>
    </body>
    </html> 
    

    float制作页面小结构

    在这里插入图片描述

    <!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>
            * {
                margin: 0;
                padding: 0;
            }
    
            ul {
                list-style: none;
            }
    
            img {
                display: block;
            }
    
            a {
                text-decoration: none;
                color: #666
            }
    
            h1,
            h2,
            h3 {
                font-size: 160px
            }
    
            ;
    
            .l {
                float: left;
            }
    
            .r {
                float: right;
            }
    
            .clear {
                content: "";
                display: block;
                clear: both;
            }
    
            #main {
                width: 366px;
                margin: 20px auto;
            }
    
            #main .title {
                height: 23px;
                line-height: 23px;
                font-size: 12px;
                font-weight: bold;
                padding: left 30px;
                background: url(图片地址1) no-repeat 6px 4px, url(图片地址2) repeat-x;     先写的是在上面的图
            }
    
            #main ul {
                overflow: hidden;
                margin-top: 13px;
            }
    
            #main li {
                margin-bottom: 22px;
            }
    
            #main .pic {
                width: 100px;
                border: 1px soled #c8c4d3;
                margin-left: 5px;
            }
    
            #main .pic img {
                margin: 2px;
            }
    
            #main .content {
                width: 240px;
                font-size: 12px;
                line-height: 20px;
            }
    
            #main .content h2 {
                font-size: 12px;
                line-height: 24px;
            }
    
            #main .content p {
                font-size: 12px;
                line-height: 20px;
            }
        </style>
    </head>
    
    <body>
        <div id="main"></div>
        <h2 class="title">外媒评论精选</h2>
        <ul>
            <li>
                <div class="l pic">
                    <a href="a">
                        <img src="" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题</h2>
                    <p>测试段落
                        <a href="a">
                            <img src="" alt="">
                        </a>
                    </p>
    
                </div>
            </li>
            <li>
                <div class="l pic">
                    <a href="a">
                        <img src="" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题</h2>
                    <p>测试段落
                        <a href="a">
                            <img src="" alt="">
                        </a>
                    </p>
    
                </div>
            </li>
            <li>
                <div class="l pic">
                    <a href="a">
                        <img src="" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题</h2>
                    <p>测试段落
                        <a href="a">
                            <img src="" alt="">
                        </a>
                    </p>
    
                </div>
            </li>
        </ul>
    </body>
    
    </html>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值