网站美化常见CSS

时间:2020-12-11 12:11:50

伴随网络时代日新月异的发展,用户不仅仅满足于软件系统的功能需求,对软件系统的页面显示效果以及交互模式的要求也逐渐提高。尤其是展示性质的平台页面对于界面美化效果要求更高,有一句话说的好:Html是结构,CSS是装饰,JS是胶水(动态设定CSS)。今天我们来介绍一些网站美化常见的CSS样式以及处理手法。

1  基础教程

1.1 基础语法

选择器

选择器通常为需要改变样式的元素;

1) 元素选择器 :例如:html {color:red;} 说明:将html设置为红色

2) 类选择器:例如:.ul .li{ color:red;} 说明:将ul于li标签设置为红色

3) ID选择器:例如:#member{font-weight:bold;} 说明:将id为member的标签属性的字体加粗

4) 属性选择器:例如:a[href][title]{color:red;} 说明:将同时拥有href以及title的a标签的文本设置为红色

一条/多条声明

每条声明由一个属性和一个值组成;

例如:h1 {color:red; font-size:14px;};

说明:其中h1 是选择器,color 和 font-size 是属性,red 和 14px 是值;本例子是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

1.2 伪类说明

Anchor(锚)伪类

例如:a:link {color:#FF0000;} 说明:将未访问的链接设置为红色

例如:a:visited {color:#00FF00;} 说明:已访问的链接设置为绿色

例如:a:hover {color:#FF00FF;} 说明:当鼠标划过链接设置为紫色

例如:a:active {color:#0000FF;} 说明:已选中的链接设置为蓝色

注意:a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的;a:active 必须被置于 a:hover 之后,才是有效的;且伪类的名称不区分大小写。

first - child伪类

first-child 伪类来选择元素的第一个子元素

例如:p:first-child 说明:选择器匹配作为p元素的第一个子元素的

例如:p > i:first-child 说明: 选择相匹配的所有

元素的第一个 元素:

例如:p:first-child i 说明:选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素

1.3 层次级别

优先级

1) 相同权值

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)

2) 权值不同

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

例如:

网站美化常见CSS

注意:在网站设置样式是有一些特殊情况可以用importal来解决 如:

P{color:red !important;} important是一个优先级样式权值最高

强层次

Div > ul >li > p 使用“>”指定 div下的ul下的li下的p标签 只有页面层次关系满足当前层次要求是才会被应用样式,可以理解为java中的equals

弱层次

Div ul li p 是“空格”指定 在div下包含的ul,li,p标签的均会引用该样式,不是强制要求定义格式循序,可以理解为java中的模糊查询

2  样式扩充

2.1 背景填充

常用属性:

例如:background-image 说明:添加背景图片

样例:background-image:url('paper.gif');

网站美化常见CSS

演示效果:

网站美化常见CSS

例如:background-size 说明:指定背景图像的大小

样例:background-size:80px 60px;

网站美化常见CSS

网站美化常见CSS

演示效果:

网站美化常见CSS

例如:background-origin 说明:属性指定了背景图像的位置区域

网站美化常见CSS

注意:content-box, padding-box,和 border-box区域内可以放置背景图像。

样例:background-origin:content-box;

网站美化常见CSS

网站美化常见CSS

网站美化常见CSS

演示效果:

网站美化常见CSS

2.2 按钮样式

按钮颜色

样例代码:

网站美化常见CSS

演示效果:

网站美化常见CSS

圆角按钮

样例代码:

网站美化常见CSS

演示效果:

网站美化常见CSS

鼠标悬停

注意:transition-duration 属性可以设置 "hover" 效果的速度

样例代码:

网站美化常见CSS

演示效果:

网站美化常见CSS网站美化常见CSS

按钮阴影

样例代码:

网站美化常见CSS

演示效果:

网站美化常见CSS

2.3 圆角处理

属性说明

网站美化常见CSS

样例代码:

网站美化常见CSS

演示效果:

网站美化常见CSS

2.4 常用样式

 网站美化常见CSS

3  页面布局

3.1 Table布局

优点

1) 简单易用:比较适合初学者 。

2) 可读性好:语句编写较为简便,主要代码就是<TABLE></TABLE>、<TR></TR>、<TD></TD>等语句。

3) 开发速度较快:可以利用工具 DW中直接拖入TABLE比编写DIV要快速很多。

缺点:

1) 代码冗余:< /TABLE>这是构成一个表格的最基本元素(此为一行一列的表格),相对

编写来说,代码繁多。

2) 网页打开速度较慢:后台代码太多,导致网站打开速度慢。

3.2 Div+CSS布局

优点:

1) 代码简洁:

较TABLE来说代码精简许多。

2) 速度较快: 对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。

3) 布局灵活:DIV+CSS使得页面布局方便操作灵活,改版时只需改CSS样式即可实现页面重新布局,而不用改动程序,从而降低了网站改版的成本。页面效果丰富,包括视觉效果和用户体验比如拖拉。

缺点:

1) 可读性差:用户在编辑的时候并不能立即看到编辑效果,需要预览才可看到。

2) 操作繁琐:相对于初学者或是对代码不是很了解的人来说,操作起来很是麻烦。

3.3 Div+Table布局

对于前端新手来说想让页面布局工整通常会采用table来进行布局,但这样控制CSS样式又不如div版式灵活,所以我们综合两者页面布局采用Div+Table进行页面排版这样可以灵活的设置样式,也避免了完全用CSS控制页面工整换行对齐等布局控制上的繁琐。

4  动态样式

在现有的网站显示仅限于CSS的静态控制样式显示,更多的是CSS与JS结合动态控制页面显示样式,下面我们通过一个例子来简要说明CSS与JS结合的精妙之处。

CSS 代码:

网站美化常见CSS

JS代码:

网站美化常见CSS

HTML代码:

网站美化常见CSS

演示效果:

网站美化常见CSS

点击按钮添加CSS后

网站美化常见CSS

5  个人总结

笔者作为一名软件项目开发人员之前也是一直注重于软件的功能性,并不注重效果展示,但对于软件使用人员来说第一接触的就是界面,尤其是面向最终用户的网站,交互界面是第一感观,笔者作为一名初步接触前端CSS与JS样式控制显示的小白总结此篇文章与大家分享,如果有更多的交流欢迎加入数通畅联官方QQ群(299719843)中一起探讨,也可以百度查找数通畅联了解更多相关信息。