样式表与选择器

最新推荐文章于 2024-09-09 22:16:15 发布

惊蛰skk

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量166

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/qq_41154692/article/details/118736584

版权

样式表

样式表分为三种分别是：行内样式表；内部样式表；外部样式表；
其中样式表优先级为：行内样式表>内部样式表外部样式表
内部样式表和外部样式表后被读取的优先级最高
（读取从高到低，从左到右）

选择器

css语法组成 css选择器{属性:属性值}

css选择器: 标签选择器、id选择器、class选择器、包含选择器、群组选择器、通配符
1.标签选择器
    - html标签作为选择器出现 div、p、a...
2.id选择器
    - 在标签里面添加一个id属性 属性值取名规范和站点取名规范一样
    - 在样式表中使用 #属性值名字{声明}
    - 作用:通常在一块区域中只使用一次 表示网页的外围结构
3.class选择器(类选择器)
    - 在标签里面添加一个class属性
    - 在样式表中 .class属性值名字
    - 作用: 通常选择到的一类相同的对象修饰
    -  4.包含选择器 
    - 语法:父级选择器 子级选择器{}
    - 作用:通过父级选择子级

5.群组选择器hang
    - 语法: 选择器1,选择器2,选择器3...{相同的声明}
    - 选择到相同的声明的选择器

6.通配符
    - 固定用法 *{margin:0;padding:0} 清除浏览器的默认间距
    - * 表示选中页面中的全部的标签
    - 建议放在样式表中的最上方
7.动态伪类选择器
    - a:link{color: red}       /*未访问的链接状态*/
    -  a:hover{color: purple}  /*鼠标移入链接状态*/
    -   a:active{color: pink}  /*鼠标按下去时链接状态*/
    - a:visited{color: orange} /*已访问过的链接状态*/
伪类hover的使用：hover不可以给父集改变状态；可以给自身改变状态；可以通过父级改变子级；
               可改变同级元素

–>

<style type="text/css">
        /* 内部样式表 */

        * {
            margin: 0;
            padding: 0
        }

        /* 通配符 */

        div {
            color: red;
            /* 标签选择器 */
        }

        #a1 {
            font-size: 20px;
            /* id选择器 */
        }

        .a1 {
            color: blue;
            /* class选择器(类选择器) */
        }

        .a1,
        #a1,
        div {
            color: beige;
            /* 群组选择器 */
        }
        a:link{color: red} /*未访问的链接状态*/
        a:hover{color: purple}  /*鼠标移入链接状态*/
        div:hover li{color: mediumaquamarine}
        a:active{color: pink}  /*鼠标按下去时链接状态*/
        a:visited{color: orange} /*以访问过的链接状态*/
    </style>
    <link rel="stylesheet" href="css/01-css.css">
    <!-- 外联样式表 -->
</head>

<body>
    <div class="a1">
        <li>
            <ol style="color: red"> 列表一 </ol>
            <!--行内样式表-->
            <ol> 列表二</ol>
            <ol> 列表三</ol>
        </li>
    </div>
    <p id="a1">篮球</p>
    <a href="http://www.baidu.com"></a>