CSS学习笔记——颜色、长度、文本样式——day three

/*首先，来一段HTML */ 
<h1>标题<em>小标题</em></h1> 
<p>我是一个段落，我是一段<code>代码</code></p>
/*其次来一段 CSS*/ 
html { font-size: 62.5%; } 
h1 { font-size: 3em; } 
p { font-size: 1.4em; }

code{font-size:1.1rem;} 改变html文字的大小，code等标签里面运用了rem单位的文字的大小也会等比例改变。

三、文本样式

字体

① font-size字体大小

最常用：数字+px 使用 CSS 像素长度设置字体大小。

smaller、larger、数字+% 设置字体相对于父元素字体的大小。

还有其它的方式，用的比较少，可以去W3C查询。

② font-style 倾斜

normal 表示让倾斜状态恢复到正常状态。

italic 表示使用斜体。

oblique 表示让文字倾斜。区别在没有斜体时使用。

③ font-weight 加粗

④ font-family 字体名称

p { font-family: 楷体,微软雅黑,宋体; }

使用这种方法使用备用字体，兼容不同浏览器。

⑤ font 字体样式组合简写形式

font: 50px 楷体;

中间用空格隔开。

⑥ @font-face 设置Web字体

服务器端字体，提供本地没有这种字体的用户下载。

@font-face {
	/*至少包含两个属性*/
	 font-family: abc; 
	 /*自己命名的字体名称*/
	 src: url('BrushScriptStd.otf');
	 /*下载保存到本地的地址*/
}
p {
	font-size: 50px; 
	font-family: abc;
}

CSS文本样式

每一个样式的具体属性值可用W3C查询对应的使用方式。下面三个为最常用的文本样式。

① text-decoration

a { text-decoration: none; }

让本来有下划线的超链接取消下划线。

② text-transform

p { text-transform: uppercase; }

设置英文文本转换为大小写。

③ text-shadow

p { text-shadow : 5px 5px 3px black; }

给文本添加阴影。

第一个值：水平偏移；

第二个值：垂直偏移；

第三个值：阴影模糊度（可选）；

第四个值：阴影颜色（可选）。

多重阴影叠加

text-shadow:0px 0px 0 rgb(188,178,188),

1px 0px 0 rgb(173,163,173),

2px 0px 0 rgb(157,147,157),

3px 0px 0 rgb(142,132,142)；

CSS3文本样式

1.文本裁剪

text-overflow W3C查询每个属性在浏览器的支持度，决定带不带前缀。

控制文本的溢出部分，它的作用是对溢出的部分裁剪掉，然后判定是否添加省略号。

clip 默认值，裁剪文本时不添加“...”省略号

ellipsis 裁剪文本时添加“...”省略号
必须不换行和使用 overflow 控制溢出

p {

width: 160px;

white-space: nowrap;/*不能换行*/

background: silver;

/*text-overflow: clip;*/

text-overflow: ellipsis;

overflow: hidden;/*控制溢出*/

}

2.文本描边

text-stroke、text-stroke-width、text-stroke-color。

目前只有 webkit 引擎的浏览器支持，并且必须加上-webkit-前缀才能有效。

修改描边的颜色和厚度

p {

font-size: 50px;

-webkit-text-stroke:1px red;

-webkit-text-stroke-color: orange;

-webkit-text-stroke-width: 2px;

}

3.文本填充

text-fill-color，感觉和 color 属性很像。其实在配合其他属性才能达到不一样的效果。

文本方位

每一个属性还有很多值，这里例举常用的，具体查询W3C。

① text-align

p { text-align: center; }

指定文本的对齐方式。其中两端对齐的意思是两端尽可能填充，与左右边框无缝隙，但中间字体间隙可能适度会改变。

② white-space

p { white-space: nowrap; }

处理空白排版方式。自己敲了很多空格键，但是显示出来的文本会把它压缩掉，没有自己敲的空白长。还有其他属性，如保留空白符，遇到换行符换行，具体就像编辑微信朋友圈时实现效果和发出来的效果之间的差距。

③ letter-spacing

p { letter-spacing: 4px; }

设置文本之间的间距。两个汉字间。
④ word-spacing

p { word-spacing: 14px; }

设置英文单词之间的间距。
⑤ line-height

p { line-height: 200%; }

设置段落行高。两行之间的距离。
⑥ word-wrap

p { word-wrap: break-word; }

让过长的英文单词断开。
⑦ text-indent

p { text-indent: 20px; }

设置文本首行的缩进。