AI智能
改变未来

CSS段落小处理

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:

html{height:100%}

之后就会发现图片是居中了的!
小小总结 over!

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » CSS段落小处理