长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

Web前端:CSS知识点

  • 时间:2016-11-04 17:09
  • 发布:长沙web培训
  • 来源:web教程

长沙Web前端培训的老师这一期给大家讲CSS的知识点。

引入

<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                           使用对象的实际尺寸

百分数/浮点实数                放大缩小

了解详情请登陆长沙达内Web前端培训官网(cs.web.tedu.cn)!

上一篇:web:原生ajax基础
下一篇:Base64原理解析

马上预约三天免费体验课

姓名:

电话:

react与redux学习的整理

引用font awesome字体图标

Jquery获得当前标签的名称和标签属性

如何使用grunt压缩js文件

选择城市和中心
贵州省

广西省

海南省