前端知识之CSS内容(一)

1.css的三种引入方式

　　1.外部样式:从外部导入css文件

　　2.内部样式:将css样式写在head标签对中的style标签对下

　　3.行内样式:在标签内部的style属性中设置css样式,不推荐大规模使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种引入方式</title>
    <link rel="stylesheet" href="mycss.css">
    <style>
        p, h1 {
            color: chartreuse;
        }
    </style>
</head>
<body>
<h1>三种引入方式</h1>
<p style="color: blue">我的web界面</p>
<div>div标签行</div>
</body>
</html>

2.css选择器

1.基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*标签选择器*/
        p {
            color: red;
        }
        /*类选择器*/
        .c1 {
            color: orange;
        }
        /*全局选择器*/
        * {
            color: hotpink;
        }
        /*id选择器*/
         #d1 {
            color: blue;
        }

    </style>
</head>
<body>
<p>一条大河长又宽</p>
<DIV id="d1">一个碗大又圆</div>
<span class="c1">面又长又宽</span>

</body>
</html>

2.组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器,div p*/
        div p {
            color: red;
        }
        /*儿子选择器div>p*/
        p>span {
            color: orange;
        }
        /*毗邻选择器*/
        div+span {
            color: hotpink;
        }
        /*弟弟选择器*/
        div~span {
            color: blue;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<div>div所在的位置
    <p>div里面的第一个p
        <span>div里面的p里面的span</span>
    </p>
    <p>div里面的第二个p
        <span>div里面第二个p里面的span</span>
    </p>
</div>
<span>div下面的第一个span</span>
<span>div下面的第二个span</span>
</body>
</html>

3.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*
        1.具有某个属性
        2.具有某个属性及属性值
        3.具有某个属性及属性值的标签
        */
        /*1.指定属性*/
        [hobby] {
            color: blue;
            background-color: hotpink;
        }
        /*2.指定具体属性以及属性值*/
        [hobby='dbj'] {
            background-color: orange;
        }
        /*3.指定属性和属性值和标签*/
        input[hobby='dbj'] {
             background-color: chartreuse;
        }

    </style>
</head>
<body>
username:<input type="text" hobby="dbj">
<!--age:<input type="text" hobby="dbj">-->
password<input type="text" hobby="sadsa">
</body>
</html>

4.分组和嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分组和嵌套</title>
    <style>
        /*分组:不同标签之间可以同时使用*/
        div,p,span {
            color: red;
        }
        /*嵌套:不同基本选择器可以一起使用*/
        #d1,.c1,span {
            color: hotpink;
        }
    </style>
</head>
<body>

<div id="d1">div标签</div>
<p class="c1">p标签</p>
<span>span标签</span>
</body>
</html>

5.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*连接态*/
        a:link {
            color: red;
        }
        /*鼠标悬浮态*/
        a:hover {
            color: blue;
        }
        /*鼠标点击态*/
        a:active {
            color: rebeccapurple;
        }
        /*鼠标点击过后的状态*/
        a:visited {
            color: hotpink;
        }
        /*input选中的状态称为获取焦点*/
        input:focus{
            background-color: pink;
        }
        input:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
<a href="http://www.4399.com" target="_blank">点击</a>
username:<input type="text">
</body>
</html>

6.伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        p:first-letter{
            font-size: 1000px;
            color: hotpink;
        }
        p:before{
            content: '©';
            color: hotpink;
        }
        p:after{
            content: '%';
            color: red;
        }
    </style>
</head>
<body>
<p></p>
<p>山路十八弯</p>
<p>山路十八弯</p>
<p>山路十八弯</p>
</body>
</html>

7.选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css">
    <style>
        /*
            1.选择器相同的情况下:就近原则
            2.选择器不同的情况下:


            行内  > id选择器 > 类选择器  > 标签选择器
        */
        #d1 {
            color: red;
        }
        /*.c1 {*/
        /*    color: orange;*/
        /*}*/
        /*p {*/
        /*    color: greenyellow;*/
        /*}*/

    </style>
</head>
<body>
<p id="d1" class="c1" style="color: green">快要下课了,我想吃饭了!</p>
</body>
</html>

1.选择器相同的情况下:就近原则

2.选择器不同的情况下:

行内 > id选择器 > 类选择器 > 标签选择器