HTML&CSS学习Day03-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_70617888/article/details/131009416

1.css基本语法

<!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>
        /* 1.css语法
            声明：一个属性就是一个声明 修改标签样式
            声明块：多个声明就是声明块
            属性书写规则：
                属性名和属性值之间用：隔开
                多对属性之间用;隔开
                最后一对属性后可不加分号，建议加
        */
        /* css规则集 选择器{} */
        /* 2.ctrl + / */
        /* 3.速记语法  一个属性是由多个属性简写来的*/
        div {
            color: red;
            font-size: 28px;
            /* border：width style color */
            /* border: 1px solid blue; */
            border-top-width: 2px;
            border-top-color: aqua;
            border-top-style: dashed;
            border-left-width: 2px;
            border-left-color: rgb(179, 24, 39);
            border-left-style: ridge;
            border-right-width: 2px;
            border-right-color: rgb(29, 230, 36);
            border-right-style: double;
            border-bottom-width: 2px;
            border-bottom-color: rgb(186, 30, 152);
            border-bottom-style: dotted;
        }

        /*边框线类型
            none（无边框线）、 dotted（由点组成的虚线）、
            dashed（由短线组成的虚线）、 solid（实线）、 
            double（双线，双线宽度加上它们之间的
            空白部分的宽度就等于border-width定义的宽度）、
            groove（3D沟槽状的边框）、 
            ridge（3D脊状的边框）、 
            inset（3D内嵌边框，颜色较深）、 
            outset（3D外嵌边框，颜色较浅） 
         */
        /* 利用css中的border绘制一个三角形 */
        .tri {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            /* 先隐藏所有，再绘制一个 */
            border-top: 100px solid red;
            border-right: 100px solid blue;
        }

        /*transparent 全透明黑色*/
    </style>
</head>

<body>
    <div>我是一个div</div>
    <div class="tri"></div>
</body>

</html>

2.引入css的方式

<!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>

    <!-- 引入外部样式表
        1.link标签引入
        2.使用@import引入 @import必须放在style标签中
    -->
    <!-- link和@impot的区别
        1.link是html标签 @import是css方式
        2.link同时加载html与css @import优先加载css
        3.link无兼容性差异 @import支持ie5+以上版本
    -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入内部样式表 -->
    <style type="text/css">
        /* style标签中的type属性其实可以不用写, 默认就是type="text/css" */
        /* @import url('style.css'); */

        div {
            color: yellow;
            /* 设置字体大小 */
            font-size: XX-large;
            background-color: #ef73de;
        }
    </style>
</head>

<body>
    <!-- 
        引入css的方式
        1.内联样式/行内样式 <div style="color:red">设置文字的颜色为红色</div>
        2.内部样式表 style标签
        3.外部样式表
        优先级：内联>外部=style 就近原则，看谁距div最近
     -->
    <!-- 1.使用style属性 内联、行内属性 -->
    <div>我是一个div</div>
</body>

</html>

3. 标签，id，class选择器

标签 #id .class

<!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>
        /* 1.标签选择器 选择所有名为div的标签 */
        div {
            color: orange;
            font-size: 24px;
        }

        /* id选择器 #id 唯一选中一个标签 */
        #two {
            background-color: pink;
        }

        /* class选择器 类选择器 .类名 选中一类标签 */
        .three {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div>
        我是父元素
        <div>
            我是子元素
            <div>我是孙子元素</div>
        </div>
    </div>
    <p id="two">段落标签</p>
    <p class="three">段落标签</p>
    <!-- 可以给标签添加多个类名 使用空格隔开 -->
    <p class="four three">段落标签</p>
</body>

</html>

4. 后代和子代选择器

<!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>
        /* 4.后代选择器 选中所有的后代 包括子代和其他后代 选择器1 选择器2 空格隔开 */
        div p {
            color: cyan;
        }

        /* 5.子代选择器 选中直接子代 不包括其他后代 使用>隔开 */
        .box>p {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <div>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <div>我是一个div</div>
            <div>我是一个div</div>
        </div>
    </div>

</body>

</html>

5.交集和并集

<!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>
        /* <!-- 6.交集选择器 选择一类标签中相交部分的标签 --> */
        p.box {
            font-size: 24px;
            color: aqua;
        }

        /* 7.并集选择器 组合选择器 选取多个标签 使用，隔开 */
        div,
        .box,
        #last {
            background-color: aquamarine;
        }
    </style>


    </style>
</head>

<body>
    <div>我是一个div</div>
    <p>段落标签</p>
    <p class="box">段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <section id="last">我是一个块元素</section>
</body>

</html>

6.兄弟选择器

<!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>
        /* 8.兄弟选择器  不包括自身 只会选择兄弟*/
        /* css2兄弟选择器 只会选中相邻的第一个兄弟元素 使用+拼接 */
        .box+div {
            color: bisque;
            font-size: 24px;
        }

        /* css3兄弟选择器 选取所有的兄弟元素 使用~拼接 */
        .box~div {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
</body>

</html>

7.序选择器/伪类选择器

<!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>
        /* 序选择器/伪类选择器 */
        p:first-child {
            color: bisque;
        }

        p:nth-child(5) {
            color: aqua;
        }

        /* 
        p:nth-last-child() {
            color: aquamarine;
        } */
        p:last-child {
            color: aquamarine;
            font-size: larger;
        }

        /* 选取奇数p标签 */
        p:nth-child(odd) {
            background-color: palevioletred;
        }

        /* 选取偶数p标签 */
        p:nth-child(even) {
            background-color: chartreuse;
        }

        /* 1 4 7 */
        p:nth-child(3n+1) {
            font-size: 24px;
        }

        /* 2 5  8 */
        p:nth-child(3n+2) {
            width: 600px;
        }
    </style>
</head>

<body>
    <p>是一个段落标签</p>
    <p>是一个段落标签</p>
    <p>是一个段落标签</p>
    <p>是一个段落标签</p>
    <p>是一个段落标签</p>
    <p>是一个段落标签</p>
    <p>是一个段落标签</p>
    <p>是一个段落标签</p>
</body>

</html>

8. 动态伪类选择器

<!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>
        /* 动态伪类选择器 未访问-link 访问过-visted 悬浮-hover 鼠标按下-active */
        /* 未访问a标签样式 */
        a:link {
            color: aqua;
        }

        a:visited {
            color: blueviolet;
        }

        a:hover {
            color: pink;
        }

        a:active {
            color: chartreuse;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">百度一下你就知道</a>
</body>

</html>

link

hover