百万年薪python之路 -- 前端CSS基础介绍

时间：2021-06-29 15:17:54

一. CSS介绍

CSS定义

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

语法结构

div{
    color: green;
    backgroud-color: black;
}
选择器{css样式:演示对应的值;}

CSS的引用方式

#方式一:(内部样式表)
    head标签中写以下内容:
        <style>
            div{
            color:green;
            background-color: black;
            }
        </style>
#方式二:(行内样式(内联样式))
    <div style="color:blue;backgroud-color:black;">
        少壮不努力,老大徒伤悲.
    </div>
#方式三:(常用的) 外部样式
    第一步: 创建一个css文件
    第二步: 在html文件中引入:<link rel="stylesheet" href="路径">
    第三步: css文件中的样式的写法:
            div{color:green;xx:xx;.....}

二. 选择器

1. 基本选择器

元素选择器:(标签名)
    p {color:"red";}

id选择器:按照id属性来找对应的标签
    # id属性对应的值{css属性:属性值;}
    示例:
    <style>
        #d1 {
            color:red;
        }
    </style>
    ---body部分内容----
    <div id="d1" class="c1">

类选择器:
    .class属性对应的值{css属性:属性值}
    示例:
        <style>
            .c1{
                color:red;
        }
    </style>
    ---body部分内容----
    <div id="d1" class="c1">

2. 组合选择器

后代选择器
选择器 空格 子选择器{属性名:属性值;}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        .c1 a{  /*c1里面的所有的a标签 */
            color:green;
        }
    </style>
</head>
<body>

<p>静夜思</p>
<a href="">床前明月光</a>
<div class="c1">
    <a href="">疑是地上霜</a>
    <div>
        <a href="">举头望明月</a>
        <div>
            <a href="">低头思故乡</a>
        </div>
    </div>
</div>
<a href="">诗人</a>
<div class="c2">
    <a href="">李白</a>
</div>

</body>
</html>
儿子选择器
.c1>a{  /* c1里面的儿子a标签 (子孙a标签不受影响)*/
    color:red;
}
示例:同上
毗邻选择器
.c1+a{  /* 与c1同级的下面的a标签,上面的a标签不会受影响*/
    color:red;
}
找的是紧挨着class属性为c1的标签的下面的标签
示例:同上
弟弟选择器
.c1~p{  /* 与c1同级的下面的所有a标签,上面的a不受影响 */
    color:green;
}
示例:同上

属性选择器

通过标签的属性来找到对应的标签
写法:
    [xxx]{color:red;}   找到xxx属性的所有标签
    [xxx='p2']{color:red;}  找到有xxx属性的并且属性值为p2的所有标签
    p[title]{color:red;}    找到所有有title属性的p标签
    p[title = 'p2'] {color:red;}    找到所有有title属性的并且属性值为p2的p标签
    示例:
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>诗</title>
            <style>
                p[xxx='p2']{
                    color:red;
                }
            </style>
        </head>
        <body>

        <p>p1</p>
        <p xxx="p2">p2</p>
        <p xxx="p3">p3</p>
        </body>
        </html>

组合选择器

写法:
    div,p{
        color:red;
    }
解释:div选择器和p选择器找到所有标签设置共同的样式.
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hehe</title>
    <style>
        div,p{
            color:red;
        }
    </style>
</head>
<body>

<div>div1</div>
<p>p1</p>

</body>
</html>

伪类选择器

示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hehe</title>
    <style>
        a:link{  /* a标签访问前设置样式 */
            color:red;
        }
        a:active{   /* a标签鼠标点下去显示样式 */
            color:green;
        }
        a:visited{  /* a标签访问后显示样式 */
            color:blue;
        }
        a:hover{    /* 鼠标悬浮到a标签时显示样式 */
            color:purple;
        }
        div:hover{  /* 鼠标悬浮到div标签时显示样式 */
            background-color: antiquewhite;

        }
        input:focus{    /* input标签捕获光标时的样式显示 */
            background-color: orange;
        }
    </style>
</head>
<body>

<a href="http://www.baidu.com">百度</a>

<div style="width: 200px;height: 200px;"></div>
<input type="text">

</body>
</html>

伪元素选择器

first-letter:文本内容首字母设置
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>努力</title>
    <style>
        div:first-letter {
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div>
    少壮不努力,老大徒伤悲
</div>

</body>

</html>
before示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>奋斗</title>
    <style>
        div:before {
            content: "要努力啊";
            color: antiquewhite;
        }
    </style>
</head>
<body>

<div>
    少壮不努力,老大徒伤悲
</div>

</body>
</html>
after示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>加油</title>
    <style>
        div:after {
            content: "要努力啊";
            color: antiquewhite;
        }
    </style>
</head>
<body>

<div>
    少壮不努力,老大徒伤悲
</div>

</body>
</html>

CSS权重

百万年薪python之路 -- 前端CSS基础介绍

权重越高,对应选择器的样式会被优先显示
组合选择器,各选择器的权重相加
权重不进位,11类选择器组合到一起,也没有一个id选择器的优先级大,小就是小
默认css样式是可以继承的,继承的权重为0
权重相同的选择器,谁后写的,用谁的

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>美女</title>
    <style>
        div .c1{
            color:red;
        }
        .c2 .c1 {
            color: blue;
        }
        /*#d1{*/
        /*    color:yellow;*/
        /*  }*/
        /*div{*/
        /*    color:green;*/
        /*}*/
        /*.c2{*/
        /*    color: antiquewhite;*/
        /*}*/
    </style>
</head>
<body>

<div class="c2">
    少壮不努力,老大徒伤悲.
<!--    <div class="c1" id="d1" style="color: antiquewhite">-->
    <div class="c1" id="d1" >
        努力啊!兄弟!
    </div>
</div>
</body>
</html>

ps: 特别注意的是 a标签设置样式,需要选中设置,不能继承父级标签的样式

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /*.c3 a{*/
        /*    color:red;*/
        /*}*/
        .c3{
            color:red;
        }
    </style>
</head>
<body>
<div class="c3">
    <a href="">百度</a>
</div>
</body>
</html>

相关文章