css(层叠样式表)

II.css

CSS:层叠样式表

层叠样式表(Cascading Style Sheets,缩写为 CSS)是一种样式表语言,用来描述 HTMLXML(包括如 SVGMathMLXHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题

1.样式

行内样式

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <div style="width: 700px; height: 50px; background-color: pink;">我是一个盒子</div>
</body>
​
</html>

内部样式表

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 内部样式 */
        div {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
​
<body>
    <div>
​
    </div>
</body>
​
</html>

外部样式

html

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./13-外部样式.css">
</head>
​
<body>
    <div></div>
</body>
​
</html>

css

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

2.css选择器

1.基础选择器

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器:选中当前页面中所有符合标签 */
        h1 {
            color: rgb(32, 27, 28);
        }
​
        /* id选择器   #id*/
        #box1 {
            color: rgb(6, 106, 194);
        }
​
        /* 类选择器   .类名 */
        .box1 {
            background-color: pink;
        }
​
        /* 通配符选择器  选中所有的元素*/
        * {
            font-size: 60px;
        }
    </style>
</head>
​
<body>
    <div>我是一个不允许编辑的盒子</div>
    <p>我是一段文字</p>
    <h1 class="box1">我是标题</h1>
    <div id="box1">我是一个不允许编辑的盒子</div>
    <div class="box1">我是一个不允许编辑的盒子</div>
​
​
</body>
​
</html>
.标签选择器
h1 {
            color: rgb(32, 27, 28);
        }
.id选择器
#box1 {
            color: rgb(6, 106, 194);
        }
​
.类选择器
.box1 {
            background-color: pink;
        }
.通配符选择器
* {
            font-size: 60px;
        }

2.包含选择器

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器   只选中亲生儿子 */
        ul>li {
            background-color: pink;
        }
​
        /* 后代选择器 */
        /* css样式表存在层叠性,后边的会将前边的覆盖掉 */
        ul li {
            background-color: aqua;
        }
​
        ul div>li {
            background-color: brown;
        }
    </style>
</head>
​
<body>
    <ul>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <div>
            <li>我是孙子</li>
            <li>我是孙子</li>
​
        </div>
​
    </ul>
</body>
​
</html>

.子代选择器
ul>li {
            background-color: pink;
        }
​

.后代选择器
ul li {
            background-color: aqua;
        }
​
        ul div>li {
            background-color: brown;
        }

3.逗号选择器

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            background-color: pink;
        }
​
        h1 {
            background-color: pink;
​
        }
​
        p {
            background-color: pink;
​
        } */
​
        /* 复合选择器 */
        div,
        p,
        h1 {
            background-color: aqua;
        }
    </style>
</head>
​
<body>
    <div>我是一个div</div>
    <p>我是小p</p>
    <h1>我是标题</h1>
</body>
​
</html>

. 复合选择器
 div,
        p,
        h1 {
            background-color: aqua;
        }

4.属性选择器

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type="text"] {
            background-color: pink;
        }
​
        input[type="password"] {
            background-color: aqua;
        }
​
        input[name] {
            background-color: red;
        }
​
        /*   *type的属性值里包含e的input元素 
        */
        input[type*="e"] {
            background-color: blueviolet;
        }
​
        input[type^="p"] {
            background-color: chartreuse;
        }
​
        input[type$="l"] {
            background-color: red;
        }
    </style>
</head>
​
<body>
    <form action="#">
        <input type="text">
        <input type="password">
        <input type="email" name="email">
        <input type="number">
    </form>
</body>
​
</html>

5.伪类选择器

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a:link 、a:visited 、a:hover 、a:active */
        /* 伪类选择器:元素在不同状态下的样式 */
        /* :link    为访问的来凝结样式 */
        a:link {
            color: green;
        }
​
​
​
        /* 访问之后的样式 */
        a:visited {
            color: red;
        }
​
        /* 获取焦点时的样式 */
        a:focus {
            color: blue;
        }
​
        /* 鼠标悬停时的样式 */
        /* 
       +表示下一个
            ~表示之后所有的兄弟元素 */
​
        a:hover+div {
            color: pink;
        }
​
        /* active     用户点击之后按住鼠标 */
        a:active {
            background-color: pink;
        }
​
        div:hover {
            background-color: pink;
        }
    </style>
