day45_9_4前端（2）css

一。css的三种css导入：

　　1.在标签中内部定义（不推荐）。

　　2.在head中的style总定义样式。

　　3.使用link链接外部的css文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <link rel="stylesheet" href="newcss.css">
    <style>
        p {
            color: blueviolet;
        }

    </style>
</head>
<body>
<p style="color: blue">测试三种选择器</p>
</body>
</html>

css的演示

　　其中的作用优先级是1》2》3。

二。四种基本选择器：

　　1.标签选择器（仅限这个标签下的格式）

        p {
            color: blueviolet;
        }

　　指定一个标签，将所有的标签都改为该样式。

　　2.id选择器

        #d1{
            color:yellow;
        }

　　将这个id下的格式改为该样式。

　　3.类选择器

        .p1{
            color: coral;
        }

　　将定义了该类名的所有类都变成该格式。

　　4.全局选择器

        *{
            color:coral;
        }

　　将该页面下的所有格式都改为该格式。

　　当具有相同的选择器时，以最后一个为准。

　　不同的选择器优先级由作用域大小排列。选择范围越大，优先级越小。

三。组合选择器。

　　1.后代选择器。

        div p {
            color: blueviolet;
        }

　　该div下所有的p的样式都为该样式。

　　2.儿子选择器。

div>span {
            color: aqua;
        }

　　只有div中的span才具有该属性，

　　3.毗邻选择器。

        div+span {
            color: orange;
        }

　　在div紧挨着的下一个span的样式。

　　4.弟弟选择器。

   div~span {
            color: brown;
        }

　　div下面的所有的span的样式修改。

四，属性选择器

<input type="text" name="username" hobby="jdb">
<input type="text">
<span hobby="jdb">span</span>

1.属性名

        [hobby] {
            background-color: red;
            color: orange;
        }

　　使用属性名指定修改。

2.属性名加值

        [hobby="jdb"] {
            background-color: pink;
        }

　　使用属性名加值指定修改。

3.标签，属性名加值

        input[hobby="jdb"] {
            background-color: greenyellow;
        }

　　指定某个标签中具有某个属性和某个值的元素修改。

五。分组和嵌套。

　　1.分组。可以将一些需要同样的样式修饰的值一起修饰。

        div,span, p {
            color: pink;
        }

　　2.嵌套不同的选择器可以组合使用同样的属性。

        #d1,.c1,span {
            color: orange;
        }

六。伪类选择器。

　　主要是对链接标签<a>使用的选择器。

　　1.link

　　link是在a标签连接态时，显示的相册。

        a:link {
            color: pink;
        }

　　2。鼠标悬浮态

　　当鼠标悬浮在链接上时，会出现的样式。

        a:hover {
            color: red;
        }

　　3.鼠标点击态

　　当鼠标点击下去的时候会出现的样式和状态。

        a:active {
            color: purple;
        }

　　4.访问态。

　　当链接被访问后，出现的状态。

        a:visited {
            color: dimgrey;
        }

　　5.input框被点击时的状态，被称为获取焦点

        input:focus {
            background-color: orange;
        }

　　6.input悬浮时显示的状态。

        input:hover {
            background-color: red;
        }

七。伪元素选择器。

　　1.作用与某个标签的头一个字符的样式。

        p:first-letter {
            font-size: 48px;
            color: gold;
        }

　　2。作用与某个元素的开头，而且不能被选择。

p:before {
            content: '$';
            color: gold;
        }

　　3.作用于某个元素的结尾。

        p:after {
            content: "?";
            color: red;
        }

　　这些选择器会在浮点的问题上有很大的用处。

day45_9_4前端（2）css

猜你喜欢