CSS 样式

拈花ヽ惹草 提交于 2020-01-25 16:30:03

 1,大小

宽度:           width:"100px/50%"                                                                                                                                                                                            

高度:           height:"100px"      实现高度100%   position:fixed;  配合使用

2,背景   【写在<head></head>之间  , <style type="text/css"> body{          }</style>里面】

背景色:                             background-color:red/#颜色代码;

背景图片:                       background-image:url(图片路径) ;

背景图的平铺方式:                  background-repeat:选择属性;

背景图片位置:                        background-position:(top/bottom/left/right);

设置背景图片是否滚动:              background-attachment:(选择属性); 

3,文字

字体样式:                                    font-family:宋体;
字体大小:                                     font-size:4px;             (一般在12px -14px之间)
倾斜:                                          font-style:italic;
加粗:                                         font-weight :bold;
划线:                                       text-decoration:underline(下划线)/overline(上划线)/line-through(删除线)/none(没有,用来去掉超链接的下划线);
字体颜色:                                 color:red/#颜色代码;
4,对齐

水平对齐:                             text-align:对齐属性;

垂直对齐:                            display:table-cell;加上vertical-align:对齐属性;              (两个必须一起才能实现对齐)

行高:                                    line-height:10px;                  (在只有一行文字,行高等于所在元素高度时,实现垂直居中)

文字缩进 :                                 text-indent:5px;              (对象为文本文字,为正值时对第一行操作相当于空格,空出单位像素。为负值时,向左隐藏单位距离的文本文字)

5,边距,边线

内边距:                                    padding-(top/bottom/left/right):10px;             (增加内边距,会相应的使所在元素的位置扩大)

外边距:                                    margin-(top/bottom/left/right):10px;                 (是两个元素之间出现间距,不改变元素大小)

边线粗细,线型,颜色:                border:1px solid(实线)  red/#元素代码;

6, 对有序列表/无序列表的处理

去掉内容前的序号/圆点 :               list-style:none;

将前面的序号/圆点变为图片            list-style-image:url(图片路径);

7,流式布局(流式布局实际上已经浮动,处于平面的上层)

左侧流式布局:               float:left;           

右侧流式布局:               float:right;

清除流式布局:                <div style="clear: both;"></div>                   (clear:both;是清除流布局,一般创建一个没有长宽高的层标签来清除流式布局)

8,分层

z-index分层:                     z-index:5555;                  (数值越大的,就是能看到的)

9,display

隐藏(用户看不到,不占位置):            diaplay:none;

显示(用户能看到):         display:block;

div宽度等于文字宽度:       display:inline-block;

10,visibility

隐藏:(用户看不到内容,但能看到位置):                 visibility:hidden;

显示:                                                                    visibility:visible;

11,超出范围内容(出现滚动条)

横向,纵向滚动条都显示:overflow:hidden;/overflow:auto;

只显示纵向滚动条:overflow-y:scroll;

只显示横向滚动条:overflow-x:scroll;

12,透明度

opacity:0.5;  -moz-opacity:0.5;   filter:alpha(opacity=50)  【数值越小,透明度越大】

13,圆角(将div棱角变成圆角)

 border-radius:5px;

14,阴影

box-shadow:0 0 5px white;               【第一个0光线方向正值从左侧来负值从右侧来,第二个0光线方向正值从上侧来负值从下面来,第三个5是虚化程度】

15,定位(写入position后可以用top/bottom/left/right来改变位置)

相对定位(占位置):position:relative;使元素作为常规元素出现,并且使position:absolute;在其中定位。用top/bottom/left/right来改变位置时,占据其他元素位置。

绝对定位(不占位置):position:absolute;单独使用后浮动,top/bottom/left/right来改变位置时,不占据其他元素位置。

固定在浏览器某个位置:position:fixed;

 

 

 

 

 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!