css学习资料

一、Font 字体

1、font-family

示例:{font-family:字体:字体1}

2、font-size 字号大小

示例: p { font-style: normal; } 

 p { font-size: 12px; } 

 p { font-size: 20%; } 

3、font-style  字体样式

参数: normal : 正常的字体 

 italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique 

 oblique : 倾斜的字体 

示例:  p { font-style: normal; } 

 p { font-style: italic; } 

 p { font-style: oblique; } 

4、font-weight 文本字体的粗细

参数: normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置 

 bold : 粗体。相当于number为700。也相当于b对象的作用 

 bolder : IE5+ 特粗体 

 lighter : IE5+ 细体 

示例: span { font-weight:800; } 

5、text-decoration 文本的装饰

参数:  none :  无装饰

 blink :  闪烁

 underline :  下划线

 line-through :  贯穿线

 overline :  上划线 

示例: div { text-decoration : underline; } 

 div { text-decoration : underline overline; } 

6、font-variant 英文的大小写转换

参数:  normal : 正常的字体 

 small-caps : 小型的大写字母字体 

 

示例: span { font-variant: small-caps; } 

 

7、text-transform 英文大小写

参数: none :  无转换发生

 capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生

 uppercase :  转换成大写

 lowercase :  转换成小写 

示例: div { text-transform : uppercase; } 

 

8、line-height 文字行高

参数: normal :  默认行高

 length :  百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值

示例: div {line-height:6px; } 

div {line-height:10.5; } 

 

9、letter-spacing 文字之间的间隔

参数:  normal :  默认间隔

 length :  由浮点数字和单位标识符组成的长度值,允许为负值。

示例: div {letter-spacing:6px; } 

 div {letter-spacing:0.5pt; } 

 

10、word-spacing  英文单词间距

参数: normal :  默认间距

 length :  由浮点数字和单位标识符组成的长度值,允许为负值

示例:div { word-spacing : 10; }  div { word-spacing : 10px; } 

 

二、文本  text

1、text-indent  文字缩进

参数:length :  百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。

示例:div { text-indent : -5px; } 

div { text-indent : underline 10%; 

 

2、text-align  对齐

参数: left :  左对齐

 right :  右对齐

 center :  居中

 justify :  两端对齐 

示例: div { text-align : center; } 

 

三、背景  background

1、background-color   背景色

参数: transparent :  背景色透明

 color :  指定颜色

示例: p { background-color: silver }

div { background-color: rgb(223,71,177) } 

body { background-color: #98AB6F }

pre { background-color: transparent; } 

 

2、background-image  背景图

参数: none :  无背景图

 url :  使用绝对或相对地址指定背景图像 

示例: code { background-image: url("comet.jpg"); }

 blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); } 

 br { background-image: url(http://Fred.com/ImageFile/Q.gif); } 

 body { background-image: none; } 

 

3、background-position  背景图像位置

参数: length :  百分数 | 由浮点数字和单位标识符组成的长度值。

 position :  top | center | bottom | left | center | right 

示例: div { background: url("images/aardvark.gif"); background-position: 35% 80%; } 

 menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; } 

 a { background: url("images/aardvark.gif"); background-position: 3.25in; } 

 body { background: url("images/aardvark.gif"); background-position: top right; } 

 

4、background-repeat  背景图像平铺

参数: repeat :  背景图像在纵向和横向上平铺

 no-repeat :  背景图像不平铺

 repeat-x :  背景图像在横向上平铺

 repeat-y :  背景图像在纵向平铺 

示例: menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } 

 p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

 

四、定位  Positioning 

1、position  

参数: static :  无特殊定位,对象遵循HTML定位规则

 absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位

 relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置

 fixed :  IE5.5及NS6尚不支持此属性

 width:  层的高度

 height:  层的宽度

示例: div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; }

 div { position:relative; top:-3px; left:6px; } 

 

2、z-index  

参数: auto :  遵从其父对象的定位

 number :  无单位的整数值。可为负数 

示例: div { position:absolute; z-index:3; width:6px; } 

 

五、布局  Layout

1、overflow 

参数: visible : 不论层的大小,内容都显示出来 

auto :  只在内容超出层的范围的时候才显示滚动条 

hidden :  不显示超过对象尺寸的内容

scroll :  总是显示滚动条 

示例: body { overflow: hidden; }

 div { overflow: scroll; height: 100px; width: 100px; }

2、visibility  

参数: inherit :  继承上一个父对象的可见性

 visible :  对象可视

 hidden :  对象隐藏

 collapse :  主要用来隐藏表格的行或列。

示例: img { visibility: inherit; float: right; }

 

六、边框  border

1、border-width  边框宽度

参数: medium :  默认宽度

 thin :  小于默认宽度

 thick :  大于默认宽度

 length :  由浮点数字和单位标识符组成的长度值。

示例: span { border-style: solid; border-width: thin; } 

 span { border-style: solid; border-width: 1px thin; }

 

2、

border-top-width 上宽 (当把width换成color就是边框颜色)

border-bottom-width 下宽(当把whdth换成style就是边框样式)

border-left-width 左宽

border-right-width 右宽

 

3、border-style  边框样式

参数: none :  无边框

 hidden :  隐藏边框。IE不支持 

 dotted :  点线

 dashed :  虚线

 solid :  实线边框 

 double :  双线边框

 ----一一下只对表格有效-----

 groove :  根据border-color的值画3D凹槽 

 ridge :  根据border-color的值画菱形边框 

 inset :  根据border-color的值画3D凹边 

 outset :  根据border-color的值画3D凸边 

示例: body { border-style: double groove; } 

 body { border-style: double groove dashed; 

 

七、外补丁 margin

1、 检索或设置对象四边的外延边距。

 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

 margin-top  上

 margin-right 右

 margin-bottom 下

 margin-left 左

示例: body { margin: 36pt 24pt 36pt; } 

 body { margin: 11.5%; } 

 body { margin: 10% 10% 10% 10%; }  

 body { margin-top: 11.5%; } 

八、内补丁 padding

检索或设置对象四边的补丁边距。

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

和外补丁相似 

 

九、超链接

a:link {color: #FF0000}     /* 未访问的链接 */

a:visited {color: #00FF00}  /* 已访问的链接 */

a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */

a:active {color: #0000FF}   /* 被选择的链接 */

 

十:鼠标光标

1、cursor:光标形状 

参数: crosshair  交叉十字 help 代问号的鼠标

 default  默认鼠标形状 text 文本形状

 hand  手型  

 move  移动的形状

 wait  沙漏形状

 w-resize 向西的箭头 s-resize 向南的箭头

 n-resize 向北的箭头 e-resize 向东的箭头

 ne-resize 向东北  sw--resize 向西南

 se-resize 向东南 nw-resize 向西北

 

Xscan,LC4/5,流光

 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月28日

热门专题

APP开发|app开发_app开发公司_app软件开发_专业app开发_云南app开发公司_app定制_原生app开发定制
APP开发
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
昆明综合高中|昆明综合高中
昆明综合高中
云南综合高中|云南综合高中
云南综合高中
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法
国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部