css — 选择器、盒子模型

2019-09-17 09:59:48来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

css — 选择器、盒子模型

目录

  • 1. css引入方式
  • 2. css选择器
  • 3. css的盒模型

css: 层叠样式表

1. css引入方式

  • 行内样式

    <div style='color:red;'>mjj</div>
  • 内嵌式

    在head标签内部书写style

    <style>
    /*css代码*/
    #box{
                background-color: greenyellow;
            }
    </style>
  • 外接式

    <link href='css/index.css' rel='stylesheet'>

三种引入方式的优先级:

  • 1.行内样式>内嵌式和外接式,
  • 2.内嵌和外接要看谁在后面,在后面的优先级高

2. css选择器

2.1 基础选择器

1.id选择器

特定属性的元素(标签)、唯一的

语法: #xxx

2.类选择器

可以重复归类,类也可以设置多个

语法: .xxx

<style>
??.box{
????width:200px;
????height:200px;
????background-color:yellow;
?}
  <!--单独设置 类1 中某个样式与 类2 不一样-->
??.active{
????border-radius: 200px; <!--设置盒子边框-->
?}
</style>
<div class='box active'></div> <!--类1-->
<div class='box'></div>  <!--类2-->
<div class='box'></div>  <!--类2-->

3.标签选择器

标签选择器有:div{} 、p{} 、ul 、ol ...

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            /*设置文本修饰*/
            text-decoration: none;
        }
        input{
            border:none;
            outline:none;
        }
        #user{
            border: 1px solid #555;
            height: 60px;
            font-size: 20px;
            padding: 0 10px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active {
            border-radius: 4px;
        }
        #box{
            color: red;
        }
        div{
            border:1px solid #000;
        }
    </style>
</head>
<body>
<div class='box active' id="box">wusir</div>
<hr>
<div class='box'></div>
<hr>
<div class='box'></div>
<a href="">百度一下</a>
<input type="text" id="user">
</body>

2.2 高级选择器

1.后代选择器

语法:

/*用空格连接*/
div p{
??color: red;
}

2.子代选择器

语法:

/*用>连接*/
div>p{
??color: red;
}

3.组合选择器

常用于重置样式

语法:

/*用,连接*/
div,p,body,html,ul,ol....{
??padding: 0;
??margin: 0;
}
input,textarea{
            border:none;
            outline: 0;
        }

如何重置网页样式?

html,body,p,ul,ol{
    margin: 0;
    padding: 0;
}
/*通配符选择器 */
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
/*清除input和textarea标签的默认边框和外线*/
input,textarea{
    border: none;
    outline: none;
}

4.交集选择器

span.active

语法:

div.active{
?
}

2.3 伪类选择器

对于a标签,如果想设置a标签的样式,要作用于a标签上,对于继承性来说,a标签不起作用的

“爱恨准则” — LoVe HAte :L - link 、V - visited 、H - hover 、A - active

/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
    /*color: red;*/
}
/*a标签被访问过后设置的属性*/
a:visited{
    color:yellow;
}
/*a标签被鼠标悬浮时设置的属性*/
a:hover{
    color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
    color: deepskyblue;
}

2.4 属性选择器

<style>
    input[type='text']{
        background-color: red;
    }
    input[type='checkbox']{

    }
    input[type='submit']{

    }
</style>

2.5 伪元素选择器

<style>
    /*设置内容中的第一个文字*/
    p::first-letter{
        color: red;
        font-size: 20px;
        font-weight: bold;
    }
    /*在内容前加一个@*/
    p::before{
        content:'@';
    }
    /*::after是解决浮动布局常用的一种方法*/
    /*在内容后面加一个$*/
    p::after{
        /*通过伪元素添加的内容为行内元素*/
        content:'$';
    }
</style>

注意:

  • 1.通过伪元素添加的内容为行内元素
  • 2.::after是解决浮动布局常用的一种方法
  • 3.1个':'是伪类选择器,2个':'是伪元素选择器

3. css的盒模型

