CSS-基础-自学笔记一

最新推荐文章于 2024-07-14 23:23:33 发布

@浩轩

最新推荐文章于 2024-07-14 23:23:33 发布

阅读量259

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/HAOXUAN_/article/details/106804303

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!--
        css 层叠样式表     网页化妆师

        1、如何在网页中引入css代码
            行内式 设置标签的style属性   用的不多，后台喜欢用
                一般少量的样式可以这样写，其他不推荐用，不专业
                <p style="color: brown; background-color: cadetblue;">一段文字</p>
            内嵌式
                在head标签内部放置
                    <style>
                        div {
                            width: 200px;
                            height: 200px;
                            background-color: chocolate;
                        }
                    </style>
                选择器
                    <style>
                        选择器 {
                            k: v;
                            k: v;
                            ...
                        }
                    </style>
                样式不多的情况下采用内嵌式
            外链式
                把css单独放在一个或多个文件
                文件名.css
                    li {
                        list-style: none;
                    }
                只需要在用到样式的网页中引入即可
                <link rel="stylesheet" href="index.css">
    -->
<!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="index.css">
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: chocolate;
        }
    </style>

    <style>
        /*通配符选择器  一般写在最上边
            *表示所有标签，优先级最低
            */
        
        * {
            background-color: cornflowerblue;
        }
        /*标签选择器    一般对一类标签设置样式*/
        
        h2 {
            color: rgb(226, 23, 23);
        }
        
        a {
            text-decoration: none;
            /*超链接去掉下划线*/
        }
        /*id选择器      用的不多    一般用在独一无二的元素上*/
        
        #box2 {
            background-color: cornflowerblue;
        }
        /*类选择器      用的最多*/
        
        .p1 {
            color: rgb(231, 18, 18);
        }
        /*
        并集选择器
        p div h3 字颜色为红色
        */
        
        p，h3,
        div {
            color: rgb(235, 12, 12);
        }
        /*
        交集选择器
        li.p1   既是li又class是p1
        */
        
        li.p1 {
            text-decoration: underline;
        }
        /*
        后代选择器
        */
        
        div .p1 {
            font-weight: 900;
        }
    </style>
</head>

<body>
    <p style="color: brown; background-color: cadetblue;">一段文字</p>
    <div>
        某一区域
    </div>
    <div>
        <ul>
            <li>hello</li>
            <li>welcome</li>
        </ul>
    </div>

    <h2>段落</h2>
    <h3 id="box2">段落</h3>

    <p class="p1">段落</p>
    <div>
        <ul>
            <li class="p1">北京</li>
        </ul>
    </div>
    <a href="" alt="大王">大王</a>
</body>

</html>

@浩轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-基础-自学笔记一

<!-- css 层叠样式表网页化妆师 1、如何在网页中引入css代码行内式设置标签的style属性用的不多，后台喜欢用一般少量的样式可以这样写，其他不推荐用，不专业 <p style="color: brown; background-color: cadetblue;">一段文字</p> 内嵌式在head标签内部放置
复制链接

扫一扫