文本相关样式

文字阴影

text-shadow : none | <length> none | [<opacity>,] * <opacity> 

或者

text-shadow : none | <color> [,<color> ]*

color  指定颜色

length  由浮点数和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。

opacity  由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果仅仅需要模糊效果,将前两个length全部设定为0

阴影位移(阴影与文本内容之间的距离)

text-shadow : Apx Bpx #color;

参数A值是指文本X轴上的位移;而B值指文本Y轴上的位移;color指阴影的颜色值。

阴影的模糊半径

text-shadow: Apx Bpx Cpx #color;

A和B分别表示X和Y轴,而C值代表着文本阴影模糊的程度。

指定多个阴影

text-shadow : Apx Bpx Cpx #color,Dpx Epx Fpx #color;

(当X和Y坐标值为负数时,将在文字左上部分显示阴影效果)

省略标记

text-overflow属性设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

white-space属性设置如何处理元素内的空白。

white-space : nornal | pre | nowrap

normal 默认值。文本自动处理换行。假如抵达容器边界,内容会转到下一行。

pre 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。换行和其他空白字符都将受到保护。

nowrap 强制在同一行内显示所有文本,直到文本结束或遭遇<br>标签。

overflow为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性。

overflow : visible | auto | hidden | scroll

visible 默认值。不剪切内容也不添加滚动条。假如显示声明此默认值,对象将以包含对象的window或frame的尺寸裁切。并且clip属性设置将失效。

auto 在必须时对象内容才会被裁切或显示滚动条。

hidden 不显示超过对象尺寸的内容。

scroll 总是显示滚动条。

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其他的样式属性定义。

text-overflow : clip | ellipsis

clip 不显示省略标记(...),而是简单的裁切。

ellipsis 当对象内文本溢出时显示省略标记(...)

自动换行

word-wrap属性设置或检索当当前行超过指定容器的边界时是否断开转行

word-wrap : normal | break-word

normal 控制连续文本换行。

break-word 内容将在边界内换行。如果需要,词内换行也会发生。

调用服务器端字体

在浏览网页时,可能由于客户端计算机没有安装一些特殊字体,则网页将无法显示实际效果。因此,用户可以使用

@font-face调用服务器端字体。

@font-face{

font-family : <yourWebFontName>;

src : <source> [<format>][,<source>[format]]*;

[font-weight : <weight>];

[font-style : <style>];

}

yourWebFontName 指自定义的字体名称,最好是使用下载的默认字体,它将被引用到Web元素中的font-family

source 指自定义的字体的存放路径,可以是相对路径也可以是绝对路径

format 指自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype、opentype、truetype-aat、embedded-opentype、avg等。

weight 定义字体是否为粗体

style 定义字体样式,如斜体。

时间: 2024-10-13 21:31:01

文本相关样式的相关文章

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

文本相关的操作

文本相关的标签 1.字符实体(具有特殊意义的符号) 空格:&nbsp:每个表示一个空格 分号不能省略 小于号:&lt: 大于号:&gt: 版权符号©:&copy: 人名币符号:&yen: <10> 2.文本样式标记(以下都为双标签) 斜体显示文本:<i></i> 添加下划线:<u><> 加粗<b><> 删除线<s> 上标显示文本<sup> 下标显示文本<

web前端入门到实战:CSS的文本格式化样式总汇

长度单位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; /*em数值根据当前元

文本框样式width100%超过父容器

input[type="text"] { width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; } 解决文本框样式width:100%超过父容器!!! 转载自:http://blog.csdn.net/xiaochunyong/article/details/7517210

1.2 文本相关标签

文本是网页不可缺少的元素之一,是网页发布信息所采用的主要形式.为了让网页中的文本看上去编排有序.整齐美观.错落有致,我们就要设置文本的大小.颜色.字体类型以及换行换段等. 本节单词记忆:标签 1.font 2.p 3.br 属性 1.color 2.size 3.face 4.align 网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的. 一.字体字号相关标签 1.标题标签 标题能分隔大段文字,

各种各样的文本框滚动栏样式代码 滚动栏样式 文本框样式(文本框样式大全)

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color:

axure切换焦点文本框样式

在之前的文章中,我们介绍过在axure中自定义文本框样式的方法,今天我们再深入一些,当文本框的焦点发生变化时,动态切换焦点文本框的样式. 先看效果: 制作步骤: 先把文本框的默认样式做出来: 拖入两个文本框,分别命名为用户名.密码,隐藏边框,设置好提示文字:. 拖入两个矩形,设置高度略大于文本框,边框颜色为浅灰色,分别命名为用户名边框.密码边框,分别把两个文本框置于对应的边框上方. 开始做交互,当文本框获取焦点时,改变边框颜色: 当文本框获取焦点时,把对应的边框矩形设置为选中状态,失去焦点时,取

axure自定义文本框样式

axure中的文本框是我们经常使用的元件,但它本身对样式的设置很有限,不能设置边框样式.阴影等,不能满足我们制作高保真原型的需求,本文给大家介绍一下结合矩形元件自定义文本框样式.(PS:此处的"高保真"指的是UI上的设计,对于原型保真程度的说明,请参考我的另一片文章<产品原型设计浅见>). 如果我们要制作下图这种圆角输入框,首先拖入一个文本框.一个矩形到设计区域,将矩形置于底层,调整矩形的大小能够刚刚包围住文本框,给矩形增加一点圆角,把矩形的颜色弄浅一点,我设置的色值是#9

第十章:为文本添加样式

本章内容: 1.选择字体的方法:在样式表中需要的选择器之后输入font-family:name.如:要将body元素的字体换成Geneva的代码:body{font-family:geneva;}.需要注意的是:虽然font-family属性是继承的,但是有几个元素不会继承父元素的字体设置,其中有表单的select.textarea.input 元素.但是可以强制它们继承父元素的字体设置,代码为:input,select,textarea{font-family:inherit;} 2.指定替代