css-文本及其他
<!DOCTYPE html>
css7-文本和其他
text-align
行内元素对齐方式,值为 左/中/右 对齐:left/right/center
.test{text-align:center;}
white-space
超出不换行
normal: 默认处理方式。
nowrap: 强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
.test{white-space:nowrap;}
注意测试代码有时候写一大串不间隔的英文字母后不会自动换行,原因是英文网页排版默认一个单词不换行。
overflow
超出隐藏
visible:默认,不剪切内容
hidden:超出对象尺寸内容裁剪
.test{overflow:hidden;}
white-space和overflow结合,可以做一行文本超出隐藏,例如新闻列表的标题
.test{width:200px; line-height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}/*text-overflow属性是超出截断后显示...符号*/
text-indent
文本缩进,像素或em,每行开头缩进
p{text-indent:2em;}/*每段首行缩进2字符,很少用*/
letter-spacing
字符间距
p{letter-spacing:2em;}
letter-spacing和line-height结合,可以把页面字符重叠至一个字。
vertical-align
行内元素在行内的垂直对齐方式
baseline 默认,基线对齐
px或百分比数字,基线算起的偏移量,可为负值
.test{vertical-align:10px;} /*文本向上偏移10px*/
本属性一般用于微调行内元素的上下距离,如果是做上标、下标,建议使用HTML标签<sub>、<sup>
<style>
span{
vertical-align:2px;
font-size:6px;
}
</style>
<div>
E = MC<sup>2</sup>;
</div>
<hr>
CSS属性-其他
/*注释*/
/*这是注释*/
/*
里面的所有代码和内容被注释掉,注意注释不能嵌套
*/
cursor
鼠标放上变化图标
.test{cursor:pointer;}/*鼠标放上手型*/
list-style
修改列表标签样式
.test{list-style:none;}/*去除列表li前面黑点*/
opacity
透明度,最小0,最大1,可以为小数
.test1{opacity: 0.5; filter:alpha(opacity=50);}/*IE6-8不支持opacity,使用filter滤镜实现*/
圆角:IE9以上支持
.test{border-radius:25px;}
<style>
a{text-decoration:none;color:#000;cursor:text;}
div{text-decoration:underline;color:#00f;cursor:pointer;}
</style>
<a href="http://www.baidu.com/">aaaaa</a>
<div>bbbbb</div>
<style>
.yuanjiao{
width:200px;
height:200px;
background:#f00;
border-radius:20px;
}
.yuanjiao2{
width:200px;
height:200px;
background:#0f0;
position:absolute;top:500px;left:100px;
opacity:0.5;
filter:alpha(opacity=50);
}
</style>
<div class="yuanjiao">aaaaaaaaaa</div>
<div class="yuanjiao2">bbb</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
css-文本及其他的更多相关文章
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...
- css文本格式详解
一.css文本主体内容: 二.css文本详解: 1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...
- CSS文本与连接
CSS文本 CSS文本属性可以定义文本外观,通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进等等. 常用的文本属性 属性 描述 color 文本颜色 direction 文本 ...
- [CSS]文本属性(Text)
CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...
- CSS 文本、字体、链接
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...
- CSS文本效果
前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
- css文本属性用法总结
稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦. 下面是部分总结,也希望对其他人有用 文本修饰 (1)text-decoration: 文本修饰(横线) 4 ...
随机推荐
- DevExpress控件-GridControl根据条件改变单元格/行颜色--转载
DevExpress控件-数据控件GridControl,有时我们需要根据特定条件改变符合条件的行或者单元格颜色达到突出显示目的,现在动起鼠标跟我一起操作吧,对的,要达到这个目的您甚至都不用动键盘. ...
- SVG 路径(path)
本文转自:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths <path>元素是SVG基本形状中最强大的一个,它 ...
- EF加载实体的方式
原文:Loading Related Entities EF加载数据的方式: 预加载 eager loading 延迟加载 lazy loading 显示加载 explicit loading 预先加 ...
- WebApi2官网学习记录---Attribute Routing
从WebApi 1迁移到WebAPI 2要改变配置代码如下: WebApi 1: protected void Application_Start() { // WARNING - Not compa ...
- 模型 Model
模型层包含所有视图或控制器不包含的应用程序逻辑 模型应该包含所有应用程序业务逻辑和数据库访问逻辑 主要部分 bll和dal 例如,使用ado.net或者ef5.0访问sql数据库的代码
- Arcgis Engine - 脱离ToolBarControl控件的命令和工具
可以手动实现脱离ToolBarControl控件的命令和工具 //打开文件. private void file_tsmItem_Click(object sender, EventArgs e) { ...
- UI基础视图----UIScrollView总结
UIScrollView是UIKit框架下的很重要的视图类,是UIView的子类.UILabel,UIImageView,UIWebView分别用于展示文字,图片,网页,UILabel通过属性text ...
- Objective-C 数组、可变数组
数组的使用方式 下面是数组:类型NSArray #import <UIKit/UIKit.h> #import "AppDelegate.h" int main(int ...
- win7添加usb3.0驱动(错误代码1392,文件或目录损坏且无法读取)
Win7添加usb3.0驱动 之前一直按照网上的方法执行dism命令挂载时,总是失败,错误代码1392,显示原因是文件或目录损坏且无法读取.这个错误以前在装机时老是出现导致系统安装不成功,在BIOS中 ...
- ifstream中文路径问题分析
最近维护一个项目,遇到了ifstream在中文路径下打开文件失败的bug,我搜索了一下,最后整理成下文以后日后查阅. 一.问题重现 vs2008下创建一个简单win32工程. 使用ANSI编码方式:项 ...