css属性大全(基础篇)

时间:2024-02-15 14:06:48
 
什么是CSS?

CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

CSS作用:
CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。

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

样式开始最常见的是*号,

这里的“*”号是通配符,即指,网页html中所有标签意思。在*定义的属性,一般是设置页面一些固定的属性,比喻,字体大小,也字体样式这种。

从边框说起:

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; 左边外延距离80
 
 
margin-right 对象右边外延边距 margin-right:80px; 右边外延距离80
 
 
margin-top 对象上边外延边距 margin-top:80px; 上边外延距离80px