HTML超文本标记语言学习2.--层叠样式表的使用

最新推荐文章于 2024-11-01 15:19:31 发布

披星戴月观日

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量324

点赞数

分类专栏： html学习初级网页制作 HTML 文章标签： html 前端开发

本文链接：https://blog.csdn.net/qq_41772997/article/details/79718690

版权

HTML 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

网页制作

3 篇文章 0 订阅

订阅专栏

html学习初级

1 篇文章 0 订阅

订阅专栏

2018.03.27
author：wills

上一篇文章中对HTML中常见的标签，进行了了解，但是仅仅只是了解哪些标签是不够的，我们如果需要对网页进一步进行更高级的渲染，就需要用到层叠样式表。下面是一些粗浅的层叠样式表的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*样式表，行内的 内嵌的，外部的*/
        /*border表示边界，solid表示颜色*/
        /* {border:1px solid blue;}*/
        /*rgb使用三原色，rgba的a表示透明度，0表示透明，1表示不透明*/
        /*设置字体时，给上备选项防止客户端没有相应字体*/

        @font-face{
            /*强行让客户端使用服务器的漂亮字体*/
            font-family: '字体名'
            src:url(字体文件的路径);
        }
        .fee{
            /* 类选择器*/
        }
        #f{
            /* id选择器 还有标签选择器什么都不加就用标签名*/
            /* 在优先级相同的时候就近原则，当id选择器与类选择器冲突时id优先级高此外还有！important表示最重要，优先级更高*/
        }
        *fkj{
            color: green !important
        }
        .foo {
            color:rgba(255,0,0,0.5);
            height: 200px;
            width:1000px;
            background-color: lightgray;
            }
        .bar{
        /*当字母和汉字在同一行时，一般设置两种字体选择*/
/*          font-family:Courier,宋体;
            font-size:300%;
            font-weight: bold;
            font-style: italic;*/
            /*写到一起必须注意顺序：斜体否-变体否-粗体否-大小/行高-字体*/
            font:italic small-caps bold 300%/200px Courier,黑体;
            /*line-height: 300px;*/

            /*10px表示10个像素的距离*/
            letter-spacing: 10px;/*字符空格*/
            word-spacing: 50px; /*单词间隔*/
            text-align: center; /*文本居中*/
            /*overflow:scroll;*/
            text-decoration: line-through;/*文本装饰，下划线，删除线*/

        }
        /*对p标签写一个样式first line表示第一行生效*/
        p:first-line{
            font-size: 36px;
            font-weight: bolder;
            /*text-transform: capitalize（首字母大写）;*/
            text-transform: uppercase（所有字母大写）;

        }
    </style> 
    //上面所有包含于<style></style>之中的内容都可以拿出来单独放到一个文本文件中器后缀名为.css然后使用link来进行链接调用。
    <link rel="stylesheet" type="text/css" href="css/styl.css">

</head>
<body>
    <p >niha1 adhfjs kha sj kbr!<br>
        slkd jgs lj lalk ajlfal<br>
        lsdjl sjdgls ajg dlsjal

    </p>
    <h1 class="foo bar">Hello world 时间是永恒的!</h1><br>
    I will become a great programmer<br>

    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">百度</a>

    <a href="http://www.baidu.com">百度</a>
    <img src="1.jpg" alt="美女" width="400">
    <img src="1.jpg" alt="美女" width="300">
    <img src="1.jpg" alt="美女" width="200">

    <h1 style="color:cyan">美女漂亮吧，想不想嫖啊，只要998额</h1>

</body>
</html>