HTML和CSS前端教程03-CSS文本样式
程序员文章站
2023-02-20 23:19:47
[TOC] 1.CSS颜色 建议就用十六进制 2.CSS长度的度量单位 建议就用px 3.CSS文本样式 字体的大小,样式以及方位 3.1. 字体属性 | 属性名 | 说明 | 例子 | | | | | | | 字体大小 | | | | 英文字体是否转为小型字母 | `font variant: n ......
目录
1.css颜色-建议就用十六进制
p{ color: #ff0000 }
2.css长度的度量单位-建议就用px
p{ margin: 0; padding: 0; font-size: 20px; height: 50px; }
3.css文本样式
字体的大小,样式以及方位
3.1. 字体属性
属性名 | 说明 | 例子 |
---|---|---|
font-size |
字体大小 | font-size: 50px |
font-variant |
英文字体是否转为小型字母 |
font-variant: small-caps font-variant: normal
|
font-style |
字体倾斜 |
font-style: italic font-style: normal
|
font-weight |
字体加粗 | font-weight: bold |
font-family |
font字体 | font-family: 微软雅黑 |
font |
字体样式复合写法 | font: italic bold small-caps 50px 楷体 |
@font-face |
设置web字体 |
3.1. 文本样式
属性名 | 说明 | 参数 |
---|---|---|
text-decoration |
z装饰文本出现各种划线 | underline:底部线条 overline:头部线 line-through:中间删除线 |
text-transform |
大写换成小写 | uppercase:转成大写 lowercase:转成小写 capitalize:首字母大写 |
text-shadow |
添加阴影 | 5px(水平偏移),5px(垂直偏移),3px(模糊度),black(颜色) |
text-align |
设置对齐方式 | center:居中 left right justify:两端对齐 |
white-space |
排版中的空白处理方式 | normal: 空白符压缩,文本自动换行 nowrap:空白符压缩,文本不换行 pre:空白符保留,遇到换行符换行 pre-line:空白符压缩,文本排满时换行 |
letter-spacing |
设置字母之间的间距 | letter-spacing: 4px |
word-spacing |
设置单词之间的间距 | letter-spacing: 4px |
line-height |
设置行高 | line-height: 200% |
word-wrap |
控制段词,让国产的单词断开 | word-wrap:break-word |
text-indent |
设置文本首行缩进 |
上一篇: 199,一个被正则表达式遗忘的号码段?
推荐阅读
-
前端开发CSS3——文本样式和盒子及样式
-
HTML和CSS前端教程03-CSS选择器
-
HTML和CSS前端教程03-CSS文本样式
-
HTML和CSS前端教程05-CSS盒模型
-
前端开发CSS3——文本样式和盒子及样式
-
看某前端设计书上说,在 base.css 里先定义一些基础样式然后在 html 里面加上相应的 class,这样是否和语义化相矛盾?
-
【无私分享:从入门到精通ASP.NET MVC】从0开始,一起搭框架、做项目 登录界面前端样式和特效_html/css_WEB-ITnose
-
看完《CSS权威指南》、《JavaScript权威指南》和《深入理解 HTML5:语义、标准与样式》能否胜任前端工程师?
-
HTML和CSS前端教程03-CSS文本样式
-
HTML和CSS前端教程05-CSS盒模型