css构造文本
1.
1. 文本缩进
text-indent:值;
值为数字,最常用的数值单位是px(像素),也可以直接是百分比!
text-indent:100px;
text-indent:10%;
2. 文本对齐
text-align:对其方式;
可以的值为:left、center、right
3. 文本行高
line-height:值;
line-height:23px;
line-height:120%;
默认:normal
4. 字间隔(单词)
word-spacing:10px;
默认值:normal
5. 字母间隔
letter-spacing:5px;
默认值:normal
6. 文字下划线
text-decoration:none;
值:underline 或者none 等,常用值就这两个
7. 字体
font-family:微软雅黑;
多个字体用逗号隔开
font-family:"Times New Roman",Georgia,Serif;
font-family:字体1,字体2;
8. 字体风格
font-style:值;
normal
italic
oblique
9. 字体大小
font-size:数值;
数值单位为px
10. 文本颜色
color:颜色值;
颜色值可以为一些简单的英语单词
color:red;
实际工作中用的比较多的是颜色代码
color:#111111;
11. 文本加粗
font-weight:值;
常用值:
normal
bold
12. 关于样式继承
样式的继承问题!
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css构造文本</title>
<style type="text/css">
p{
text-align:center;/*文本对齐*/
line-height:50px;/*文本行高*/
word-spacing:40px;/*英文单词的间隔*/
letter-spacing:10px;/*英文字母或汉字的间隔*/
text-decoration:underline;/*文字下划线*/
}
</style>
</head>
<body>
<h1>行高</h1>
<p>hello world
english我是一个我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段段落</p>
</body>
</html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css构造文本</title>
<style type="text/css">
p{
text-indent:50px;/*文本缩进*/
text-align:center;/*文本对齐*/
line-height:50px;/*文本行高*/
word-spacing:40px;/*英文单词的间隔*/
letter-spacing:10px;/*英文字母或汉字的间隔*/
text-decoration:underline;/*文字下划线*/
font-family:微软雅黑;/*字体*/
font-style:italic;/*斜体*/
font-size:30px/*字体大小*/;
color:red;/*字体颜色*/
font-weight:bold;/*字体加粗*/
}
a{text-decoration:none;
}
a:hover
{text-decoration:underline;
}/*鼠标放上去有下划线*/
body{
color:green;}/*继承*/
div p{
color:yellow;}
#div1 p {
font-style:italic;}
</style>
</head>
<body>
<h1>行高</h1>
<p>hello world
english我是一个我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段段落</p>
<a href="http://www.baidu.com">百度</a>
<div>
<p>还上课大会上的聚会的军事登记九点上课</p>
</div>
<div id="div1">
<p>还上ewehJjjjjjjjjjjjjjjj急急急急急急急急急课大会上的聚会的军事登记九点上课</p>
</div>
</body>
</html>
css构造文本的更多相关文章
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- css构造块级元素
css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- 关于用css实现文本和图片垂直水平居中
关于用css实现文本和图片垂直水平居中 一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...
- css常用文本属性
[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...
- 24, CSS 构造超链接
1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- 23 , CSS 构造列表与导航
1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...
随机推荐
- Linux中常用的查看系统信息的命令
导读 Linux是一个神奇而又高效的操作系统,学完Linux对Linux系统有一个熟悉的了解后,你需要了解下这些实用的查看系统信息的命令. 查看系统版本命令 uname 谈到系统版本就一定会想到una ...
- python的类变量与实例变量
python的类内部定义的变量 ,形式上没有区分实例变量和类变量(java的静态变量),测试结果如下:
- 《linux备份与恢复之一》.tar.bz2与.tar.gz格式的文本压缩率比较
对于文本压缩,据说bzip的算法要优于gzip,从而拥有更好的压缩比.特地找了两个文件来做一下测试,以下为测试结果: (1)源文件为591MB, .tar.bz2文件为61MB(10.32%), ...
- 【转】SQL中内连接和外连接
如表 ------------------------------------------------- table1 | table2 | ----------------- ...
- 22.整数二进制表示中1的个数[Get1BitCount]
[题目] 输入一个整数,求该整数的二进制表达中有多少个1.例如输入10,由于其二进制表示为1010,有两个1,因此输出2. [分析] 如果一个整数不为0,那么这个整数至少有一位是1.如果我们把这个整数 ...
- scrapy爬虫成长日记之将抓取内容写入mysql数据库
前面小试了一下scrapy抓取博客园的博客(您可在此查看scrapy爬虫成长日记之创建工程-抽取数据-保存为json格式的数据),但是前面抓取的数据时保存为json格式的文本文件中的.这很显然不满足我 ...
- iOS 网络请求中的challenge
这里有一篇文章,请阅读,感谢作者!http://blog.csdn.net/kmyhy/article/details/7733619 当请求的网站有安全认证问题时,都需要通过 [[challenge ...
- cmd的rd命令简单解析
我们知道在Windows下cmd命令行中"rd 文件夹名称"可以删除空目录,"del 文件名"可以删除文件,那么怎么删除一个非空文件夹呢,命令如下: 比如删除文 ...
- 【JAVA、C++】LeetCode 017 Letter Combinations of a Phone Number
Given a digit string, return all possible letter combinations that the number could represent. A map ...
- Eclipse调试:F5、F6、F7、F8
F5:跳入方法 F6:向下逐行调试 F7:跳出方法 F8:直接跳转到下一个断点 转载自:http://blog.sina.com.cn/s/blog_6271df6f0101d856.html