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

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>

以上只是一些粗浅应用,如要更近一步的了解学习,推荐runoob进行系统全面的学习,所有层次样式表的用法都有,并且可以马上呈现出来。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值