1.css 中长度与颜色
2.css 中的文字属性
3.css 中的文本属性
14.1 css 中长度与颜色
长度单位 说明
in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位(大部分不支持)
pt 1pt/72英寸
pc 1pc/12pt
px 像素(推荐使用)
颜色单位: 说明
十六进制 如:color:#ff0000
颜色名称 如:color:red
三原色单位 如:rgb(255,0,0)
一般最常用的是十六进制,三原色单位的原理【红(r),绿(g),蓝(b)】混合而成。。
每个值域在0-255之间
14.2 css 中的文字属性
属性名称 属性值 说明
font-style normal 正常显示
italic 斜体
font-variant normal 正常显示
small-caps 将英文大小写字母写调为同宽
font-weight normal 正常显示
bold 粗体
font-size 像素 字体大小
百分比 字体大小
font-family 字体名称 设置字体名称
font属性简化的使用方法:
font:是否斜体 是否同宽 是否粗体 大小 字体名称
例如:font:italic bold 200 隶书;
14.3 css中的文本属性
属性名称 属性值 说明
color 十六进制 颜色
英文名称 颜色
三原色单位 颜色
letter-spacing normal 正常显示
长度 文本间隔
word-spacing normal 正常显示
数字 单词间距
white-space normal 文本自动处理换行
pre 换行和空白受保护
nowrap 强制在同一行显示
text-align left 文字靠左
right 文字靠右
center 文字靠中
text-decoration none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线
text-indent 长度 首行缩进
百分比 同上
line-height 像素 行高
数字/百分比 行高
text-transform none 正常显示可以包含大,小字符
capitalize 字符串第一个字符大写
uppercase 设置大写字符
lowercase 设置小写字符
vertical-align sub 设置文字为下标。
super 设置文字为上标。
top 元件往上端靠齐。
middle 设置文字是在中线位置。
bottom 元件往下端靠齐。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul li{
font-style:italic;
}
p{
font-weight:bold;
color: #d82326;
}
span{
font-size:26px;
font-family:consolas, andale mono, lucida console, lucida sans typewriter, monaco, courier new, monospace
}
ol{
font:italic bold 200 隶书;
}
h1{
letter-spacing: 20px;
}
h2{
word-spacing:30px;
}
h3{
white-space:pre;
}
h4{
text-align: center;
}
h5{
text-decoration:line-through;
}
img{
vertical-align:-50px;
}
</style>
</head>
<body>
<pre>
1 css 中长度与颜色
长度单位 说明
in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位(大部分不支持)
pt 1pt/72英寸
pc 1pc/12pt
px 像素(推荐使用)
颜色单位: 说明
十六进制 如:color:#ff0000
颜色名称 如:color:red
三原色单位 如:rgb(255,0,0)
一般最常用的是十六进制,三原色单位的原理【红(r),绿(g),蓝(b)】混合而成。。
每个值域在0-255之间
</pre>
<ul>
<li>italic 斜体</li>
<li>italic 斜体</li>
</ul>
<p>bold 粗体,color,颜色</p>
<span>font-size 像素 百分比 字体大小,font-family,字体名称 设置字体名称</span>
<ol>
<li>font属性简化的使用方法:是否斜体 是否同宽 是否粗体 大小 字体名称</li>
<li>font属性简化的使用方法:是否斜体 是否同宽 是否粗体 大小 字体名称</li>
</ol>
<h1>letter-spacing字间距,文本间隔</h1>
<h2>单词间距,汉字无效,zhe shi yige laoshi </h2>
<h3>pre 换行和空白受保护 nowrap 强制在同一行显示,
pre 换行和空白受保护 nowrap 强制在同一行显示
pre 换行和空白受保护 nowrap 强制在同一行显示
</h3>
<h4>文本居中</h4>
<h5> none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线</h5>
<p>text-indent 长度 首行缩进
百分比 同上</p>
<p>line-height 像素 行高数字/百分比 行高</p>
<pre>text-transform none 正常显示可以包含大,小字符
capitalize 字符串第一个字符大写
uppercase 设置大写字符
lowercase 设置小写字符
vertical-align sub 设置文字为下标。
super 设置文字为上标。
top 元件往上端靠齐。
middle 设置文字是在中线位置。
bottom 元件往下端靠齐。</pre>
<p><img src="images/pic7.jpg"/>设置文字是在中线位置</p>
</body>
</html>
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论