css属性大全

在初级学CSS样式的觉得好多,记不了那么多,结果我也整合了一份在开发中经常用上的。方便大家一起学习,与交流

从边框说起:

1.border:边框

边框样式的参数:

solid;/*边框为实线实线边框(常用)*/

none; /*无边框*/

dotted; /*边框为点线*/

dashed;/*边框为长短线*/

double;/*边框为双线*/

groove ;/*根据border-color的值画3D凹槽*/

ridge;/*根据border-color的值画菱形边框*/

inset; /*根据border-color的值画3D凹边*/

outset ;/*根据border-color的值画3D凸边*/

1.1、border四个边框
border-left设置左边框,一般单独设置左边框样式使用
border-right设置右边框,一般单独设置右边框样式使用
border-top设置上边框,一般单独设置上边框样式使用
border-bottom设置下边框

在开发中我们一般这样写CSS 边框,优化简写,常见对对象设置使用属性代码:border:1px solid #blue;。

2.背景属性: (background)

background /*颜色*/

background-image: url();/*背景图片*/

在开发中我们经常看到一些小图标,那样做法就是页面的减少请求,

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面。

在线合并网站:https://www.toptal.com/developers/css/sprite-generator

background-repeat: no-repeat;/*不重复平铺背景图片*/

repeat-x;/*使图片只在水平方向上平铺*/

repeat-y;/*使图片只在垂直方向上平铺*/

/*如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。*/

/*背景图片固定,背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览

器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定*/

background-attachment:参数

参数取值范围:

background-attachment: fixed;(固定)

scroll;(滚动)

background-position: left;(水平)

top(垂直);位置

fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动

scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动

3、超链接设置 text-decoration: 参数 主要用途是改变浏览器显示文字链接时的下划线。
参数取值范围: underline:为文字加下划线
overline:为文字加上划线
line-through:为文字加删除线
blink:使文字闪烁
none:不显示上述任何效果

CSS连接属性:

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标

cursor:鼠标形状参

CSS鼠标形状参数表:

cursor:hand手

cursor:crosshair十字形

cursor:text"文本形

cursor:wait沙漏形

cursor:move"十字箭头形:

cursor:help问号形

cursor:e-resize右箭头形

cursor:n-resize上箭头形

cursor:nw-resize左上箭头形

cursor:w-resize左箭头形

cursor:s-resize下箭头形

cursor:se-resize右下箭头形

cursor:sw-resize"左下箭头形

4.Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动

清除浮动 :clear:none|left|right|both

5.margin延伸(单独设置四边间距属性单词)简写写法:margin:上 右 下 左 (四个值)

margin-left对象左边外延边距 (margin-left:80px; 左边外延距离80px

margin-right对象右边外延边距 (margin-right:80px; 右边外延距离8

margin-top对象上边外延边距 (margin-top:80px; 上边外延距离80px)

margin-bottom对象下边外延边距 (margin-bottom:80px; 下边外延距离80px)

6.padding内补白(内边距)left right top bottom

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白*/

position绝对定位absolute relative 固定

7.字体属性

color:加上颜色

font-size:20px;/*每个浏览器默认的字体不一样的 谷歌的默认字体大小是16或者18*/

x-small:较小

small:小x-small:较小

small:小xx-small:最小

medium:正常(默认值)

large:大

x-large:较大

xx-large:最大

font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

line-height: normal;(正常)

line-height:50px;/*div的高度也是五十,这样你的内容结束平行居中*/

font-weight: bold;(粗体) , lighter;(细体) normal;(正常),设置数字也是可以的(100px,200px)

font-variant: small-caps;(小型大写字母) normal;(正常)

text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

随便举例几种字体:

font-family:"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

font-family:"Times New Roman",Times, serif; font-size:14px;

font-family:Arial,Helvetica,sans-serif;font-size:100%;

font-family:"微软雅黑","黑体","宋体";

font-family:arial, sans-serif; font-size:12px;

区块

单词间距

1.word-spacing:

间隔距离

2.字母间距

letter-spacing:

字母间距

3.文本对齐

text-align:

参数的取值:

left:左对齐

right:右对齐

center:居中对齐

justify:相对左右对齐

4、垂直对齐

vertical-align:

参数

top:顶对齐

bottom:底对齐

text-top:相对文本顶对齐

text-bottom:相对文本底对齐

baseline:基准线对齐

middle:中心对齐

sub:以下标的形式显示

super:以上标的形式显示

5、文本缩进

text-indent:缩进距离

12px相当于一个文字距离

6、空格

white-space:

参数

normal正常

pre保留

nowrap不换行

7、显示样式

display:

参数

参数取值范围:

block:块级元素,在对象前后都换行

inline:在对象前后都不换行

list-item:在对象前后都换行,增加了项目符号

none:无显示

8.text-overflow超出范围显示...

text-overflow参数值和解释:
clip : 不显示省略标记(...),而是简单的裁切
ellipsis: 当对象内文本溢出时显示省略标记(...)

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;


相关推荐