码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2016-11-01 01:13:24      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:help   air   scrollbar   换行符   man   z-index   ase   背景图片   min   

引入

<link rel=”stylesheet” type=”text/css” href="style.css"/>

<style type="text/css">@import "style.css"</style>

文字属性

属性名称                     属性值                      说明
font-style                  normal                     正常显示
                                italic/obligue             斜体
font-variant               normal                     正常显示
                                small-caps               将英文大小写字母写调为同宽
font-weight               normal                     正常显示
                                bold                        粗体
font-size                   像素/百分比               字体大小
font-family                字体名称                   设置字体名称
font属性简化的使用方法:
font:是否斜体   是否同宽   是否粗体   大小   字体名称
例如:font:italic bold 200 隶书

文本属性
属性名称                     属性值                      说明
color                         十六/英文/三原色         颜色
letter-spacing             normal                     正常显示
                                长度                         文本间隔
word-spacing             normal                     正常显示
                                数字                         单词间距
white-space               normal                     文本自动处理换行
                                pre                          换行和空白受保护
                                nowrap                    强制在同一行显示
text-align                  left                          文字靠左
                                right                        文字靠右
                                center                     文字靠中
            justify                     两端对齐
text-decoration          none                       正常显示
                                underline                 加上下划线
                                overline                   加顶线
                                line-through             加删除线
text-indent                长度/百分比               首行缩进
line-height                 像素/数字/百分比         行高
text-space                 pre-wrap                  保留空白符、换行符、自动换行
                                pre-line                    保留换行符、自动换行、合并空白符
text-transform           none                       正常显示可以包含大,小字符
                                capitalize                  字符串第一个字符大写
                                uppercase                设置大写字符
                                lowercase                 设置小写字符
vertical-align              sub                          设置文字为下标。
                                super                       设置文字为上标。
                                top                          元件往上端靠齐。
                                middle                      设置文字是在中线位置。
                                bottom                     元件往下端靠齐。

单行显示,省略结尾:overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

背景
属性名称                             属性值                       说明
background-attachment      scroll                        设置背景图像会随视窗滚动条的移动而移动。
                                        fixed                         设置背景图像不会随视窗滚动条的移动而移动。
background-color               十六/英文/三原色          颜色
                                        transparent               透明
background-image              URL                          背景图片//background-image:url("bg.jpg")
                                        none                         不设置背景图片
background-position           top left/像素/百分比     设置背景图案出现方位。
background-repeat             repeat                       将背景图案填满整个背景。
                                        repeat-x                    将背景图案在水平方向添满。
                                        repeat-y                    将背景图案在垂直方向添满。
                                        no-repeat                  图案只出现一次。
背景图案简化方案:background:颜色 背景图片 repeat attachment position
列表的使用
属性名称                             属性值                        说明
list-style-type                    none                          无符号
                                        disc                           实体的小圆点。
                                        circle                         空心的小圆点。
                                        square                      实心的小方块。
                                        decimal                     1,2,3...
                                        lower-roman              i,ii,iii...
                                        upper-roman             I,II,III...
                                        lower-alpha               a,b,c,d,e...
                                        upper-alpha              A,B,C,D,E...
list-style-position                inside                       清单项目较往右移。
                                         outside                    清单项目正常显示。
list-style-image                   URL                          list-style-image:url(img.gif)
                                        none                         不会显示任何图象
清单的简化设置:list-style:circle inside url

边框
属性名称                            属性值                         说明
border-color                      十六/英文/三原色           颜色//border-color:red green blue(上为红色、左右为绿色、下为蓝色)
border-style                      none                          不显示边线
                                        dotted                       点线
                                       dashed                        虚线
                                        solid                           实线
                                        double                        双线
border-width                     长度                            border-width:0.2cm 0.3cm 0.4cm 0.5cm;border-width:1 2 3 4;
简化方案:border:形态 长度 颜色    例如 border:1px solid black;
边界
padding
属性名称                             属性值                         说明
padding-bottom                 长度/百分比                   元件下端边线的空隙
padding-left                       长度/百分比                   元件左端边线的空隙
padding-right                     长度/百分比                   元件右端边线的空隙
padding-top                      长度/百分比                    元件上端边线的空隙
margin
属性名称                             属性值                          说明
margin-bottom                   auto                            自动调整空隙
                                        长度/百分比                    设置下端空隙
margin-left                         auto                            自动调整空隙
                                        长度/百分比                    设置左端空隙
margin-right                      auto                             自动调整空隙
                                        长度/百分比                    设置右端空隙
margin-top                        auto                             自动调整空隙
                                        长度/百分比                    设置上端空隙

区块
属性名称                            属性值                            说明
width                               像素/百分比/auto              区块的宽度
height                              像素/百分比/auto              区块的高度
min-height                        像素/百分比/auto              区块最小高度
max-height                      像素/百分比/auto               区块最大高度
min-width                        像素/百分比/auto                区块最小宽度
max-width                       像素/百分比/auto               区块最大宽度
浮动
属性名称                            属性值                             说明
float                                 none                              正常显示
                                       left                                 左浮动
                                       right                               右浮动
clear                                 none                              允许两边浮动
                                       left                                 不允许左边浮动
                                       right                               不允许右边浮动
                                       both                               不允许两边浮动
定位
属性名称                            属性值                             说明
position                            relative                            设置区块基准点为左上角
                                       absolute                          设置网页的为基准点左上角
                                       static                               无设置
z-index                             auto                                自动调整高度
                                       数字                                 数字越大越往上层
溢出
属性名称                            属性值                             说明
overflow                           visible                             不剪切内容也不添加滚动条
                                       auto                               在必需时对象内容才会被裁切或显示滚动条
                                       hidden                           不显示超过对象尺寸的内容
                                       scroll/overflow-x/overflow-y  总是显示滚动条
滚动条
属性名称                              属性值                            说明
scrollbar-3dlight-color          颜色/十六进制                   滚动条亮边框
scrollbar-highlight-color        颜色/十六进制                   滚动条 3D 界面亮边
scrollbar-face-color              颜色/十六进制                    滚动条 3D 表面
scrollbar-arrow-color           颜色/十六进制                    滚动条方向箭头
scrollbar-shadow-color        颜色/十六进制                     滚动条 3D 暗边
scrollbar-darkshadow-color   颜色/十六进制                    滚动条暗边框
scrollbar-base-color             颜色/十六进制                    滚动条基准颜色
scrollbar-track-color             颜色/十六进制                    滚动条的拖动区域

超链接伪类
a:link             表示该超链接文字尚未被点选
a:visited        表示该超链接文字已被点选过
a:active         表示该超链接文字正被点选,但未被放开
a:hover         表示当鼠标停留在文字上

光标
属性名称                             属性值                          说明
cursor                               auto                            光标是手指
                                        crosshair                      光标是十子形
                                        default                         光标是箭头
                                        hand/pointer                 光标是手形
                                        move                            光标是移动的符号
                                        text                             输入文字的符号
                                        wait                             漏斗
                                        help                              帮助
缩放
属性名称                            属性值                             说明
zoom                               normal                            使用对象的实际尺寸
                                       百分数/浮点实数                 放大缩小

CSS

标签:help   air   scrollbar   换行符   man   z-index   ase   背景图片   min   

原文地址:http://www.cnblogs.com/sctnl/p/6018014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!