</head>
​
<body>
    <a href="#">点击我去百度
​
    </a>
    <div>我是一个div</div>
</body>
​
</html>
访问先后

a:link

a:visited

a:hover

a:active

6.结构伪类选择器

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(9) {
            background-color: pink;
        }
​
        ul li:last-child {
            background-color: red;
        }
​
        ul li:first-child {
            background-color: aqua;
        }
​
        ul li:nth-child(2n+1) {
            background-color: blue;
        }
​
        ul li:nth-child(2n) {
            background-color: rgb(33, 227, 124);
        }
    </style>
</head>
​
<body>
    <ul>
​
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
        <li>我是li6</li>
        <li>我是li7</li>
        <li>我是li8</li>
        <li>我是li9</li>
        <li>我是li10</li>
    </ul>
</body>
​
</html>
单行
 ul li:nth-child(9) {
            background-color: pink;
        }
首行
 ul li:first-child {
            background-color: aqua;
        }
末行
ul li:last-child {
            background-color: red;
        }
偶数行
ul li:nth-child(2n) {
            background-color: rgb(33, 227, 124);
        }
奇数行
ul li:nth-child(2n+1) {
            background-color: blue;
        }
​

7.伪元素选择器

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::before {
            content: "##3#";
            color: pink;
        }
​
        p::after {
            content: "and you";
            color: red;
        }
​
        input::placeholder {
​
            color: pink;
        }
​
        div::selection {
            color: aqua;
        }
    </style>
</head>
​
<body>
    <p>我叫缑欣</p>
    <p>我叫缑欣</p>
    <p>我叫缑欣</p>
    <input type="text" placeholder="请输入用户名:">
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro libero voluptatum consectetur
        doloremque corrupti pariatur assumenda perspiciatis facere impedit, cum, autem voluptas repellendus provident
        eius et ipsum ratione laudantium!
        Corporis dicta repellat deleniti itaque blanditiis illo ipsum sed, libero quis vero, praesentium architecto hic
        dolores debitis! Incidunt fugiat sed fugit aliquid officiis fuga quo sequi rerum, voluptas qui quia!
        Iste consectetur corrupti sunt totam dolores quae provident dignissimos ipsum, odio maiores atque. Provident sit
        maxime quidem fugiat eius illo corrupti, deserunt itaque accusantium. Consequatur quisquam distinctio architecto
        suscipit vel.
        Sit similique nisi pariatur molestiae obcaecati non voluptate sint. Iure veniam, ab praesentium, accusantium
        quae eligendi reiciendis ipsa ad nihil atque obcaecati aut repellendus porro optio eaque itaque non
        necessitatibus!
        Vitae facere accusantium magnam, vero architecto dolore deleniti nobis quis, recusandae, officiis culpa magni ut
        distinctio delectus odio obcaecati aspernatur! Qui optio placeat tempora recusandae explicabo aut earum
        repellendus adipisci.
        Quam magnam unde aperiam aliquam ut molestiae est nobis odio. Deserunt odit numquam atque modi facere
        dignissimos laborum commodi architecto incidunt, officia, eveniet autem provident nesciunt et corporis quasi
        ipsa!
        Quaerat quod sint ea nostrum voluptas repellendus, assumenda minima numquam perferendis vel officiis dolorem
        beatae nemo cum quae autem. Velit asperiores natus dolorem, et libero praesentium modi provident numquam
        exercitationem.
        Optio tempora fugiat eveniet debitis! Est unde blanditiis totam ullam quia debitis explicabo sit eaque quaerat,
        minus molestiae. Libero quo consequatur doloribus pariatur aut impedit ullam fugiat aliquid! Libero, incidunt.
        Laborum consectetur illo esse quasi voluptatem dolorum delectus eveniet. Eius nostrum non quia accusantium nam
        tempore culpa praesentium iure cumque tempora id possimus, expedita ea in quod quae odit voluptatibus?
        Laborum, a odit! Quibusdam suscipit neque architecto esse voluptate! Cupiditate, illum accusantium ipsam impedit
        suscipit exercitationem odit repudiandae repellat, voluptatibus fugiat repellendus porro tempora? Nihil et nulla
        minus reprehenderit iusto.]
​
    </div>
</body>
​
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值