CSS基础精讲-CSDN博客

CSS第二天

一.ememet语法

1.快速生成HTMl结构语法

1.生成标签，打上标签名直接按tab键

2.生成多个相同标签加上* （div*3生成三个div标签）

3.存在父子级关系可以用 > (ul>li)

4.生成div标签自带class属性： .属性名（.demo）之后按Tab键

5.生成带id的div标签：#id名（#two）之后按Tab键

6.兄弟关系的标签可以用加号（p+div）

7.生成的div类名是有顺序的可以用自增符号 $

8.要在生成的标签内写内容得加上 {}

例子：div{$}*5 生成五个div标签标签内容是1自增到5

2.快速格式化代码

shift+alt+f

二.CSS复合选择器

1.后代选择器(重要)

<!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>后代选择器</title>
    <style>
        /* 
        元素一和元素二 中间必须用空格隔开 
        元素一和元素二可以是任意基础选择器
        把后代中的改变颜色
         */
        ol li {
            color: antiquewhite;
        }
        ol li a {
            color: royalblue;
        }
        .nav li a {
            color: yellow;
        }
        ul li a {
            color: powderblue;
        }
    </style>
</head>
<body>
    <ol>
        我是ol
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li> <a href="#">我是ol的孙子</a></li>
    </ol>
    <ul class="nav">
        我是ul
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li> <a href="#">我是ol的孙子</a></li>
    </ul>

    <ul>
        我是ul
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li> <a href="#">我是ol的孙子</a></li>
    </ul>
</body>
</html>

2.子选择器

<!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>子选择器</title>
    <style>
        /* 
        元素一和元素二 用大于号隔开 
        只有亲儿子才会根据选择器变化 
        孙子 重孙子都不会变化
        */
        .nav>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>
</html>

3.并集选择器(重要)

<!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>并集选择器</title>
    <style>
        /* 
        并集选择器 ：选择多组标签 同时定义他们成为相同的样式
        通过逗号分割 最后一个不要加逗号
        竖着写！！
        */
        div,
        p,
        .pig {
            color: aqua;
        }
    </style>
</head>

<body>
    <div>胸大</div>
    <p>无脑</p>
    <span>被人骗</span>
    <ul class="pig">
        <li>佩奇</li>
        <li>保罗</li>
        <li>乔治</li>
    </ul>
</body>

</html>

4.伪类选择器

<!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>伪选择器</title>
    
    <style>
        /* 
         超链接伪选择器(在超链接的时候使用) 用冒号表示(:)
        a:link 没有访问的链接
        a:visited 已经访问过的链接
        a:hover 鼠标经过后变成什么颜色(经常用)
        a:active 选择活动链接(鼠标按下去还没有谈起)

        注意事项：
            按照顺序：link-visited-hover-active  LVHA
        */
        a:link {
            color: black;
            text-decoration: none;
        }
        a:hover {
            color: blue;
        }
        a:visited {
            color: gray;
        }
        a:active{
            color: green;
        }

        /* 
        伪类选择器 获得焦点后端表单元素
         得到光标
        */
        input:focus {
            background-color: pink;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">baidu</a>
    <a href="https://www.sina.com.cn/">sina</a>

    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

三.CSS的元素显示模式

作用可以更好的布局页面元素显示就是元素标签以什么方式进行显示 HTML元素一般分为块元素和行内元素两种类型

块元素：
典型的块元素

特点：独占一行可以给宽度和高度没有指定的话会和父亲一样的宽度高度。是个容器级的盒子可以装其他块级元素或者行内元素

注意：文字类的标签不能使用块级元素（

-

和
）

行内元素：典型的行内元素/内联元素

特点：一行上可以放多个元素宽和高单独设置没有效果默认的宽度就是文字的宽度行内元素中只能放文本或其他行内元素

注意：链接中不能放其他链接，但是标签中可以放其他块级元素得把转换一下块级模式

行内块元素：、、：同时具有块级元素和行内元素的特点

特点：

行内块之间存在空隙，默认宽度就是他本身的宽度（行内元素特点）。高度行高外边距内边距都可以控制（块元素特点）。

元素显示模式切换

<!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>元素显示模式切换</title>
    <style>
        a{
            width: 150px;
            height: 50px;
            background-color: beige;
            /*把行内元素转换为div块级元素*/
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把div块级模块转换为行内元素 */
            display: inline;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 行内元素转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">刷子</a>
    <a href="#">刷子</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>
</html>

四.CSS背景

设置背景颜色

background-color: 颜色值（默认值是transparent透明，可以自己设置）

设置背景图片

background-image: url(图片地址) 必须加url 默认是none没有背景图片

背景平铺

background-repeat：no-repeat不平铺 / repeat平铺（默认） /repeat-x 延x轴平铺 / repeat-y 延y轴平铺

注意：背景图片和背景颜色一起添加背景图片可以覆盖背景颜色

设置背景图片的位置(*)

background-position：x y; 参数表示 x坐标或者y坐标可以使用方位名词或者精确单位

1.如果是方位名词(center中间 top顶部 left right)：

参数写background-position: right center 和background-position:center right 效果一样

如果只写了一个参数另一个参数默认是垂直居中的

2.如果是精确单位

参数第一个只能是水平座标第二个是垂直坐标有严格的顺序 background-position: 20px 30px

3.混合单位

也可以使用混合精确和方位相结合 background-position: 20px center 第一个参数一定是x坐标第二个一定是y坐标

背景图像固定

background-attachment : scorll 背景图像随对象滚动/ fixed ：背景图像不随对象滚动

属性设置背景图像是否固定或者跟随页面的其余部分滚动

背景颜色半透明

background：rgba(0, 0, 0, .3); 最后一个参数是透明度在0-1之间只是让盒子半透明盒子信息还是存在的

复合属性（推荐）

约定按照这个顺序来写！！

background：背景颜色背景图片地址背景平铺背景图片滚动背景图片位置

五.CSS三大特性

1.层叠性

当样式发生冲突时会执行距离标签进的

当样式不冲突时不会层叠

2.继承性

子标签会继承父标签的一些特性如颜色和字号也可以继承父亲的父亲的样式

简化代码降低css样式的复杂性

行高的继承：行高可以被继承

font:12px/1.5 Microsoft YaHei ：字体是12px大小行高是字体大小的1.5倍

3.优先级

选择器相同则执行层叠新

选择器不同根据权重执行

选择器	选择器权重
继承或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=“”	1，0，0，0
!important(在样式后面加提高权重)	无穷大