CSS3-设置文本样式
<!-- 应用基本文本样式 --> <!-- text-align: start, end, left, right, center, justify --> <!-- text-justify: 如果text-align使用了justify属性,那么justify用来指定对齐文本的规则 --> <style type = "text/css"> p { text-align: center; } </style> <!-- text-justify --> <!-- 属性: --> <!-- auto --> <!-- none 禁用文本对齐 --> <!-- inter-word 空白分布在单词之间 --> <!-- inter-ideograph 空白分布在单词,表意字之间 --> <!-- inter-cluster 空白分布在单词,字形集的边界 --> <!-- distribute 空白分布在单词,字形集的边界 --> <!-- kashida 通过拉长指定字符调整对齐方式 --> <!-- 处理空白 --> <!-- white-space --> <!-- 属性: --> <!-- normal, 默认值,空白被压缩,文本自动换行 --> <!-- nowrap 空白被压缩,问本行不换行 --> <!-- pre 空白符被保留,文本只在遇到换行符的时候换行 --> <!-- pre-line 空白符被压缩,文本会在一行排满或遇到换行符时换行 --> <!-- pre-wrap 空白被保留,文本会在一行排满或遇到换行符时换行 --> <style type = "text/css"> p { white-space: pre-line; } </style> <!-- 指定文本方向 --> <!-- direction: ltr, rtl; --> <style type = "text/css"> p { direction: rtl; } </style> <!-- 指定单词,字符,行之间的间距 --> <!-- letter-spacing 设置字母之间的间距 --> <!-- word-spacing 设置单词之间的间距 --> <!-- line-height 设置行高 --> <style type = "text/css"> p { letter-spacing: 10px; word-spacing: 2px; line-height: 3em; } </style> <!-- 控制断词 --> <!-- word-wrap: normal, break-word; --> <style type = "text/css"> p { word-wrap: break-word; } </style> <!-- 首行缩进 --> <!-- text-indent --> <style type = "text/css"> p { text-indent: 15%; } </style> <!-- 文本装饰与大小写转换 --> <!-- text-decoration 和 text-transform --> <!-- text-decoration 属性 none, underline, overline, line-through, blink --> <!-- text-transform 属性 none, capitalize, uppercase, lowercase --> <style type = "text/css"> p { text-decoration: line-through; } </style> <!-- 创建文本阴影 --> <!-- text-shadow : <h-shadow> <v-shadow> <blur> <color> --> <style type = "text/css"> p { text-shadow: 0.1em 0.1em 1px lightgray; } </style> <!-- 使用字体 --> <!-- font-family 设置文本采用的字体名称 --> <!-- font-size --> <!-- font-style --> <!-- font-variant 指定字体是否以小型大写字母显示 --> <!-- font-weight 设置字体粗细 --> <!-- font 简写 font: font-style font-variant font-weight font-size font-family --> <!-- font-family通用字体: setif, sans-serif, cursive, fantasy, monospace --> <style type = "text/css"> p { font-family: monospace; } </style> <!-- font-size 属性 --> <!-- xx-small, x-small, small, medium, large, x-large, xx-large --> <!-- smaller,larger 设置字体相对于父元素字体的大小 --> <style type = "text/css"> p { font-size: xx-large; } </style> <!--设置字体样式和粗细 --> <!-- font-style font-weight --> <style type = "text/css"> p { font-style: italic; font-weight: bold; } </style> <!-- 使用web字体 --> <!-- 直接下载web字体并应用在自己的页面上 --> <!-- @font-face --> <style type = "text/css"> @font-face { font-family: 'myfont' font-style: normal; font-weight: normal; src: url(''); } p { font-family: myfont; } </style> <!-- web字体有多种格式, 但WOFF得到了广泛的支持和应用 -->
相关推荐
CSS--文本溢出完美样式,CSS--文本溢出完美样式,CSS--文本溢出完美样式
day03(CSS01-基础选择器+字体文本样式).rar
本样式包括所谓的文本缩进:text-indent、水平对齐:text-align:center;left;right、字间隔和字母间距、字符转换:text-transform等等,在本文将为大家详细介绍下,感兴趣的朋友可以参考下
CSS 列表属性可以设置 列表标识 列表项样式 1 1 属性 描述 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项...
CSS3制作Word文本编辑器,纯CSS3纯制作,可编辑,微软Word样式文档。
CSS3折纸样式文本标题特效
功能:使文本显示为扁斜体或斜体等表示强调 。 数值: normal - 正常 italic - 斜体 oblique - 偏斜体 font-variant 功能:用于在正常与小型大写字母字体间切换。 数值:normal - 如果该标志继承父元素的 small-...
CSS3其他新增文本样式.pdf 学习资料 复习资料 教学资源
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
单元2-3 字体、文本、背景属性;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;字体属性 font font-family font-size font-style font-variant font-weight @font-face 文本属性 color direction line-height letter-spacing text-...
CSS基础-基础选择器+字体文本相关样式
头歌教学实践平台 Web前端开发基础 CSS——文本与字体样式。源码txt格式。
本书内容包括文本样式、CSS图像、导航、表格数据、注册表和用户界面、浏览器和设置支持、CSS定位和布局以及未来相关技术。 本书的目标读者是每一个需要使作CSS的Web设计人员和开发人员。本书通过经典的问题和精彩...
:artist_palette: tailwindcss-文本填充 TailwindCSS实用程序可覆盖文本内容的前景填充颜色,特别适用于使用完成的表单字段的样式,因为color无法使用。安装yarn add tailwindcss-text-fill 或者,如果您使用npm : ...
css3比css多了一些样式设置而已。 css3是向前兼容的,也就是说,css中有效的code在css3也有效。 一个css与css3都有效的code,如果浏览器不支持css3,那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中...
文本样式属性--字体样式属性 字体样式属性 为了更方便的控制网页中各种各样的字体,CSS提供了一系列的字体样式属性。 6 @font-face属性用于定义服务器字体。 7 word-wrap属性用于长单词和URL地址的自动换行 1 font-...
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等, 4.属性和属性值之间用英文”:”连接 5.多个“键值对”之间用英文”;”进行区分 总结 03 通过CSS样式简介了解 CSS样式是什么 通过CSS样式规则简介...
CSS3折纸样式文本标题特效是一款jQuery基于CSS3属性制作页面标题文字弯曲排列悬停特效。
CSS 层叠样式表 CSS 索引│CSS 结构│CSS 属性 -------------------------------------------------------------------------------- 现在开始样式表! 仅仅改变一个文件就可以改变数百个网页的外观......个性化...
wysiwyg-css用于为富文本/Markdown 编辑器生成的内容提供主题样式。特点可读性:间距和颜色在视觉上平衡简单:只需一个单一的类来设置所有元素的样式可扩展性:您可以根据变量自定义输出 标签:wysiwyg