Web应用课——2.1 CSS——定义方式、选择器

作者： 作者的头像   ._675 ,  2023-05-17 21:02:33 ,  所有人可见 ,  阅读 195

0


index.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>Document</title>
    <!-- 内部样式表 -->
    <style type="text/css">
        img {
            background-color: antiquewhite;
            border-radius: 50%;
            width: 200px;
            height: 200px;
        }
    </style>

    <!-- 外部样式表 -->
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>

<body>
    <h1>1.1 样式定义方式</h1>
    <!-- 行内样式表
    <img src="static/images/logo.png" alt="" style="width: 300px; height: 200px;">
    <img src="static/images/mountain.jpg" alt="" style="width: 100px; height: 300px;">
    -->

    <img class="big" src="static/images/logo.png" alt="">
    <img src="static/images/mountain.jpg" alt="">

    <p class="blue-p">1</p>
    <p class="big">2</p>
    <p class="blue-p big">3</p>
    <p>4</p>

    <hr>
    <h1>1.2 选择器</h1>
    <div class="red-tag big-tag effect">div 1</div>
    <div id="mydiv">div 2</div>
    <div>div 3</div>
    <div>div 4</div>

    <p>p 1</p>
    <p id="myp">p 2</p>
    <p>p 3</p>
    <p>p 4</p>

    <a href="/about.html">about1</a><br>
    <a href="/about2.html">about2</a><br>
    <a href="/about3.html">about3</a><br>
    <a href="/about4.html">about4</a><br>

    <input type="text"><br>

    <a href="#myp">我的标签</a>

    <ul>
        <li>1
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li>2</li>
        <li>3</li>
    </ul>

    <input type="email" name="">
    <input type="number" name="" id="">

    <pre>锄禾日当午，</pre>
    <pre>汗滴禾下土。</pre>
    <pre>谁知盘中餐，</pre>
    <pre>粒粒皆辛苦。</pre>

    <article>
        锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，锄禾日当午，
    </article>

    <h1>悯农</h1>
    <h1>咏柳</h1>
    <h1>滕王阁序</h1>
    <h1>伤仲永</h1>

</body>

</html>

style.css

/* 标签选择器 */
div {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
}

p {
    width: 50px;
    height: 300px;
    background-color: lightgreen;
}

.blue-p {
    background-color: lightblue;
}

.big {
    width: 70px;
    height: 70px;
}

/* id选择器 */
#mydiv {
    background-color: lightcoral;
}

#myp {
    background-color: lightsalmon;
}

/* 类选择器 */
.red-tag {
    background-color: red;
}

.big-tag {
    width: 120px;
    height: 120px;
}

/* 伪类选择器 */
.effect:hover {
    /* 鼠标悬停*/
    transform: scale(1.2);
    /* 变大*/
    transition: 200ms;
    /*渐变*/
}

#mydiv:hover {
    background-color: white;
    transition: 2000ms;
}

/* 链接访问前的样式 */
a:link {
    color: red;
}

/* 链接访问后的样式 */
a:visited {
    color: green;
}

/* 鼠标悬停时的样式 */
a:hover {
    color: orange;
}

/* 鼠标点击后长按时的样式 */
a:active {
    color: purple;
}

/* 聚焦后的样式,即出现光标之后的状态 */
input:focus {
    background-color: lightblue;
}

/* 位置伪类选择器：
:nth-child(n)选择是其父标签第n个子元素的所有元素。n可以写成一个an+b的格式 */
p:nth-child(2n) {
    background-color: blue;
}

/* 目标伪类选择器：
:target当url指向该元素时生效。 超链接“我的标签”链接到了myp*/
p:target {
    transform: scale(1.2);
    color: white;
    transition: 2s;
}

/* 复合选择器 */
/* 1.同时选择元素div和元素p。 */
div,
p {
    background-color: aliceblue;
}

/* 2.element.class：选则包含某类的element元素。 */
div.red-tag {
    color: red;
}

.red-tag.big-tag {
    color: red;
    transform: scale(1.2);
}

#myp.myp {
    transform: scale(1.2);
}

/* 3.element1 + element2：选择紧跟element1的element2元素。 */
div+p {
    background-color: lightgreen;
}

p+#myp {
    background-color: lightcoral;
}

/* 4.element1 element2：选择element1内的所有element2元素。 */
ul ul {
    color: red;
}

/* 5.element1 > element2：选择父标签是element1的所有element2元素。 */
li>ul {
    color: gray;
}

li>ul>li {
    color: green;
}

/* 通配符选择器 
*：选择所有标签
[attribute]：选择具有某个属性的所有标签
[attribute=value]：选择attribute值为value的所有标签
*/
* {
    font-size: 24px;
}

input[id] {
    background-color: lightblue;
}

input[type=email] {
    background-color: red;
}

/* 伪元素选择器
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

::first-letter：选择第一个字母
::first-line：选择第一行
::selection：选择已被选中的内容
::after：可以在元素后插入内容
::before：可以在元素前插入内容 */
pre::first-letter {
    color: red;
    font-size: 110%;
}

article::first-line {
    color: green;
    font-size: 110%;
}

article::selection {
    color: pink;
    background-color: black;
}

h1::before {
    content: "《";
    color: green;
}

h1::after {
    content: "》";
    color: green;
}

0 评论

1024
x