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: ...
随机推荐
- Socket 多线程FTP软件开发
Socket具体还可见360云中文档记载 Socket是一个非常古老的协议了 1970年 Socket.AF_Unix======AF意思是 addressFamily 地址簇 Import os ...
- java笔记--适配器模式的运用
适配器模式的运用 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3884785.html "谢谢-- 主要应用: 可以在符合 ...
- LA 3401 - Colored Cubes
解题报告:有n(1<=n<=4)个立方体,每个立方体的每一个面涂有一种颜色,现在要将这些立方体的某些面的颜色重新涂一下,使得这n个立方体旋转到某一种状态下,对应的面的颜色都相同. 这题可以 ...
- linux下vim命令详解 转自: zhanglong0426
高级一些的编辑器,都会包含宏功能,vim当然不能缺少了,在vim中使用宏是非常方便的: :qx 开始记录宏,并将结果存入寄存器xq 退出记录模式@x 播放记录在x寄存器中的 ...
- JavaScript 使用 sort() 方法从数值上对数组进行排序
使用 sort() 方法从数值上对数组进行排序. <html> <body> <script type="text/javascript"> f ...
- Longest Common Subsequence & Substring & prefix
Given two strings, find the longest common subsequence (LCS). Your code should return the length of ...
- Java for LeetCode 031 Next Permutation
Next Permutation Total Accepted: 33595 Total Submissions: 134095 Implement next permutation, whi ...
- BestCoder10 1002 Revenge of GCD(hdu 5019) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5019 题目意思:给出 X 和 Y,求出 第 K 个 X 和 Y 的最大公约数. 例如8 16,它们的公 ...
- [SVN(Ubuntu)] SVN 查看历史详细信息
转载: http://lee2013.iteye.com/blog/1074457 以下内容,对ubuntu命令行查看代码变化非常有用. SVN 查看历史信息 通过svn命令可以根据时间或修订号去除过 ...
- 信与信封问题(codevs 1222)
题目描述 Description John先生晚上写了n封信,并相应地写了n个信封将信装好,准备寄出.但是,第二天John的儿子Small John将这n封信都拿出了信封.不幸的是,Small Joh ...