CSS常用代码

CSS常用代码目录1、边框border2、背景background3、圆角border-radius4、position定位5、阴影box-shadow6、display属性7、text-decoration:文本的修饰(下划线、上划线、删除线等)8、透明度opacity9、文本的对齐方式text-align10、浮动Float11、clear清除浮动12、光标…

目录

1、边框border

2、背景background

3、圆角border-radius

4、position定位

5、阴影box-shadow

6、display属性

7、text-decoration:文本的修饰(下划线、上划线、删除线等)

8、透明度opacity

9、文本的对齐方式text-align

10、浮动Float

11、clear清除浮动

 12、光标cursor

13、!important优先级 


1、边框border

虚线边框 border:1px dashed #000
实线边框 border:1px solid #000

2、背景background

单独写:
background-color:#fff;
background-image:url('img.png');
background-repeat:no-repeat;
background-position:right top;
合写:
background:#fff url('img.png') right top no-repeat;

3、圆角border-radius

一个值: border-radius: 25px;

CSS常用代码

 两个值:border-radius: 15px 50px

CSS常用代码

 三个值:border-radius: 15px 50px 30px

CSS常用代码

 四个值 -:border-radius: 15px 50px 30px 5px

CSS常用代码

4、position定位

static   静态定位
absolute 绝对定位
relative 相对定位
fixed    固定定位:相对于浏览器窗口定位,并且不会随着滚动条进行滚动。

5、阴影box-shadow

box-shadow:#ccc 0px 1px 1px;

6、display属性

none	       此元素不会被显示
block	       此元素将显示为块级元素,此元素前后会带有换行符
inline	       默认,此元素会被显示为内联元素,元素前后没有换行符
inline-block   行内块元素
inherit	       规定应该从父元素继承display属性的值

7、text-decoration:文本的修饰(下划线、上划线、删除线等)

text-decoration: none;                    /*没有文本装饰*/
text-decoration: underline red;           /*红色下划线*/
text-decoration: underline wavy red;      /*红色波浪形下划线*/
text-decoration:line-through              /*删除线样式-*/
text-decoration:overline                  /*上划线样式*/
text-decoration:blink                     /*闪烁*/

8、透明度opacity

filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;

9、文本的对齐方式text-align

text-align:center 居中对齐
text-align:left   向左对齐
text-align:right  向右对齐

10、浮动Float

描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

11、clear清除浮动

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

 12、光标cursor

描述
url

需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(北/西)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

13、!important优先级 

button{ width: 150px !important;} /*!important表示强制使用此样式*/

今天的文章CSS常用代码分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/8567.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注