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: ...
随机推荐
- xcode SVN
Mac上SVN的管理工具: CornerStone http://blog.csdn.net/wohaoxuexi/article/details/8444184 步骤: 1. import 项目到s ...
- DrawText
该函数在指定的矩形里写入格式化的正文,根据指定的方法对正文格式化(扩展的制表符,字符对齐.折行等). int DrawText(HDC hDC, // 设备描述表句柄 LPCTSTR lpStri ...
- python4delphi 安装
环境搭建: 目前p4d已经可以支持到XE7,可惜googlecode即将关闭,不知道作者是否会在github上继续更新. 因为此开源项目历史较久远,拿到源代码后可能还需要手动修改相关的文件引用,毕竟需 ...
- 自动化运维之puppet的学习(如何找到你需要的模块)
https://forge.puppetlabs.com/ puppet 模块下载 http://kisspuppet.com/2014/01/14/puppet_forge_modules/ pu ...
- centos安装ssdb
在编译之前要下gcc编译器 yum -y install gcc* 编译和安装 wget --no-check-certificate https://github.com/ideawu/ssdb ...
- linux下用mii-tool和ethtool 查看网线是否正确连接到网卡
输入mii-tool可以查看网线是否连接到网卡#mii-tool eth0: negotiated 100baseTx-FD, link ok 有时驱动可能不支持会出错下列错误#mii-tool SI ...
- 【Hibernate】Hibernate系列4之配置文件详解
映射文件详解 4.1.概述 4.2.主键生成策略 4.3.属性配置 准确映射: 4.4.映射组成关系 4.5.单向多对一映射 4.6.双向多对一关系 4.7.一对一关联关系-基于外键映射 一对一联合m ...
- 【SpringMVC】SpringMVC系列13之关于 mvc:annotation-driven
13.关于 mvc:annotation-driven 13.1.概述 会自动注册RequestMappingHandlerMapping.RequestMappingHandlerAdap ...
- 15.含有指针成员的类的拷贝[ClassCopyConstructorWithPointerMember]
[题目] 下面是一个数组类的声明与实现.请分析这个类有什么问题,并针对存在的问题提出几种解决方案. C++ Code 123456789101112131415161718192021222324 ...
- Solr5.3.1 SolrJ查询索引结果
通过SolrJ获取Solr检索结果 1.通过SolrParams的方式提交查询参数 SolrClient solr = new HttpSolrClient("http://localhos ...