H5学习之17 CSS-text设置

最新推荐文章于 2023-04-13 14:49:05 发布

GOGOGOAAAA

最新推荐文章于 2023-04-13 14:49:05 发布

阅读量671

点赞数

分类专栏： h5 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_29469941/article/details/52097639

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="suojinwenben1">aa
    <div id="suojinwenben2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        <p>aaa</p></div>
</div>
<!--
缩进文本，是指第一行字向右或者向左 缩进一段距离，右正，左负
而且缩进文本的值会继承，子元素继承父元素。
其值可以是百分比。如果是百分比标识缩进父元素长度的百分比。
假设父元素没有长度，比如这个例子父元素不设置长度，还设置百分比则会缩进 整个界面长度的百分比。
-->
<hr/>

<div id="shuipingduiqi">
    aaa
</div>
<!--水平对齐方式，让文字显示在元素的什么位置-->
<hr/>
<div id="zijiange">
    一个空格代表的距离 一般老外是词语一个空格，所以是 word spacing<!--其实是一个空格代表的距离,可以为负-->
</div>

<hr/>
<div id="zimujiange">字与字之间的间隔</div>
<!--每一个字与每一个字之间的间隔，可以为负-->
<hr/>

<div id="daxiaoxiezhuanhuan">
    abcdefg123
</div>
<!--大小写转换，或者让每一个空格的第一个字母变成大写或者小写-->
<hr/>

<div id="wenbenzhuangshi">
    文本装饰
</div>
<!--可以在上中下划线-->
<hr/>

<div id="kongbaifu">
    改变浏览器对于空格和回车的显示
    设置这个属性的不同值可以更改空格和回车在浏览器中可以正常显示
       具体不再在这介绍，以后有需要可以看W3C上的介绍
    http://www.w3school.com.cn/css/css_text.asp
</div>
<hr/>

<div id="wenbenfangxiang">
    <p>文本方向</p>
    <p>文本方向</p>
</div>
<!--文本的书写方向-->
<hr/>

<div id="hangjianju">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<!--其实是更改每一行的高度，3种值-->

<hr/>

<a href="https://www.baidu.com/?tn=95505140_hao_pg" target="_blank">我们可以通过设置样式来改变a标签的样子</a>

<a href="https://www.baidu.com/?tn=95505140_hao_pg" id="lianjie">www.baidu.com</a>

</body>
</html>

a:link{
color: red;
    text-decoration:none;
    background-color: darkgrey;
}/* 未被访问的链接 */
a:visited{
    color: black;
    text-decoration:none;
    background-color: darkgrey;
}/* 已被访问的链接 */
a:hover{
    color: dimgray;
    text-decoration:underline;
    background-color: red;
}/* 鼠标指针移动到链接上 */
a:active{
    color: darkgreen;
    text-decoration:underline;
    background-color: blue;
}/* 正在被点击的链接 */

#lianjie:link,#lianjie:visited{
    display:block;
    font-weight:bold;
    font-size:14px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    background-color:#98bf21;
    width:200px;
    text-align:center;
    padding:4px;
    height: 1.5em;
    text-decoration:none;
}/*
其中需要着重说明的是display属性，大概也就是显示形式。
如果将其值设置成block，这个元素就成了块级元素。
设置成inline 是行内元素（内联元素）
none 可以设置成其不显示出来

div p 这种是默认的块级元素 值默认是bloack，可以通过设置display: inline 将其变成行内元素
a span 这种是默认的行内元素 值默认是inline，可以通过设置display:block 将其变成块级元素

更多具体的属性介绍
http://www.w3school.com.cn/cssref/pr_class_display.asp
*/


#lianjie:hover,#lianjie:active{
    background-color:#7A991A;
}


/*a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

可以随意改变a标签的样式，可以添加任何style里的东西。
4个值只是表明的4个状态
大小颜色背景都可以改变
*/




#suojinwenben1{
    background-color: chocolate;
    text-indent: 100px;
}
/*首行文本缩进，右或者左*/
#suojinwenben2{
    text-indent: 10%;
}

#shuipingduiqi{
    background-color: chocolate;
    width: 100px;
    text-align: center;
}
/*对齐方式*/

#zijiange{
    word-spacing: 100px;
}
/*其实说白了是每一个空格的长度*/

#zimujiange{
    letter-spacing: -10px;
}
/*这是每一个字的间隔*/

#daxiaoxiezhuanhuan{
 text-transform: uppercase;
}
/*能够转换英文字母的大小写*/

#wenbenzhuangshi{
    text-decoration: underline overline line-through blink;
}
/*修饰文字，上中下划线*/

#kongbaifu{
    white-space: pre;
}
/*设置不同的值来影响 空格，回车，和自动换行是否允许*/

#wenbenfangxiang{
    direction: rtl;
}
/*rtl右往左   ltr左往右也就是默认的*/

#hangjianju{
    line-height: 1000%;
}
/*
其实是更改每一行的高度，3种值，
百分比，
具体数字，
具体像素大小
如果每一行的高度小了，字自然就会印到一起了。每一个字出来的时候都是在行的最上端开始显示的。
*/

具体效果如下：

代码解释如下：

第一部分是缩进文本

