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: ...
随机推荐
- 在特定的action里使用validates
http://guides.rubyonrails.org/v3.0.8/active_record_validations_callbacks.html#on 在特定的action里使用valida ...
- Longest Substring with At Most K Distinct Characters
Given a string, find the longest substring that contains only two unique characters. For example, gi ...
- Bulls and Cows
You are playing the following Bulls and Cows game with your friend: You write down a number and ask ...
- mysql中int、bigint、smallint 和 tinyint的区别与长度的含义
最近使用mysql数据库的时候遇到了多种数字的类型,主要有int,bigint,smallint和tinyint.其中比较迷惑的是int和smallint的差别.今天就在网上仔细找了找,找到如下内容, ...
- cas单点注销失败Error Sending message to url endpoint
最近在做cas单点登录时,由于是单点登录.必然会涉及到单点注销,然而在做单点注销时由于对cas注销机制不了解加之测试条件所致,所有测试都是在本机下完成(机器性能较低,没用虚拟机):导致折腾了很久.网上 ...
- HTML5-------元素使用
HTML5的元素使用
- Instruments_Activity Monitor使用入门
Activity Monitor,官方解释为:(活动监视器)即实时显示CPU.内存和网络的使用情况,记录由虚拟内存大小测量的系统负载.用一句大白话来说,Activity Monitor类似Window ...
- 面向服务的体系结构(SOA)——(5)关于MEP(Message Exchange Patterns)
SOA中的MEP和JavaEE中的JMS类似,当然了就应该是类似的,因为都是关于消息方面的.一个是对系统架构当中消息的解决思路,一个是针对Java平台中的消息的具体解决办法(严格说不是具体的,只是提供 ...
- Start GitHub
google 的各种被墙大家都懂的,所以转向GitHub 的怀抱. 以前其实也关注过,这回是下决心好好试用了. Fork repositories Forking creates a new, uni ...
- [译]SQL Server 之 索引基础
SQL Server中,索引以B-tree的结构组织数据.B-tree代表平衡树,但是SQL Server使用一种叫做B+的树. B+树不是总是保持严格的平衡的树. 首先,索引有两个主要的部件:一个页 ...