博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
文本CSS
阅读量:4608 次
发布时间:2019-06-09

本文共 2585 字,大约阅读时间需要 8 分钟。

文本CSS

用CSS控制文本的样式

文字大小

font-sizefont-size:
|
|
|
font-size:12px;font-size:2em;font-size:200%;

文字字体

font-familyfont-family:[
|
]#
= serif|sans-serif|cursive|fantasy|monospacefont-family:arial;font-family:arial,Verdana,sans-serif;font-family:Verdana,"microsoft yahei";font-family:"宋体",serif;

文字粗细

font-weightfont-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900font-weight:normal;font-weight:bold;

文字斜体

font-stylefont-style:normal|italic|obliquefont-style:normal;font-style:italic;

行距

line-heightline-height:normal|
|
|
line-height:40px;line-height:3em;line-height:300%;/*先计算,后继承*/line-height:3;/*直接继承*/

多样式组合

fontfont:[[
||
]?
[/
]?
]font:30px/2 "Consolas",monospace;font:italic bold 20px/1.5 arial,serif;font:20px arial,serif;font:100px;/*错误:size和family是必须有的*/

颜色

colorcolor:red;color:#ff0000;color:rgb(255,0,0);color:rgba(255,0,0,0.5);/*最后0.5是透明度*/

水平对齐方式

text-aligntext-align:left|right|center|justifytext-align:left;text-align:right;text-align:center;text-align:justify;

垂直对齐方式

vertical-alignvertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|
|
vertical-align:middle;vertical-align:sub;vertical-align:super;

首行缩进

text-indenttext-indent:
|
text-indent:2em;/*汉字常用*/text-indent:10px;text-indent:20%;

格式处理

white-spacewhite-space:normal|nowrap|pre-wrap|pre-linewhite-space:pre-wrap;/*常用*/

white-space

单词换行

word-wrap:normal|break-wordword-break:normal|keep-all|break-all

文本阴影

text-shadowtext-shadow:none|[
{2,3}&&
?]#text-shadow:1px 2px #f00;text-shadow:1px 2px 3px #f00;text-shadow:1px 2px 3px;

文本划线

text-decorationtext-decoration:none|[underline||overline||line-through]text-decoration:underline;text-decoration:underline overline;

文字溢出

text-overflowtext-overflow:clip|ellipsistext-overflow:ellipsis;/*要配合后面两个表达式一起使用*/overflow:hidden;white-space:nowrap;

定义鼠标形状

cursorcursor:[
,]*[auto|default|none|help|pointer|zoom-in|zoom-out|move]cursor:pointer;cursor:url(xx.cur),pointer;

强制继承

inheritfont-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;color:inherit;text-decoration:inherit;text-align:inherit;text-indent:inherit;white-space:inherit;word-wrap:inherit;word-break:inherit;text-shadow:inherit;

转载于:https://www.cnblogs.com/luwanlin/p/10067539.html

你可能感兴趣的文章
HTML5 表单
查看>>
Android群英传》读书笔记 (3) 第六章 Android绘图机制与处理技巧 + 第七章 Android动画机制与使用技巧...
查看>>
关于微信公众平台测试号配置失败的问题
查看>>
【NOIP2001】统计单词个数
查看>>
linux常用端口
查看>>
异常处理
查看>>
/proc/uptime详解
查看>>
如何建立合适的索引?
查看>>
acwing 651. 逛画展
查看>>
(待完成)qbxt2019.05 总结12 - 趣味题目 鹰蛋
查看>>
[2018/11/18] Java数据结构(2) 简单排序 冒泡排序 选择排序 插入排序
查看>>
关于WPF程序只运行一个实例的方法
查看>>
图论:点分治
查看>>
mysql
查看>>
C/C++ 知识点---sizeof使用规则及陷阱分析(网摘)
查看>>
java小程序 示例
查看>>
前端开发在线小工具
查看>>
有关cookies使用方法
查看>>
Hadoop 使用Combiner提高Map/Reduce程序效率
查看>>
前言 转录组
查看>>