<div id="suojinwenben1">aa
    <div id="suojinwenben2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        <p>aaa</p></div>
</div>
<!--
缩进文本，是指第一行字向右或者向左 缩进一段距离，右正，左负
而且缩进文本的值会继承，子元素继承父元素。
其值可以是百分比。如果是百分比标识缩进父元素长度的百分比。
假设父元素没有长度，比如这个例子父元素不设置长度，还设置百分比则会缩进 整个界面长度的百分比。
-->

#suojinwenben1{
    background-color: chocolate;
    text-indent: 100px;
}
/*首行文本缩进，右或者左*/
#suojinwenben2{
    text-indent: 10%;
}

效果是第一行文字向左或者右进行一个缩进

第二个是一个对齐方式的问题

<div id="shuipingduiqi">
    aaa
</div>
<!--水平对齐方式，让文字显示在元素的什么位置-->

#shuipingduiqi{
    background-color: chocolate;
    width: 100px;
    text-align: center;
}
/*对齐方式*/

第三个是空格代表多少距离

<div id="zijiange">
    一个空格代表的距离 一般老外是词语一个空格，所以是 word spacing<!--其实是一个空格代表的距离,可以为负-->
</div>

#zijiange{
    word-spacing: 100px;
}
/*其实说白了是每一个空格的长度*/

第四个是每一个字母或者字之间的间隔

<div id="zimujiange">字与字之间的间隔</div>
<!--每一个字与每一个字之间的间隔，可以为负-->

#zimujiange{
    letter-spacing: -10px;
}
/*这是每一个字的间隔*/

第五个是大小写转换

<div id="daxiaoxiezhuanhuan">
    abcdefg123
</div>
<!--大小写转换，或者让每一个空格的第一个字母变成大写或者小写-->

#daxiaoxiezhuanhuan{
 text-transform: uppercase;
}
/*能够转换英文字母的大小写*/

第六个是文本装饰

<div id="wenbenzhuangshi">
    文本装饰
</div>

#wenbenzhuangshi{
    text-decoration: underline overline line-through blink;
}
/*修饰文字，上中下划线*/

第七个是关于空白符的修改

<div id="kongbaifu">
    改变浏览器对于空格和回车的显示
    设置这个属性的不同值可以更改空格和回车在浏览器中可以正常显示
       具体不再在这介绍，以后有需要可以看W3C上的介绍
    http://www.w3school.com.cn/css/css_text.asp
</div>

#kongbaifu{
    white-space: pre;
}
/*设置不同的值来影响 空格，回车，和自动换行是否允许*/

第八个是关于文本的方向

#wenbenfangxiang{
    direction: rtl;
}
/*rtl右往左   ltr左往右也就是默认的*/

<div id="wenbenfangxiang">
    <p>文本方向</p>
    <p>文本方向</p>
</div>
<!--文本的书写方向-->

第九个是行间距

<div id="hangjianju">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<!--其实是更改每一行的高度，3种值-->

#hangjianju{
    line-height: 1000%;
}
/*
其实是更改每一行的高度，3种值，
百分比，
具体数字，
具体像素大小
如果每一行的高度小了，字自然就会印到一起了。每一个字出来的时候都是在行的最上端开始显示的。
*/

最下边是一个关于改变 a标签样式的例子

<a href="https://www.baidu.com/?tn=95505140_hao_pg" target="_blank">我们可以通过设置样式来改变a标签的样子</a>

<a href="https://www.baidu.com/?tn=95505140_hao_pg" id="lianjie">www.baidu.com</a>

a:link{
color: red;
    text-decoration:none;
    background-color: darkgrey;
}/* 未被访问的链接 */
a:visited{
    color: black;
    text-decoration:none;
    background-color: darkgrey;
}/* 已被访问的链接 */
a:hover{
    color: dimgray;
    text-decoration:underline;
    background-color: red;
}/* 鼠标指针移动到链接上 */
a:active{
    color: darkgreen;
    text-decoration:underline;
    background-color: blue;
}/* 正在被点击的链接 */

#lianjie:link,#lianjie:visited{
    display:block;
    font-weight:bold;
    font-size:14px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    background-color:#98bf21;
    width:200px;
    text-align:center;
    padding:4px;
    height: 1.5em;
    text-decoration:none;
}/*
其中需要着重说明的是display属性，大概也就是显示形式。
如果将其值设置成block，这个元素就成了块级元素。
设置成inline 是行内元素（内联元素）
none 可以设置成其不显示出来

div p 这种是默认的块级元素 值默认是bloack，可以通过设置display: inline 将其变成行内元素
a span 这种是默认的行内元素 值默认是inline，可以通过设置display:block 将其变成块级元素

更多具体的属性介绍
http://www.w3school.com.cn/cssref/pr_class_display.asp
*/


#lianjie:hover,#lianjie:active{
    background-color:#7A991A;
}


/*a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

可以随意改变a标签的样式，可以添加任何style里的东西。
4个值只是表明的4个状态
大小颜色背景都可以改变
*/

可以更改出很漂亮的样式

GOGOGOAAAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习之17 CSS-text设置

html>lang="en"> charset="UTF-8"> href="css.css" rel="stylesheet" type="text/css">id="suojinwenben1">aa id="suojinwenben2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa a
复制链接

扫一扫