CSS样式总结

如何处理文字段落
first类处理文段
英文字段的处理
CSS插入图片，控制图片的上下左右都居中

先要导入CSS的样式：

<link rel=\"stylesheet\" type=\"text/css\" href=\"beauty.css\">

第一段是中文，段落文字：加粗、红色、字符间隔20px、行高30px，首行文字颜色：黄色,第一个文字的颜色是蓝色。

如何处理文字段落

1.加粗：font-weight: bolder;
2.添加字体颜色 color:red ;：
3.字符间隔： letter-spacing: 20px;
4.行高： line-height: 30px;
THML：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><link rel=\"stylesheet\" type=\"text/css\" href=\"beauty.css\"><body><p>第一段是中文，段落文字：加粗、红色、字符间隔20px、行高30px，首行文字颜色：黄色,第一个文字的颜色是蓝色。</p></body></html>

** CSS样式：**

p{color:red ;letter-spacing: 20px;line-height: 30px;font-weight: bolder;}

整体效果：

first类处理文段

1.首行换颜色：first-line
2.首个汉字换颜色：first-letter
HTML不变

CSS样式：

p:first-line{color: yellow;}p:first-letter{color: blue;}

但是要看出第一行的效果，字段必须要在两行以上。
基本效果

英文字段的处理

基本样式和中文相同，但是有一些字母首字母大写问题
1.每个首字母大写：text-transform: capitalize;
2.第一个首字母大写：first-letter处理
3.全部字母大写：text-transform:uppercase;

HTML示范：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><link rel=\"stylesheet\" href=\"static.css\"><body><p>The second paragraph is in English. the first letter of each word is capitalized,the text is aligned to the right, and the background color is orange</p><a>The second paragraph is in English. the first letter of each word is capitalized,the text is aligned to the right, and the background color is orange</a></body></html>

实例1：

p:first-letter{font-size: 30px;}a{text-transform:uppercase;}

效果：

我还是很喜欢首字母变大一个尺寸的，看起来巨清晰，嘿嘿嘿~

CSS插入图片，控制图片的上下左右都居中

基本代码

body{background-image: url(\"5265W`8{7J2A4F]}A{JOP}F.png\");background-repeat: no-repeat;background-position: center center;}

图片需要自己选一张导入
要用no-repeat的原因是背景照片会默认铺满整个背景，像这样：

防止这种情况可以用no-repeat
基于background-position: center center；很显然是让图片居中的，前面的center是水平居中，后者的center是垂直居中，但是运行之后发现只能水平居中，根本不能够垂直居中，所以此时需要修饰一下html：