Css基本样式————文本
2016-05-10 20:59
579 查看
一、CSS文本属性可定义文本外观
二、通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
三、常用属性:
color 文本颜色
说明color这个属性是可以继承的
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本中添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
lowercase:全部变小写
uppercase:全部变大写
inherit(中文意思为“继承”):默认方式(不改变原文内容)
unicode-bidi 设置文本方向
white-sapce 元素中空白的处理方式
word-spacing 字间距
四、CSS3文本效果:
text-shadow:向文本添加阴影
第一个值:相对于原本文字距左的距离
第二个值:距当前文本上方的位置
第三个值:清晰度
第四个值:背景颜色
word-wrpa:规定文本的换行规则
text-wrap:normal; 自动换行
此外还有一个功能
如果<p></p>内写的是英文,"text-wrap"这个属性不会把当前的文字拆开(这个效果非常不错)
二、通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
三、常用属性:
color 文本颜色
body{ color: aqua; } <body> <p>查看颜色</p> </body>这里给body设置color,在p标签中可以看到效果
说明color这个属性是可以继承的
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
p{ color: red; text-align: right; } <body> <p>Hello World</p> </body>
text-decoration 向文本中添加修饰
text-indent 缩进元素中文本的首行
h3{ text-indent: 2em; } <body> <div> <h3>静夜思</h3> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> </div> </body>也可以按百分比缩进
text-transform 元素中的字母
p{ text-transform: capitalize; } <body> <div> <p>there is a beautiful girl</p> <p>a so lovely girl</p> <p>i always tell myself "never give up,never give up, never give up!"</p> </div> </body>capitalize:把所有单词的首字母大写
lowercase:全部变小写
uppercase:全部变大写
inherit(中文意思为“继承”):默认方式(不改变原文内容)
unicode-bidi 设置文本方向
white-sapce 元素中空白的处理方式
word-spacing 字间距
四、CSS3文本效果:
text-shadow:向文本添加阴影
p{ text-shadow: 5px 5px 5px #FF0000; } <body> <div> <p>there is a beautiful girl</p> <p>a so lovely girl</p> <p>i always tell myself "never give up,never give up, never give up!"</p> </div> </body>text-shadow需要设置4个值
第一个值:相对于原本文字距左的距离
第二个值:距当前文本上方的位置
第三个值:清晰度
第四个值:背景颜色
word-wrpa:规定文本的换行规则
p{ width: 100px; text-wrap: normal; }width:100px; 设置p元素整体宽度为100
text-wrap:normal; 自动换行
此外还有一个功能
如果<p></p>内写的是英文,"text-wrap"这个属性不会把当前的文字拆开(这个效果非常不错)
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 局域网的基本组成
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''