当前位置: 代码迷 >> HTML/CSS >> CSS式样设计
  详细解决方案

CSS式样设计

热度:383   发布时间:2013-10-12 11:54:02.0
CSS样式设计




css样式对于前台界面的设计和布局都是很重要的,作为一个很好的工具,在应用开发的重要性言而喻。


 

基本概念


首先了解什么是css,全称Cascading style sheet,翻译为级联样式表。主要的工作就是控制网页上的元素,将


样式信息与网页内容分离。


选择器

选择器分为:标记选择器、类别选择器、ID选择器。我们直接看小demon


标记选择器


el:h1{color:red}将标题设置为红色。


类别选择器


.test{color:red}将类别为test的元素颜色设为红色。


ID选择器


#testID{color:red}IDtestID的元素颜色设置为红色。


使用

组合


嵌套就是能够同时对这一组的标签元素进行设置样式


El: test1.test2.test3{color:red}这样能够统一对这三个标签的元素的进行设置


继承


就是内部标签的样式能够使用外部标签的样式,同一设置将会覆盖。这样可以增大代码的重用性,


但是在某个场合下随着业务的增多。继承就显得很麻烦,这时候用组合可以试试。


总之,在具体的情况组合和继承配合使用就能够起到很好的效果。


设置


版式


页面都需要一定的版式才能够使整个页面看起来相对较为协调,这样好的版式就能够在整体上控制布



局。大致分为#container#banner#footer#link#content

基本元素

html页面上元素无非有文字、图片、表单、链接、菜单

图文

这里将图片和文字放到一起,因为在css样式的设置需要上大致相同。文字中常用的样式设置:


顶端对齐


Vertical-aligntop;


首字下沉


<p> <span>首字</span></p>

css样式

Span{

Float:left;

Font-size:45px;

Font-family:黑体;

Margin:0px;

Padding-right:4px;

}


就不一一列举,这些不需要去死记硬背,只需要在使用的过程中多多熟悉,实在记不起去查查就可


以了。


图片常用有,都类似


边框


Img .test(图片类别名)

{

Boder-style:dotted;点画线

Border-color:red;

Border-width:4px;

或者

Boder:dotted red 4px;

}


缩放


Img .test{

Width:50%;为屏幕宽度的一半(相对,随屏幕变化)

或者

Width:40px;绝对大小

}


对齐


Img .test{

Vertical-align:bottom;

}


图文混排


文字环绕img{

Float:left

}


表单、格


表格和表单在页面的布局上都非常重要,表单<form></form>.表格也可以用来控制控件的位置等


等。表格常用的标签


<table>(表格)

<tr>(列)

<th></th>(行)

<td></td>(单元格)

</tr>

</table>


链接

常用的链接效果


正常状态下的样式设置


a:link{

Color:#005799;   深蓝

Text-decoration:none;   无下划线

}


访问过的超链接


a:visited{

Color:#00000;              黑色

Text-decoration:none;                无下划线

}


a:hover{

Color:#FFFF00;              黄色

Text-decoration:underline;        下划线

}


这些都是基本的链接设置,也是通过很基本的颜色或者其他的改变来显示的效果

滤镜

滤镜就是一些对图像的特殊效果的处理,用过ps的朋友都知道在ps中,有很多关于滤镜的使用。在css


中也有,只不过只有在IE能解析显示。


常用滤镜


Alpha通道


el

.alpha{

           //将图片透明设为50%

Filter:alpha(opacity=50);

}

<img src="图片路径" border="0" class="alpha">

 

blur(模糊


el

.blur{

//pixelradius=值;用来设置模糊的程度

Filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makesshadow=false);

}

<img src="图片路径" border="0" class="blur">


透明色


el

filter:chroma(color=希望在图片去掉的颜色);


遮罩


el

filter:mask(color=希望在图片去掉的颜色);


波浪


el

filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);

盒子模型


上图是标准的盒子模型,其实我的建议是不要去记这些东西。只要简单了解一下就可以了,我更喜欢


的是利用firefox浏览器的firebug插件来手动更改调试非常方便。firebug的使用,大家可以参照这个,去


亲身体验一下,很好玩。


与其他语言的结合


javascript


大家都知道javascript是一本脚本语言。至于什么是脚本语言、为什么是javascript脚本语言、为


什么叫javascript?我打算在下一篇说说我的理解,呵呵,有意思了啊!这里怎么去利用javascript来使用css


大家直接来看一个实例


var a=5b=6

alert(a>b?"调用01.css");


大家看到在javascript中声明两个变量,通过一个三目运算符来决定是否调用css样式,从而改变标签的样


式。


xmlajax


<?xml-stylesheet type="text/css"href="14-6.css"  >xml直接引用某个css文件。


据说可以异步数据,还有自由拖动模块等等。非常好玩的应用,哎呀,还是要继续学习啊。


 

 

总结:css就是一个用来设计界面元素样式的工具,相对于高级语言来说。只能是一种脚本语言,根据各个


浏览器的不同解析的效果也是不一样的。所以具体的应用还是大家要针对不同的浏览器进行调试和实践。


对于一些基本的语法和规则熟悉一下就可以了,更多的还是实践。


  相关解决方案