HTML+CSS基础入门-第十四天（CSS-文本属性）

最新推荐文章于 2024-05-23 16:52:46 发布
最新推荐文章于 2024-05-23 16:52:46 发布
阅读量281 收藏
点赞数
分类专栏： html+css 文章标签： html css 文本属性 text-trans direction
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27261927/article/details/67634176
版权

text-align横向排列

属性值

  • left：水平居左
  • center：水平居中
  • right：水平居右
  • 列表内容

代码

<!doctype html>
<body>
    <head>
        <title>文本属性</title>
        <meta charset="utf">

        <style type="text/css">
            div{
            width:900px;
            height:500px;
            background:red;
            }

            .p1{
            text-align:left;
            }
            .p2{
            text-align:center;
            }
            .p3{
            text-align:right;
            }

        </style>

    </head>
    <body>
        <div>
            <p class="p1">好好学习天天向上 left</p>
            <p class="p2">好好学习天天向上 center</p>
            <p class="p3">好好学习天天向上 right</p>
        </div>
    </body>

</body>

显示结果

14-1

line-height文本行高

属性值

  • %基于字体大小的百分比行高
  • 数值来设置固定值

代码

<!doctype html>
<body>
    <head>
        <title>文本属性</title>
        <meta charset="utf">

        <style type="text/css">
            div{
            width:400px;
            height:500px;
            background:red;
            }

            .p1{
                font-size:20px;
                line-height:50%;
            }
            .p2{
                font-size:20px;
                line-height:200%;
            }
            .p3{
                font-size:20px;
                line-height:40px;
            }

        </style>

    </head>
    <body>
        <div>
            <p class="p1">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
            <p class="p2">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
            <p class="p3">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
        </div>
    </body>

</body>

显示结果

14-2

text-indent首行缩进

属性值

  • %父元素的百分比
  • px固定值，默认是0

代码

<!doctype html>
<body>
    <head>
        <title>文本属性</title>
        <meta charset="utf">

        <style type="text/css">
            div{
            width:400px;
            height:500px;
            background:red;
            }
            p{
                font-size:20px;

            }
            .p1{

                line-height:100%;

            }
            .p2{

                line-height:200%;
                text-indent:50%
            }
            .p3{

                line-height:40px;
                text-indent:40px;
            }

        </style>

    </head>
    <body>
        <div>
            <p class="p1">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
            <p class="p2">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
            <p class="p3">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
        </div>
    </body>

</body>

显示结果

14-3

letter-spacing字符间距

属性值

  • normal
  • lenght设置具体的值，可以是负值
  • inherit继承

代码

<!doctype html>
<body>
    <head>
        <title>文本属性</title>
        <meta charset="utf">

        <style type="text/css">
            div{
            width:400px;
            height:500px;
            background:red;
            }
            p{
                font-size:20px;

            }
            .p1{


                letter-spacing:normal;
            }
            .p2{


                letter-spacing:20px
            }
            .p3{

                letter-spacing:-20px;
            }

        </style>

    </head>
    <body>
        <div>
            <p class="p1">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
            <p class="p2">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
            <p class="p3">好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p><hr/>
        </div>
    </body>

</body>

显示结果

14-4

word-spacing单词间距

属性值

  • px：固定值
  • inherit：继承

代码

<!doctype html>
<body>
    <head>
        <title>文本属性</title>
        <meta charset="utf">

        <style type="text/css">
            div{
            width:400px;
            height:500px;
            background:red;
            }
            p{
                font-size:20px;

            }
            .p1{
                    word-spacing:20px;

                }
            .p2{


                word-spacing:40px;
            }
            .p3{

                word-spacing:60px;
            }

        </style>

    </head>
    <body>
        <div>
            <p class="p1">I am bree good good study day day up</p><hr/>
            <p class="p2">I am bree good good study day day up</p><hr/>
            <p class="p3">I am bree good good study day day up</p><hr/>
        </div>
    </body>

</body>

显示结果

14-5

direction文本方向

属性值

  • ltr：从左到右
  • rtl：从右到左
  • inherit：继承

代码

<!doctype html>
<body>
    <head>
        <title>文本属性</title>
        <meta charset="utf">

        <style type="text/css">
            div{
            width:800px;
            height:500px;
            background:red;
            }
            p{
                font-size:20px;

            }
            .p1{


                }
            .p2{

                direction:rtl;

            }
            .p3{

                direction:ltr;
            }

        </style>

    </head>
    <body>
        <div>
            <p class="p1">I am bree good good study day day up</p><hr/>
            <p class="p2">I am bree good good study day day up</p><hr/>
            <p class="p3">I am bree good good study day day up</p><hr/>
        </div>
    </body>

</body>

显示结果

14-6

text-transform文本大小写

属性

  • none：默认
  • capitalize：每个单词以大写字母开头
  • uppercase：定义只有大写字母
  • lowercase：仅有小写字母
  • inherit：规定应该从父元素继承text-transform属性的值

代码

<!doctype html>
<body>
    <head>
        <title>文本属性</title>
        <meta charset="utf">

        <style type="text/css">
            div{
            width:800px;
            height:500px;
            background:red;
            }
            p{
                font-size:20px;

            }
            .p1{
                    text-transform:capitalize;

                }
            .p2{

                text-transform:uppercase;

            }
            .p3{

                text-transform:lowercase;
            }

        </style>

    </head>
    <body>
        <div>
            <p class="p1">I am bree good good study day day up  text-transform:capitalize</p><hr/>
            <p class="p2">I am bree good good study day day up  text-transform:uppercase;</p><hr/>
            <p class="p3">I am bree good good study day day up  text-transform:uppercase;</p><hr/>
        </div>
    </body>

</body>

显示结果

14-7

