HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出

一.外联样式

通过link标签引入外部css文件夹中的xxx.css文件到head标签中
例:

二.

1.组选择器
选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值}
例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .div1,.div2,.div3,p,h1,h2{
                width: 200px;
                height: 100px;
             }
            .div1,.div2,.div3{
                background: green;
            }
            p,h1,h2{    
                background: red;
           }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <!--组合选择器-->
        <!--设置该html文档流中所有的标签  宽高一样,背景颜色不一样-->
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <p class="p1">p元素</p>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <!--这个div和以上的所有div宽高不一样-->
        <div></div>
    </body>
</html>

2.伪类/伪元素选择器
a::伪类提高浏览器的兼容性
a:link 设置超链接未被访问时的页面显示
a:visited 设置超链接已被访问过时的页面显示
a:hover 设置鼠标悬停在超链接时的页面显示
a:active 设置点击时的超链接页面显示
注意:它们四个书写的顺序很重要(link和visited必须写到hover之前,active必须位于hover之后.)
3.返回顶部案例:通过name命名,超链接绑定
例:

<head>
        <meta charset="UTF-8">
        <title></title>
       <style type="text/css">
            a{
                text-decoration: none;          //去掉下划线//
                font-family: 阿美简体;
                font-size: 24px;
                color: black;
            }
            //a::伪类:提高浏览器的兼容性//
            a:link{                    //设置超链接未被访问时的页面显示//
                color: red;
            }
            a:visited{            //设置超链接已被访问过时的页面显示//
                color: green;
            }
            a:hover{                   //设置鼠标悬停在超链接时的页面显示//
                color: deeppink;
            }    
            a:active{                     //设置点击时的超链接页面显示//
                color: gold;
            }    
            input:focus{
                background: red;
            }
            body:hover{
                background: grey;
            }
            div{
                width: 200px;
                height: 200px;
                background: green;
            }
            div:hover{
                width: 100px;
                height: 100px;
                background: url(img/bg2.jpg);
                background-repeat: no-repeat;    //去掉图片的重复性//
                background-size: 100% 100%;
            }
      </style>
</head>
    <body>
        <div></div>
        <input type="text" />
        <a href="#" name="mya">我的超链接</a>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br   /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <a href="#mya">返回顶部</a>
    </body>

4.圆角显示边框
border:none 无边框
//border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;//
简写://border-radius: 50%;//
边框的阴影:box-shadow: 20px 10px 60px 15px gray;(水平,垂直,模糊程度 ,阴影大小,颜色)
5.css三种样式的优先级
默认:行内>内嵌>外联
css三种样式的权重/改变优先级:!important
6.伪类选择的元素:nth-chid()
例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            li{
                list-style: none;
                float: left;
                border: 1px solid aqua;
                width: 50px;
                height: 50px;
                text-align: center;
                line-height: 50px;
            }
            div{
                width: 450px;
                height: 400px;
                margin: 100px auto;
            }
            li:nth-child(7n){
                background: red;
            }
            li:nth-child(6n){
                background: green;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li>29</li>
                <li>30</li>
                <li>31</li>
                <li>32</li>
                <li>33</li>
                <li>34</li>
                <li>35</li>
            </ul>
        </div>
    </body>
</html>

效果:

7.盒子模型
(1)重要的组成元素:
content(内容),padding(内边距),border(边框),margin(外边距)
(2)margin
margin:100px auto;(100px 表示的是上下的外边距 auto表示的左右水平居中)
margin:10px,20px,30px,40px;(上,右,下,左,)
margin;10px,20px,30px;(0px 表示上 20px表示左/右 30px表示下)
margin: 10px 20px;(10px表示上下 20px表示左右)
margin: 30px;(30px表示上右下左都为这值)
(3)让元素中的内容与元素边框之间的距离增大,可以设置元素的内边距
padding: 10px 20px 30px 40px;(上10px,右20px,下30px,左40px)
padding: 10px 20px 30px;(上 , 左/右 , 下)
8.margin-top塌陷问题
产生:一个元素中含有一个子元素,给子元素添加margin-top时,会发现将设置的值添加给父元素,导致子元素设置margin-top失效
解决方法:
(1)给父元素加overflow:hidden;
(2)给父元素加border边框
(3) 伪元素
例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                
                width: 400px;
                height: 200px;
                background: red;
                //会改变大小//
                //padding: 30px;//
                //第一种解决margin-top塌陷问题的方式//
                //overflow: hidden;//
                
                //第二种方法解决margin-top塌陷问题*/
                //border: 10px solid black;//
                }
        //最常见的一个问题(bug): margin-top塌陷问题//
                //margin-top: 100px;//
            .div2{margin-top: 100px;
                margin-left: 30px;
            }
            //第三种方法//
            .div1:before{
                content: "";
                display: table;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">我爱学习学习使我快乐</div>
        </div>
    </body>
</html>

9.元素溢出
产生:元素溢出指一个元素中含有其他元素,而其他元素超出了这个元素(父元素),我们把这种情况称之为元素溢出.
解决方法:
overflow:hidden;超出父元素的部分隐藏(剪切)不在可见
overflow: scroll;设置此属性,内容会被裁剪, 但是会添加滚动条,以便显示被裁剪的内容
overflow:visible;默认值,不会修剪,会呈现在元素框外
overflow-y:scroll;垂直滚动条
overflow-x:scroll;水平滚动条
overflow:auto;如果剪切了才显示滚动条
10.布局中常见的三种标签
(1)块元素/标签:块元素会占据文档流的一行显示,即便设置了宽高也会占据一行显示.
(2)内联标签/元素:内联元素的大小是跟随元素内容的改变而改变,设置了宽高,也不会改变元素的大小,同时不会占据文档流的一行,从左往右编写执行
(3)内联块标签/元素:不占据一行,且能设置宽高.
display属性:
可以将内联元素转换成内联块元素/块元素,同时也可以将内联块元素转换成内联元素/块元素,还可以将块元素转换成内联元素/内联块元素
display属性值:
none:元素影藏不显示
inline: 转换成内联元素
block:转换成块元素,并显示元素
inline-block: 转换成内联块元素

posted on 2020-04-15 13:37 豆皮没有豆阅读(528) 评论(0) 收藏举报