css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距,direction改变文本从左至右的阅读顺序,white-space处理字符间空白text-transform实现文字大小写text-align改变文字排版对齐,至于我们常看到的产品介绍中的省略号“...”如何实现以及文字如何贴图对齐,尽在下面代码详情中一一介绍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css常用样式对文本的处理演练</title>
<style type="text/css">
div#box{
letter-spacing: 2px;/*字符间距*/
text-indent: 2em;/*首行缩进2字符*/
width: 300px;/*容器宽度*/
height: 200px;/*容器高度*/
color: #000;/*文本颜色*/
background-color:rgb(255,0,0);/*容器背景色*/
}
p{
word-spacing: 5px;/*文字间距*/
direction: rtl;/*文本方向*//*默认文本方向从左至右ltr,left to right*/
white-space:normal;/*处理空白符*/
/*通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的 XHTML 处理已经完成了空白符处理:
它会把所有空白符合并为一个空格。所以给定以下标记,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:*/
}
/*文本修饰*/
p.text{
text-decoration: underline;
text-decoration: overline;
text-decoration: none;
text-transform: uppercase;/*全部大写*/
text-transform: lowercase;/*全部小写*/
text-transform: capitalize;/*首字母大写*/
}
/*文本对齐方式*/
div{
text-align: left; /*文本居左*/
text-align: right; /*文本居左*/
text-align: center; /*文本居中*/
text-align: justify;/*两端对齐*/
}
/* 问题:我们通常看到的类似这样的http://www.mi.com/seckill 商品介绍中的省略号...如何实现? */
div#box{
width: 400px;
height: 50px;
white-space: nowrap;/*文本不换行*/
overflow: hidden;/*文本穿出隐藏*/
text-overflow: ellipsis;/*省略号*/
line-height: 50px;/*文本垂直对齐*/
}
/* 问题:当插入图片,如何让文本与图片顶对齐围绕 */
img{
width: 200px;
float: left;
vertical-align: bottom;/*文本垂直 middle top bottom */
}
div>p{
float: left;/*文本贴图对齐*/
}
</style>
</head>
<body>
<div id="box">撩人情话:1.我并非言辞夸张或虚情假意。我觉得,这个世界已经待我极好。从前我也不曾这么认为。直到,我在芸芸众生之中遇见你。遇见一道光,让我此生再无遗憾,再不畏惧。2.我是个固执的人,从不愿挪动原则半分,
可你来了之后,我的原则就成了你。3.喜欢一个人是藏不住的,即使嘴巴不说,也会从眼睛里跑出来。我喜欢你,认真且怂,从一而终。</div>
<p class="text">I'm a stubborn person. I never want to move half of the principles, but after you come, my principles become you.</p>
<div class="pic">
<img src="https://i-beta.cnblogs.com/assets/adminlogo.gif" alt="">我是个固执的人,从不愿挪动原则半分,可你来了之后,我的原则就成了你。
</div>
</body>
</html>
<!--后续-->
display:block; /*内联对象需加*/
word-break:keep-all; /*不换行*/
white-space:nowrap; /*不换行*/
overflow:hidden; /*内容超出宽度时隐藏超出部分的内容*/
text-overflow:ellipsis; /*溢出时显示省略标记...;需与overflow:hidden;一起使用*/
对于表格,定义有点不一样:
table{ width:30em; table-layout:fixed; /*只有定义了表格的布局算法为fixed,下面td的定义才能起作用*/ }
td{ width:100%; word-break:keep-all; /*不换行*/ }
white-space:nowrap; /*不换行*/ overflow:hidden; /*内容超出宽度时隐藏超出部分的内容*/ text-overflow:ellipsis; /*溢出时显示省略标记...;需与overflow:hidden;一起使用*/
css常用样式对文本的处理演练的更多相关文章
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- CSS常用样式(四)之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS常用样式整理
元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...
- CSS常用样式--font
CSS font 属性 参考:W3school- CSS font 所有浏览器都支持 font 属性,可在一个声明中设置所有字体属性,各属性需按顺序,语法如下: selector{ font:styl ...
- CSS常用样式(二)
一.边框样式 1.border:复合属性.设置对象边框的特性. 取值: border-width: 设置或检索对象边框宽度. border-style: 设置或检索对象边框样式. border-col ...
随机推荐
- ContractPattern 面向面向契约模式
- node js 爬啊爬 记录 向 Scott 致敬 不要问为什么
更优雅的异步编程: 定向爬取 :http://www.010xww.com/list/travel.htm 上代码: 打印一下http . 嗯 http 模块加载没问题 获取一个 文章列表: 终于把人 ...
- 软件发布!DOTA2统计学
更新日志: 1.2 增加DOTABUFF作为数据源,可以与DOTAMAX切换 1.1 增加关于对话框 增加版本信息 修复列表框头的错误 受到 http://tieba.baidu.com/p/38 ...
- 《高性能MySQL》之MySQL查询性能优化
为什么查询会慢? 响应时间过长.如果把查询看做是一个任务,那么它由一系列子任务组成,每个子任务都会消耗一定的时间.如果要优化查询,实际上优化其子任务,要么消除其中一些子任务,要么减少子任务的执行次数, ...
- GitHub Top 微信小程序——在家中憋了几天写点代码吧
GitHub Top 本项目为 GitHub 热点项目微信小程序客户端,首页仅推荐一个热点项目,这个项目往往是社会热门事件所催生的一个项目,如 996.ICU.wuhan2020,所推荐项目标准为:积 ...
- [ZJOI2007]报表统计(splay,堆)
[ZJOI2007]报表统计(luogu) Description 题目描述 Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一. ...
- python安装BeautifulSoup4
今天学习使用python爬虫,书上说让安装一个BeautifulSoup的插件,网上找了,说是下载压缩文件,直接解压然后,通过两行代码就实现了,我下载了两个,还是无法使用,后来就使用在在Pycharm ...
- vb.net datagridview 使用方法
目录: 1. 取得或者修改当前单元格的内容 2. 设定单元格只读 3. 不显示最下面的新行 4. 判断新增行 5. 行的用户删除操作的自定义 6. 行.列的隐藏和删除 7. 禁止列或者行 ...
- Codeforces 1197E Count The Rectangles(树状数组+扫描线)
题意: 给你n条平行于坐标轴的线,问你能组成多少个矩形,坐标绝对值均小于5000 保证线之间不会重合或者退化 思路: 从下到上扫描每一条纵坐标为y的水平的线,然后扫描所有竖直的线并标记与它相交的线,保 ...
- python如何删除二维或者三维数组/列表中某维的空元素
如题,个人在使用python进行数据预处理过程中出现的问题,抽象成删除三维列表中某维为空的问题. 一.首先来看一下三维数组/列表的结构 仔细看下图就会很清楚了: 轴0即是去除第一个外括号后第一层(我把 ...