【代码笔记】Web-CSS-CSS Text（文本）

tain335 发布于2019-04-23 11:53 / 2783人阅读

摘要：文本加上上划线全变成大写文本的第一行缩进加上下划线全变成小写加上下划线首字母大写去掉链接的下划线参考资料菜鸟教程

一，效果图。

二，代码。

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Test(文本)title>
    <style>
    body {
        color: red
    }
    
    h1 {
        color: #00ff00;
        text-align: center;
        /*加上上划线*/
        text-decoration: overline;
        /*全变成大写*/
        text-transform: uppercase;
        /*文本的第一行缩进*/
        text-indent: 50px;
    }
    
    p.ex {
        color: rgb(0, 0, 255);
        text-align: right;
        /*加上下划线*/
        text-decoration: line-through;
        /*全变成小写*/
        text-transform: lowercase;
    }
    
    {
        text-align: justify;
        /*加上下划线*/
        text-decoration: underline;
        /*首字母大写*/
        text-transform: capitalize;
    }
    
    a {
        /*去掉链接的下划线*/
        text-decoration: none;
    }
    style>
head>

<body>
    <h1>This is heading h1>
    <p>This is an ordinary paragraph.p>
    <p class="ex">This is a praagraph with clss="ex".p>
    <p>Link to:<a href="http://www.w3cshool.cc">w3cshool.cca>p>
body>

html>

参考资料:《菜鸟教程》

云服务器 GPU云服务器 text文本 text文本框js php 代码审计笔记 html写文本代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1315.html

【代码笔记】Web-CSS-CSS Float(浮动)

一，效果图。 This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. T...

shery 2019-04-23 11:50 评论0 收藏0
【代码笔记】Web-CSS-CSS Positioning

摘要：因为图像元素设置了属性值为所以它会显示在文字之后。参考资料菜鸟教程一，效果图。二，代码。 DOCTYPE html> CSS Positioning p.pos_fixed { position: fixed; top: 30px; right: 5px; } ...

番茄西红柿 2019-04-23 11:51 评论0 收藏0
【代码笔记】Web-CSS-CSS background背景

摘要：实例改文本插入在元素中该段落有自己的背景颜色背景图片不重复，设置实例背景图片只显示一次，并与文本分开实例中还添加了属性用于让图片与文本间隔开参考资料菜鸟教程一，效果图。二，代码。 DOCTYPE html> CSS backgrounds h1 { background-color: #6495ed; } ...

番茄西红柿 2019-04-23 11:54 评论0 收藏0
【代码笔记】Web-CSS-CSS 链接(link)

一，效果图。二，代码。 DOCTYPE html> CSS 链接(link) a:link { color: #ff0000; text-decoration: none; background-color: #b2ff99; } a:visited { co...

tracy 2019-04-23 11:53 评论0 收藏0
【代码笔记】Web-CSS-CSS id和Class选择器

一，效果图。二，代码。 DOCTYPE html> CSS id和class选择器 #para1 { text-align: center; color: red; } .center { text-align: center; } p.center...

Pluser 2019-04-23 11:54 评论0 收藏0