H5学习之17 CSS-text设置
2016-08-02 20:29
253 查看
<!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个状态
大小颜色背景都可以改变
*/可以更改出很漂亮的样式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- H5学习之25 CSS 给图片增加框 透明度的设置
- H5学习笔记——CSS文本设置属性&颜色表示法
- [CSS学习网站地址]兼容IE6/IE7/FF的页面最小宽度设置
- 如何给 input 中 type="text" 设置css
- 一步步学习SPD2010--第十章节--SP网站品牌化（1）--设置CSS和颜色编码页面编辑器选项
- CSS学习笔记：溢出文本省略（text-overflow）
- cssText设置css样式
- CSS学习(17)--其它属性
- 【H5学习】浏览器对CSS属性的支持
- Android学习——TextView 设置中划线 下划线
- CSS学习（2）--font、text、link
- CSS学习笔记：溢出文本省略（text-overflow）
- CSS学习小札-常用属性总结之background&&text
- Android学习札记45：在TextView中设置超链接
- Android学习——TextView 设置中划线 下划线
- js中用cssText设置css样式
- JavaScript CSS 修改学习第四章 透明度设置
- android学习中关于Textview，Button，EditText,连接的设置，Intent,Activity不同状态等的一系列基础知识点
- imgs[0].style.cssText设置style值
- js中用cssText设置css样式