文字

我们以div标签举例,来设置常见的文字样式

  1. <div>今天天气真晴朗!</div>
  1. div {
  2. /* 文字大小为14像素 */
  3. font-size: 14px;
  4. /* 文字颜色是黄色的 */
  5. color: yellow;
  6. /* 段落首行缩进两个字的宽度 */
  7. text-indent: 2em;
  8. text-indent: 1cm;
  9. text-indent:-9999px; 隐藏文字
  10. /* 设置对齐方式,center:居中对齐; left:左对齐; right:右对齐*/
  11. text-align: center;
  12. /* 设置字体为sans-serif */
  13. font-family: sans-serif;
  14. /* 文字斜体显示,normal:文本正常显示; italic:文本斜体显示; oblique:文本倾斜显示 */
  15. font-style:italic;
  16. /* 文字加粗显示, bold:加粗; normal:正常大小; 数字值(100-900);100对应最细的;900对应最粗的;400 等同于 normal,而 700 等同于 bold,*/
  17. font-weight: bold;
  18. font-weight: 100;
  19. }
  20. /*规定字符间距*/
  21. letter-spacing: 30px;
  22. letter-spacing: -0.5em;
  23. /*规定行高间距;在大多数浏览器中默认行高大约是 110% 到 120%;*/
  24. line-height: 90%
  25. line-height: 200%

背景

  1. div {
  2. /* 设置背景色为灰色 */
  3. background-color: gray;
  4. /* 设置背景图片 */
  5. background-image: url("logo.gif");
  6. /* 设置背景图片尺寸 ;第一个值设置宽度,第二个值设置高度;如果只设置一个值,则第二个值会被设置为 "auto";cover:完全覆盖背景区域;contain:宽度和高度完全适应内容区域 */
  7. background-size: 80px 60px;
  8. background-size: 50% 50%;
  9. background-size: cover;
  10. background-size: contain;
  11. /* 背景图片不重复:no-repeat; 水平重复:repeat-x; 垂直重复:repeat-y; */
  12. background-repeat:no-repeat;
  13. /* 背景图片位置 top:上; left:左; right:右; bottom:底部; center:中间; */
  14. /* 也可以设置百分比例如 66% 33% ,第一个数是水平方向,第二个数是垂直方向*/
  15. /* 也可以设置像素 例如 0px 22px ,第一个数是水平方向,第二个数是垂直方向*/
  16. background-position:top right;
  17. background-position:66% 33%;
  18. background-position:0px 22px;
  19. /* 如果文档较长,那么当文档向下滚动时,背景图像会固定在文档中不滚动*/
  20. background-attachment:fixed;
  21. }

宽度和高度

  1. div {
  2. /* 设置宽度为200像素 */
  3. width: 200px;
  4. width: 100%;
  5. /* 设置高度为100像素 */
  6. height:100px;
  7. height:100%;
  8. }

边框

  1. div {
  2. /* 设置div的边框为1px的线条*/
  3. border:1px solid;
  4. /* 分别设置div四个边的边框 */
  5. border-top: 1px solid #08c;
  6. border-left: 1px dashed red;
  7. border-right: 1px solid;
  8. border-bottom: 1px solid red;
  9. }

最新文章

  1. 基本TCP套接字编程
  2. 使用POI实现数据导出Excel表格
  3. 在PC端或移动端应用中接入商业QQ的方法
  4. 《javascript高级程序设计》第三章 Language Basics
  5. Android学习笔记一
  6. Word2003中如何使封面和目录中不插入页码
  7. Linux Apache SVN
  8. Asp.Net MVC4新特性指南(1): 基本介绍
  9. UVA 1001 Say Cheese
  10. Azure Messaging-ServiceBus Messaging消息队列技术系列5-重复消息:at-least-once at-most-once
  11. php调试之路
  12. NPOI创建EXCEL(NOPI系列1)
  13. 201521123007《Java程序设计》第12周学习总结
  14. 使用dos的tree命令输出文件夹树
  15. Linux学习笔记之Linux添加/删除用户和用户组
  16. C#串口数据收发数据
  17. Python——进程通信之间数据共享
  18. Go Revel - i18n(国际化)
  19. composer安装其实可以很简单 两行命令就解决了
  20. FireMonkey 源码学习(1)

热门文章

  1. 洛谷P2606 [ZJOI2010]排列计数(数位dp)
  2. 6、OpenCV Python 图像模糊
  3. P4841 城市规划 FFT+生成函数
  4. tftp简单文件传输协议搭建
  5. k8s安装
  6. springmvc htmlEscape标签的作用
  7. 1972 HH的项链
  8. javasript
  9. python中 列表 字典 元组的了解
  10. Linux系统调用接口添加简单示例