CSS(2)

2020-01-24 本文已影响0人山猪打不过家猪

复合选择器

1.后代选择器
外层标签写在前面，内层标签写在后面，中间用空格分隔。选择子孙后代

.info ul li{ 
  color:red;  
}

2.子元素选择器
子指的是亲儿子，不包含孙子重孙子

div>strong{
  color:pink;
}

3.交集选择器(不太常用)
既是p标签，又是.red类选择器

p.red{
  color:red;
}

4.并集选择器
通常集体声明
p 和 span里面的颜色都是红色

p, span, .red{
  color:red;
}

5.链接伪类选择器（重点）
用于向某些选择器添加特殊效果。比如给链接添加特殊效果，可以选择第1个或者第N个

        /* 正常状态 */
        a:link{
            color: #333;
            text-decoration: none;
        }
        /* 已经访问过得状态 */
        a:visited{
            color: red;
        }
        /* 鼠标经过状态 */
        a:hover{
            color: blue;
        }

必须使用上面的顺序，不然会出现bug;
实际开发中一般只是用正常状态和hover状态

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .nav a {
            color: #333;
            text-decoration: none;
        }
        .nav a:hover {
            color: orange;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">手机</a>
    </div>
    <a href="#">没有妈妈的孩子像棵草</a>
</body>

标签显示模式

1.块级元素(block)
特点：

自己独占一行
高度，宽度，外边距以及内边距都可以控制
宽度默认是容器的100%（父级）
是一个容器以及盒子，里面可以放块级或者行内
常见的有

<div></div>
<ul></ul>
<p></p>
<h1></h1>
<table></table>
<ol></ol>
<li></li>

2.行内元素(inline)
特点：

相邻行内元素在一行上，一行可以显示多个
高，宽设置无效
默认宽度就是其本事内容宽度
行内元素只能容纳文本或者其他行内元素

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

3.行内块级元素(inline-block)
这几个特殊的可以设置宽高和对齐属性

<img src="" alt="">
<input type="text">
<td></td>

3.标签显示模式转换

块转行内display:inline
行内转为块元display:block
块，行内转行内块display:inline-block

span {
    /*把行内元素转换为块级元素*/
    display: block;
    width: 100px;
    height: 100px;
    background-color: pink;
}
div {
    /*把块级元素转换为行内元素*/
    display: inline;
    width: 200px;
    height: 200px;
    background-color: purple;
}
a {
    /*转换为 行内块元素*/
    display: inline-block;
    width: 80px;
    height: 25px;
    background-color: orange;
}

简易导航栏应用

image.png
分析:
3个链接有高度，有宽度，并且当鼠标移动到链接块上时候，变色。所以，这里我们需要将<a>标签行内元素转换为行内块元素

    <style>
        /*1. 变化样式 有大小  一行显示  我们想到了 行内块元素*/
        a {
            /*一定要进行模式转换 行内块*/
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: pink;
            /*可以让文字水平居中*/
            text-align: center;
            color: #fff;
            text-decoration: none;
        }
        /*2. 鼠标经过 变化底色 和 文字的颜色*/
        a:hover {
            background-color: orange;
            color: yellow;
        }
    </style>

行高

行高line-height的测量

image.png

如果是中文测量的话，直接上一行的底到下一行的底就是行高
1.单行文本垂直居中

image.png

行高= 上距离+内容高度+下距离

行高等于高度文字垂直居中

    <style>
        a {
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: pink;
            text-align: center;
            color: #fff;
            text-decoration: none;
            line-height: 30px;
        }
      </style>

CSS背景

1.背景颜色

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            height: 800px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>   
    1232131
</div>
</body>

2.背景图片

背景图片必须加url且背景图片的url不要加引号，默认背景是平铺

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            height: 800px;
            background-color: pink;
            background-image: url(images/3.jpg);
        }

    </style>
</head>
<body>
<div>   
    1232131

</div>

</body>

3.背景平铺

默认平铺
不平铺background-repeat: no-repeat;
横向平铺background-repeat: repeat-x;

    <style>
        div{
            width: 800px;
            height: 800px;
            background-color: pink;
            background-image: url(images/3.jpg);
            background-repeat: no-repeat;
        }
    </style>

4.背景位置重点

超大背景图片位置一般为background-position: center top;

/*背景位置*/
/*background-position: x坐标 y坐标;*/
/*background-position: right top; 右上角*/
/*background-position: left bottom; 左下角*/
/*background-position: center center; 水平居中 垂直居中*/
/*则两个值前后顺序无关 因为是方位名词*/
/*background-position:  center left; */
/*如果只指定了一个方位名词，另一个值默认居中对齐*/
/*background-position: left; */

5.背景附着
background-attachment:scroll | fixed背景是滚动的还是固定的

6.背景简写
严格按照以下顺序：背景颜色背景图片地址背景平铺背景滚动背景位置(平铺可以不写默认平铺)

background: #ccc ulr(images/sms.jpg)  no-repeat fixed center top;

应用：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <title>导航栏</title>
    <style>
        .nav{
            text-align: center;
        }
        a {         
            display: inline-block;
            text-decoration: none;
            width: 120px;
            height: 50px;
            background-color: pink;
            line-height: 50px;
            color: white;
            background: url(images/bg.png) no-repeat;
        }       
        .nav :hover{
            background: url(images/bgc.png) ;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="">网站导航</a>
        <a href="">网站导航</a>
        <a href="">网站导航</a>
        <a href="">网站导航</a>
        <a href="">网站导航</a>
        <a href="">网站导航</a>
    </div>
</body>
</html>

7.背景透明

background-color :rgba(0,0,0,0.3);

注：
最后的参数a是alpha透明度取值范围0-1之间
我们习惯把0.3的0省略掉这样写background-color :rgba(0,0,0,.3)

CSS三大特性

1.层叠性
从上至下执行，下面的代码会覆盖上面的代码；
相同会冲突，不同的样式不冲突
2.继承性
3.优先级（权重）
1）权重计算公式

计算公式.png

案例.png