CSS 教程CSS 简介CSS 基础语法CSS 高级语法CSS id和classCSS 创建CSS 多重样式CSS 多重样式优先级CSS 背景CSS 文本格式CSS 字体CSS 链接CSS 列表CSS 表格CSS 盒子模型CSS 边框 borderCSS 轮廓 outlineCSS 外边距 marginCSS 内边距 paddingCSS 尺寸 DimensionCSS 定位 ( positioning )CSS display显示 -visibility可见CSS 浮动 ( float )CSS 布局 - OverflowCSS 布局-水平/垂直对齐CSS 选择器CSS 嵌套选择器CSS 组合选择器CSS 属性选择器CSS 伪类CSS 伪元素CSS 导航栏CSS 下拉菜单CSS 提示工具( tooltip )CSS 图片廊CSS 图像透明/不透明CSS 图像拼合技术CSS 媒体类型CSS 表单CSS 计数器(counter)CSS 网页布局响应式 Web 设计 - 介绍响应式 Web 设计 viewport响应式 Web 设计 - 网格视图响应式 Web 设计 - 媒体查询响应式 Web 设计 - 图片响应式 Web 设计 - 视频(Video)响应式 Web 设计 - 框架CSS 基础教程 总结
CSS 文本格式
css 文本格式主要用来设置 html 元素文本的颜色，对齐方式，行间距等属性
文本颜色
CSS color 属性用来设置文字的颜色
颜色是通过 CSS 最经常的指定
- 十六进制值 - 如: ＃FF0000
- 一个 RGB 值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
参阅 CSS 颜色值 查看完整的颜色值
下面的 CSS 样式设置了 body 、h1 、 h2 元素的文本颜色
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本的对齐方式
CSS text-align 属性用来设置文本的水平对齐方式
文本可居中或对齐到左或右,两端对齐
当 text-align 设置为 "justify" ，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
CSS text-decoration 属性用来设置或删除文本的装饰
从设计的角度看 text-decoration 属性主要是用来删除链接的下划线
a {text-decoration:none;}当然我们也可以装饰文字
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}我们不建议强调指出不是链接的文本，因为这常常混淆用户
文本转换
CSS text-transform 属性用来设置在一个文本中的大写和小写字母
可用于所有字句变成大写或小写字母，或每个单词的首字母大写
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
CSS text-indent 属性用于设置定文本的第一行的缩进
p {text-indent:50px;}
CSS 文本属性
下表列出了所有的 CSS 文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |