网页设计少不了样式的渲染,以下是个人CSS样式代码的一些总结

一、文本样式设置

1、font-style:字体格式

2、font-weight:字体粗细

3、font-size: 字号大小

4、color:设置对应的颜色

二、超链接样式设置

下划线的设置:

1、 underline:为文字加下划线

2、 overline:为文字加上划线

3、 line-through: 为文字加删除线

4、 blink:使文字闪烁

5、 none:不显示上述任何效果

三、背景样式设置

1、background-color:参数  (设置背景颜色)

2、background-image:url(设置背景图片) 

3、background-repeat:参数 (背景图片的重复)

参数取值范围:

no-repeat:不重复平铺背景图片

repeat-x: 使图片只在水平方向上平铺

repeat-y:使图片只在垂直方向上屏幕

4、背景图片固定

背景图片固定控制背景图片是否随着网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定。

background-attachment:参数(参数可取范围:

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

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

四、区块样式

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:以下标的形式表示

5、text-align:缩进距离(文本缩进)

注:每12px相当于一个文字的距离

6、white-space:参数(空格)

normal 正常

pre 保留

nowrap 不换行

7、display:参数(显示样式)

参数可取范围:

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

inline:在对象前后都不换行

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

none:无显示

五、方框

height 高度

width 宽度

padding 内边距

margin 外边距

float(浮动):可以让块级元素在一行中排列,例如横向菜单。

clear 清除浮动

六、边框

1、样式

border-style:参数

边框样式的参数:

none:无边框

dotted:边框为点线

dashed:边框为长短线

solid:边框为实线

double:边框为双线

2、宽度

border-width:参数

3、颜色

border-color:参数

        

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