css文本操纵与css文字款式示例和特性

日期:2020-12-12 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

1、CSS操纵文本特性:

1、font-size:18px;:设定字号
2、color:#093:设定字色
3、font-family:'宋体';:设定字体样式(能够有多种多样字体样式,两个字体样式之间有,隔开开,表明假如系统软件中有第1个字体样式则显示信息实际效果是第1个字体样式,假如沒有则显示信息的是第2个字体样式的实际效果,以此类推)
4、line-height:150%;:设定行与行之间的间距(企业能用px或em或百分比)
5、font-weight:bold:设定字体样式的粗细(粗:bold 一切正常:normal)

6、font-variant : normal一切正常 | small-caps小型的大写字母字体样式
7、font—style:设定字体样式款式(normal一切正常,italic,oblique斜体)
8、text-decoration:装饰文本(none一切正常,underline下划线,overline上划线,line-through删掉线 blink闪动(只适用IE6,7,搜狐))
9、letter-spacing:5px:标识符间隔(normal默认设置,length长度企业)
10、word-spacing:5px:单词间隔(normal默认设置,length长度企业

font特性简化的写法:是不是斜体 是不是同宽 是不是粗体 尺寸 字体样式


拷贝编码
编码以下:

<style type="text/css">
body{font-size:18px; color:#093; font-family:Arial, '汉仪行楷简'; line-height:300%; font-weight:bold}
div{width:400; height:50; background:#999; word-spacing:5em;}
h1{font-weight:normal;font-style:italic; text-decoration:underline; letter-spacing:5px; word-spacing:60px;}
</style>
</head>
<body>
<h1>李克强主持人召开<span>国务院</span>常务会 IAmLOME</h1>
<h2> 听取最低日常生活确保政策落实督查状况报告</h2>
布署进1步提升和改善低保工作中
<div>决策将《社会发展援助暂行方法(草案)》向社会发展公布 i am LOME</div>
</body>
[code]</p> <p>留意:设定字体样式要尽可能应用通用性的字体样式,便是用大伙儿电脑上上1般都有的字体样式,常见的是汉语字体样式是宋体,英文本体是Arial)设定字体样式的情况下将英文本体设定在前,汉语设定在后 。假如想用较为独特的字体样式,能够将其变换为照片</p> <p>小窍门:</p> <p>1. 假如是12px或14px的字体样式,行高1般1.5em⑴.8em之间 字号越大行高设定的越小1点</p> <p>2.设定区块中的內容,竖直方位上垂直居中,将区块的行高设定与区块的高宽比同样,前提条件是只能1行</p> <p>[code]
<style type="text/css">
h1{width:600px; height:150px; line-height:150px; border:1px solid #0F0;}
</style>
</head>
<body>
<h1>fsadkfhkasdhfasfasdfdsafjk</h1>
</body>

2、CSS操纵文字特性:

1、设定文字缩进:text-indent:length(长度企业)能够负值
2、文字水平对齐方法:text-align:left左,center垂直居中,right右
3、空白解决:white-space:nowrap(nowrap强制性在1行中显示信息,pre换行和空格保存,normal全自动换行)
4、尺寸写操纵:text-transform:(capitalize每一个单词的第1个字母大写,uppercase每一个字母都大写,loowercase每一个字母都小写,none一切正常尺寸)
5、文字竖直对齐方法:vertical-align:(sub设定文字为下标,super设定文字为上标 , top与顶端对齐 ,text-bottom与低端对齐)


拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>CSS操纵文字</title>
</head>
<style type="text/css">
#one{text-indent:2em;}
#two{text-align:center; white-space:pre; text-transform:uppercase;}
span{vertical-align:super;}
#t2{width:100px; vertical-align:middle;}
</style>
<body>
<p id="one">0.5秒3分绝杀!波特兰上演波什時刻 第N次解救热火</p>
<h1 id="two">玩命暴扣扳平+助攻绝杀3分 <span>热火</span>太好运有这fkasfjklas fklasdj颗队魂</h1>
<p>热火今晚还1元勋务必赞 11分很少但却分分是金!</p>
<p>詹波为小弟恶犯叫屈 当事人他都起飞了!毫无疑问假摔</p>
<p>斯帅称客战发展者奥登不打 波什:他很快便可复出</p>
<p>
<img src="../../imgs/95160924ab18972ba7fd1de8e7cd7b899f510ac8.jpg" id="t2"/>
斯帅称客战发展者奥登不打 波什:他很快便可复出
</p>
</body>
</html>