CSS基础知识5

最新推荐文章于 2024-05-21 21:13:29 发布

中小庸

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量60

点赞数

分类专栏： Web 文章标签： css html web

本文链接：https://blog.csdn.net/qq_49556725/article/details/118654128

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

样式选择器

head中style组织样式
超链颜色变换

<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本，这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架，将html文件括起来-->

<head>
    <meta charset="utf-8">
    <style>
        # 元素选择器 td {
            border: 1px solid blue
        }
        
        th {
            border: 1px solid blue
        }
        # 统一说明th的样式。这里也能分组，让th和td在一起，共用一个样式 


        # 前面加上"*"表示，任何东西的imporant是红色的 
        # 这里important是一个类 
        *.important {
                color: red
            }

        *[title] { color:red } # 包含title的都为红色(样式)

        p em { background-color: green; } # 在p里面的em遵循该样式

        div > em {background-color: yellow;} # 紧跟着div的下一个em起作用，不是紧跟着的，不起作用

        h1 + p {background-color: gray;} # 相邻着h1的那个p使用该样式

        a:visited {color: #FF0000;} # 使用伪类，调整链接的颜色
        a:link {color: blue;}
        # a:hover
        # a:active
    </style>
</head>

<body>

    <table>
        <!--border : 画边框 粗细 样式 颜色-->
        <!--border-collapse : collapse调整边框重叠，加上之后两个边框重叠只会显示一个
                        seperable 两个框线是分开的-->
        <tr>
            <th>
                王勃
            </th>
            <!--table-layout : auto自动计算列宽 fixed列宽由第一行的列宽决定-->
            <!--text-align : 文本的对齐方式 right left center -->
            <!--vertical-algin : 垂直方向上文字的对齐方式-->
            <!--padding : 文字和框之间的间隔-->
            <!--caption-side : 指定caption在表的上面还是下面-->
            <th>李白</th>
            <th>杜甫</th>
            <th>苏轼</th>
        </tr>

        <tr>
            <th>子安</th>
            <th>太白</th>
            <th>子美</th>
            <th>子瞻</th>

        </tr>
        <caption>成绩</caption>
    </table>


    <p class="important">
        红色段落

        <em>检验一下</em>
        后面的内容
    </p>


    <h1>
        h1段
    </h1>

    <p>紧邻着h1的p</p>


    <a href="http://news.163.com">网易新闻</a>
</body>

</html>

显示效果：
在这里插入图片描述

中小庸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础知识5

样式选择器head中style组织样式超链颜色变换<!DOCTYPE html><html><head> <meta charset="utf-8"> <style>
复制链接

扫一扫