CSS

2018-06-24 00:36:15来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

引入

<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 保留空白符、换行符、自动换行
text-transform

pre-line 

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

none

背景图片//background-image:url("bg.jpg")

不设置背景图片

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 

lower-roman

upper-roman

lower-alpha

upper-alpha

无符号

实体的小圆点

空心的小圆点

实心的小方块

1,2,3...

i,ii,iii...

I,II,III...

a,b,c,d,e...

A,B,C,D,E...

list-style-position

inside 

outside

清单项目较往右移

清单项目正常显示

list-style-image

URL

none

list-style-image:url(img.gif)

不会显示任何图象

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

清单的简化设置: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   

百分数/浮点实数 

使用对象的实际尺寸

放大缩小


                                                       
                                                        
                                                       

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Flex 弹性布局

下一篇:css 清除浮动