CSS常用信息速查手册

2016-02-19 14:19 0 1 收藏

下面图老师小编跟大家分享一个简单易学的CSS常用信息速查手册教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】


文字属性 标识符 作用 属性值
  font-family: 定义文字类型,顺序寻找,先找到的为选定值,若都找不到则用默认值 宋体,黑体等
  font-style: 定义字体风格。 normal(标准)italic(斜体)oblique(倾斜)
  font-variant: 改变英文字母的显示 normal,small-caps(小型大写字母)
  font-weight: 使字体加粗 normal(相当于400),bold,lighter,bolder或100~900的九个数
  font-size: 定义字体大小 任意数字,以pt(点阵)、px(屏幕象素)为单位
  文本属性 text-decoration: 修饰文字 underline(加下划线)overline(加上划线)line-thought(加删除线)none(清除下划线,缺省)
  text-align: 文本的显示位置及方式 left,right,center,justify(从左到右对齐)
  颜色属性 color: 定义字体颜色 1.以英文单词为关键字
  2.以十六进制3.用RGB值,用法:RGB(255,0,0) 0~255
  
  背景属性
  
  background-color: 定义背景颜色 同于"颜色属性"的用法
  background-image: 定义背景图象 用法:body{background-image:url(bg.gif)}
  其中"bg.jif"为任意图片
  background-repeat: 按不同方式复制背景 repeat-x:按水平方向复制
  repeat-y:按垂直方式复制
  background-attachment 背景的固定 scroll:背景内容随前景一起滚动
  fixed:背景不动
  background-position: 定义背景位置 top:背景与前景内容顶部对齐
  bottom,left,right
  方式:xxpt xxpt或x% x%或left top
  (以两个英文单词为组合,注意:中间有空格!!)
  
  
  边界属性 margin-top: 对象上边界 缺省值为:0
  关键字:auto
  数值:pt,px,in(英寸),cm(厘米)为单位
  margin-right: 对象右边界 同上.
  margin-bottom: 对象下边界 同上.
  margin-left: 对象左边界 同上.
  
  边界的简洁设置 形式 注解
  DIV{margin:10cm} 所有边界为10cm
  DIV{margin:10cm 3cm} 上下为10cm,左右为3cm
  DIV{margin:1cm 3cm 5cm 7cm} 上为1cm,右为3cm,下为5cm,左为7cm。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1606717.html

延伸阅读
标签: Web开发
1. Block和inline元素对比 所有的HTML元素都属于block和inline之一。 block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 div, p, h1, form, ul 和 li是块元素的例子。 相反地,inline元素的特点是: 和其他元素都在一行上; 高,行高及顶和底边距不可改变; ...
标签: Web开发
/*******************************************************************************/ 不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不...
标签: Web开发
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只...
标签: Web开发
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,ri...
标签: Web开发
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。在www.phpq.net的文档中,也提供了丰富的内容。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。 一、按钮样式 .buttoncss { font-family: "tahoma", "宋体"; /...

经验教程

104

收藏

26
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部