1.盒子模型的属性及含义:

  • width: 内容的宽度

  • height:内容的高度

  • padding:内边距(又叫内填充),盒子的border到内容的距离

    • 1.单个属性分别设置不同方向的padding

      padding-top  顶部填充的距离
      padding-right  右侧填充的距离
      padding-bottom  底部填充的距离
      padding-left  左侧填充的距离
    • 2.综合属性,多个属性用空格隔开。

      /*综合设置:四个方向的内边距为:*/
      padding: 20px;
      
      /*盒子的上下内边距设置为第一个数值,左右内边距设置第二个数值*/
      
      
      /*上  左右  下*/
      padding: 0 20px 30px;
      
      /*上  右  下  左*/
      padding: 10px 20px 30px 40px;
  • border:盒子的边框

    boder边框三要素:粗细 、线性样式 、颜色

    • 1.按照三要素书写border
    border-width:3px;  /*边框四边线的粗细*/
    border-style:solid; /*边框线样式*/
    border-color:red;  /*边框线颜色*/
    /*上面三句代码相当于一句代码:*/
    border:3px solid red;
    
    /*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/
    /*上下5px  左右10px*/
    border-width:5px 10px;
    /*上:实线  右:点状线  下:双线  左:虚线*/
    border-style: solid dotted double dashed;
    /*上:红色 左右:绿色 下:黄色*/
    border-color: red green yellow;
    • 2.按照方向划分
    /*boder的顶部边框*/
    border-top-width: 10px;
    border-top-color: red;
    border-top-style: solid;
    /*可以简写成*/
    border-top: 10px solid red;
    
    /*boder的右侧边框*/
    border-right-width: 10px;
    border-right-color: red;
    border-right-style: solid;
    /*可以简写成*/
    border-right: 10px solid red;
    
    /*boder的底部边框*/
    border-bottom-width: 10px;
    border-bottom-color: red;
    border-bottom-style: solid;
    /*可以简写成*/
    border-bottom: 10px solid red;
    
    /*boder的左侧边框*/
    border-left-width: 10px;
    border-left-color: red;
    border-left-style:solid;
    /*可以简写成*/
    border-left: 10px solid red;
    • 3.清除默认边框

      清除某些标签默认的边框 :border:none; 或者 border:0;

      清除某些标签默认的外边框 :outline: none; 或者 border:0;

    • 4.边框属性

      • 1.设置为圆角或者圆

        语法: border-radius:20px;

        <style>
                #box{
                    width: 300px;
                    height: 300px;
                    background-color: red;
                    /*border-radius: 50%;*/
                    border-radius: 4px;
                    border: 3px solid blue;
                }
                 #box:hover{
                     background-color: #000;
                 }
            </style>

        除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

        • border-top-left-radius
        • border-top-right-radius
        • border-bottom-right-radius
        • border-bottom-left-radius

        这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。

      • 2.设置阴影效果

        语法:box-shadow: h-shadow v-shadow blur color inset;

        h-shadow 水平阴影的位置、距离

        v-shadow 垂直阴影的位置、距离

        blur 模糊距离、程度

        color 阴影的颜色

        inset 将外部阴影 (outset,默认值) 改为内部阴影。

        <style>
            .box{
                width: 200px;
                height: 200px;
                background-color: #000;
                margin: 100px auto;
                position: relative;
                transition: all .2s linear;
            }
            .box:hover{
                top: -2px;
                box-shadow: 0 0  20px red;
            }
        </style>
  • margin:盒子的外边距,一个盒子到另一个盒子的距离。

    • 水平方向的外边距

      /*左外边距*/
      margin-left: 30px;
      /*右外边距*/
      margin-right: 20px;
    • 垂直方向外边距

      margin在水平方向上不会出现问题,但在垂直方向上会出现外边距合并(或重叠)现象,这种现象叫做塌陷问题,会以设置的最大的magrin距离为基准。

      如何避免出现这种问题呢?

      • 为了避免出现塌陷问题,只需要设置一个盒子的一个方向的margin即可。
      /*顶部外边距*/
      margin-top:50px;
      /*底部外边距*/
      margin-bottom:30px;
    • 也可以综合设置水平与垂直方向的外边距

      /*水平居中*/
      margin:0 auto;

2.盒子模型图


原文链接:https://www.cnblogs.com/yangjie0906/p/11405105.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:网页制作中的网页字体空格间距

下一篇:HTML定位和布局----float浮动