前端学习 -- Css -- 文本样式

简介: text-transform可以用来设置文本的大小写   可选值:   none 默认值,该怎么显示就怎么显示,不做任何处理   capitalize 单词的首字母大写,通过空格来识别单词   uppercase 所有的字母都大写   lowercase 所有的字母都小写text-d...

text-transform可以用来设置文本的大小写

   可选值:

  1.    none 默认值,该怎么显示就怎么显示,不做任何处理
  2.    capitalize 单词的首字母大写,通过空格来识别单词
  3.    uppercase 所有的字母都大写
  4.    lowercase 所有的字母都小写

text-decoration可以用来设置文本的修饰

可选值:

  1. none:默认值,不添加任何修饰,正常显示
  2. underline 为文本添加下划线
  3. overline 为文本添加上划线
  4. line-through 为文本添加删除线

超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline,如果需要去除超链接的下划线则需要将该样式设置为none。

letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离,实际上就是设置词与词之间空格的大小

text-align用于设置文本的对齐方式

可选值:

  1. left 默认值,文本靠左对齐
  2. right , 文本靠右对齐
  3. center , 文本居中对齐
  4. justify , 两端对齐

- 通过调整文本之间的空格的大小,来达到一个两端对齐的目的

text-indent用来设置首行缩进

当给它指定一个正值时,会自动向右侧缩进指定的像素如果为它指定一个负值,则会向左移动指定的像素,通过这种方式可以将一些不想显示的文字隐藏起来,这个值一般都会使用em作为单位。

 举个例子:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /**
             * text-transform可以用来设置文本的大小写
             */
            
            .none {
                text-transform: none;
            }
            
            .capitalize {
                text-transform: capitalize;
            }
            
            .uppercase {
                text-transform: uppercase;
            }
            
            .lowercase {
                text-transform: lowercase;
            }
            /**
             * text-decoration可以用来设置文本的修饰
             */
            
            .underline {
                text-decoration: underline;
            }
            
            .overline {
                text-decoration: overline;
            }
            
            .linethrough {
                text-decoration: line-through;
            }
            /**
             * letter-spacing可以指定字符间距
             */
            
            .letterspacing {
                letter-spacing: 20px;
            }
            /**
             * word-spacing可以设置单词之间的距离,实际上就是设置词与词之间空格的大小
             */
            
            .wordspacing {
                word-spacing: 20px;
            }
            /*text-align用于设置文本的对齐方式*/
            .left{
                text-align: left;
            }
            .right{
                text-align: right;
            }
            .center{
                text-align: center;
            }
            .justify{
                text-align: justify;
            }
            .textindent{
                text-indent: 2em;
            }
        </style>
    </head>

    <body>
        <h3 class="none">Forgive me for needing you in my life;</h3>
        <h3 class="capitalize">Forgive me for enjoying the beauty of your body and soul;</h3>
        <h3 class="uppercase">Forgive me for wanting to be with you when I grow old</h3>
        <br />
        <h3 class="lowercase">If you were a teardrop;In my eye, </h3>

        <h3 class="underline">For fear of losing you,I would never cry </h3>
        <h3 class="overline">And if the golden sun,Should cease to shine its light, </h3>
        <h3 class="linethrough">Just one smile from you,Would make my whole world bright</h3>
        <br />

        <h3 class="letterspacing">Without you?I'd be a soul without a purpose. </h3>
        <h3 class="wordspacing">Without you?I'd be an emotion without a heart</h3>
        <br />
        
        <h3 class="left">I'm a face without expression,A heart with no beat. </h3>
        <h3 class="right">Without you by my side,I'm just a flame without the </h3>
        <h3 class="center">If I cried a tear of painful sorrow</h3>
        <h3 class="justify ">I lost all hope for a new tomorrow</h3>
        <br/>
        <p class="textindent">大道之行也,天下为公,选贤与能,讲信修睦。故人不独亲其亲,不独子其子,使老有所终,壮有所用,幼有所长,矜、寡、孤、独、废疾者皆有所养,男有分,女有归。货恶其弃于地也,不必藏于己;力恶其不出于身也,不必为己。是故谋闭而不兴,盗窃乱贼而不作,故外户而不闭,是谓大同</p>
    </body>

</html>

效果图:

 代码见:

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson11.html

相关文章
|
3月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
24天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
2月前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
19 0
CSS3几何透明层文本悬停变色源码
|
2月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
35 4
|
2月前
|
前端开发 JavaScript UED
|
3月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
317 1
|
2月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
2月前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。