bree working
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css基础入门学习教程之CSS文字 - font-family 属性
html前端基础入门教程
03-02 1661
CSS文字 - font 属性 CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。 font 简写属性 在一个声明中设置所有字体属性。 这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。 可以按顺序设置如下属性...
视频教程-HTML+CSS+JavaScript基础-HTML5/CSS
weixin_31757365的博客
05-28 1220
HTML+CSS+JavaScript基础 本系列课程由多位老师共同录制而成...
HTML+CSS基础入门-第十一天（CSS-颜色属性）
bree的博客
03-27 438
说明color属性定义文本的颜色格式 color：green color：#ff6600 简写式：color：#f60 color：rgb（255,255,255）：红（R）绿（G）蓝（B）每个取值的范围是0-255 color：rgba（255,255,255,1）：rgba代表的是红（R）绿（G）蓝（B）和Alpha的透明度 代码<!doctype html> <html> <head>
零基础HTML+CSS到入门
weixin_51356295的博客
07-10 2004
付款方式支付宝微信银行卡
HTML5+CSS3+JavaScript从入门到精通【文末送书】
最新发布
一键难忘的博客
05-23 7394
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
HTML+ CSS+JavaScript实战 ----仿慕课网【简单易上手】
a23452的博客
12-07 3969
Java学习打卡：第89天 javaWeb 内容导航Web项目[仿慕课网项目]界面展示界面布局HTML代码部分展示CSS代码部分展示JS代码部分展示HTML补充URL,HTTP,HTML介绍特殊的注释【条件注释】HTML头部元素CSS和HTML属性的区别div嵌套展示< ol>标签的type通过CSS设置列表符号制作导航栏使用div和span布局表单HTML5audio音频video视频新的按钮input Java养成计划（打卡第85天) Web 项目 HTML+CSS + JavaScri
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
chen_nnn的博客
02-17 1360
笔者在哔哩哔哩弹幕网学习前端器件内所做的学习笔记，分享出来供大家参考。
【前端】Html+Css+JavaScript基础知识点
lcukyNwa的博客
07-18 6338
Html+Css+JavaScript基础知识点
HTML+CSS基础篇4----CSS（入门）超级常用样式
Allenyhy的博客
07-20 377
1.什么是CSS？       CSS是（Cascading Style Sheets）层叠样式表的英文缩写。主要作用就是为了给HTML增添样式，也就是让HTML页面更炫酷。下面拆分来分析一下层叠样式表的含义。       很明显，关键词是样式表，层叠是作为形容词修饰样式表的，所以我在这里先解释样式表，再解释层叠。      样式表：用于修饰HTML网页，表在这里可以理解为针对于HTML页面...
Html+Css+Javascript从入门到精通.pdf
09-27
**第十四章：颜色与背景** - **颜色设置**：为元素设置前景色和背景色。 - **背景图片**：使用图片作为背景。 **第十五章：元素定位** - **绝对定位与相对定位**：精确控制元素位置。 - **可视性控制**：隐藏或...
CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
10-30
本教程是CSS网页布局系列教程的第14部分，主要介绍如何使用CSS来创建纵向下拉及多级弹出式菜单。通过本教程的学习，读者将能够掌握制作复杂的纵向导航栏的方法，包括如何利用CSS属性实现菜单项的隐藏与显示、调整...
4.《HTML5+CSS3从入门到精通》自测练习(修正版).pdf
11-28
HTML5和CSS3是现代网页开发的基石，它们极大...学习和理解这些HTML5和CSS3的基本概念和用法，是成为熟练的前端开发人员的基础。通过实践和自测练习，可以更好地掌握这些技术，从而构建高效、美观、易于维护的现代网页。
HTML+CSS基础入门-第十二天（CSS-字体属性）
bree的博客
03-27 1094
font-size字体大小设置一个固定的值（px）父元素的百分比（%）代码<!doctype html> <html> <head> <title>字体属性</title> <meta charset="utf-8"> <style type="text/css"> #div1{ font-siz
HTML+CSS基础入门-第一天（HTML-HTML语法）
bree的博客
03-15 746
本博客为线上学习某课程笔记，供参考，供学习 什么是HTML标记语言？表示网页信息的符号标记语言。开发工具自带笔记本 等编辑器 我这里用：NotePad++HTML语言特点。 可以设置文本的格式，比如标题，字号，文本颜色，段落等等。 可以创建列表 可以插入图像和媒体 可以建立表格 超链接，可以使用鼠标点击超链接来实现页面之间的跳转 HTML的标记和他的属性 HTML文档的保存格式： .html
HTML+CSS基础入门-第十三天（CSS-背景属性）
bree的博客
03-27 638
background-color代码background-image background-image：url(图片路径) background-image：none background-repeat repeat：重复平铺满 repeat-x：向x轴重复 repeat-y：向y轴重复 no-repeat：不重复 background-posion横向（left，center，rught） 纵向
HTML+CSS基础入门-第四天（HTML-图片标记）
bree的博客
03-20 596
<img>图像标记使用方法<img src=”路径/文件名.图片格式” width=”属性值” height=”属性值” border=”属性值” alt=”属性值”>注意 <img>为但标记，不需要使用</img>闭合 在加载图像文件的时候，文件的路径或者文件名格式错误，将无法加载文件。 <img>标记的属性src属性指定我们要架子的图片的路径和图片的名称以及图片的格式。代码1：图片位置与.ht
精通HTML+CSS：从基础到实战
【第十课】CSS Hack则是针对不同浏览器兼容性问题的解决方案。 技巧篇则分享了一些专业开发者常用的小技巧，如【技巧一】的CSSSprites技术，用于优化网页加载速度，减少HTTP请求。【技巧二】展示了如何实现首行文字...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值