现在网站主流排版方式
CSS(Cascading Style Sheets)层叠样式表
直到现在为止,大部分网站仍使用css加div的方式进行排版,用html中的div标签划分区域,然后通过关联css文件的方式对指定区域的样式进行指定,这种做法的好处在于可以将网页的表示内容和显示样式分开,提高了网页的维护性,降低了日后维护的人力成本,维护者只需要修改相对应的css文件,就可以很容易的做到在不改变网页显示内容的前提下,对网页的部分分区进行样式的改动,不仅如此,采用关联css文件的方式,还可以在一定程度上增强网页的显示效果。
html与css结合的方式如下几种
1.html中为标签定义了style属性,可以在标签中加入style属性的方式,在style属性的值部分写入css代码,这种做法适合在html中对局部进行修改;
示例代码:
<p style=" color:#FFFFFF"> p标签段落内容。 </p>
2.html中还单独定义了style标签,通过在head标签中加入style标签的方式,可以对整个页面样式进行修改,但这种方式相对不够灵活;
示例代码:
<head> <style type=”text/css”> p { color:#FF0000;} </style> </head>
3.可以通过在style标签内 @import url(css文件地址)来关联html文件与指定的css文件
示例代码:
<style type="text/css"> @import url(css_3.css); div { color:#FF0000;} </style>
4.还可以通过link标签来关联两个文件
示例代码 </link rel="stylesheet" type="text/css" href="css_3.css" />
在css文件中,可以通过标签名后加大括号来对指定标签名内的内容进行样式的编辑,另外,可以在html中用class属性指定标签的类名,再通过标签名.类名加大括号的方式对指定标签名的指定类名的标签内容进行样式编辑,或者可以直接用.类名加大括号实现跨标签对相同类名的标签内容进行样式编辑,css中该部分代码称为类选择器,id选择器与类选择器类似,通过指定id属性,可以通过#加id名的方式进行css编辑,不同的是为了实现一些功能,id通常是唯一的;
为了使不同选择器实现相同样式,可以在指定选择器时用,隔开,另外可以通过标签名间加空格的方式,对指定标签中的指定嵌套标签内容进行样式编辑。
html中对一些组件实现定义好了一些状态,通过选择器可以针对这些状态进行样式编辑,如超链接标签有
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。
通过以上状态名定义选择器,就可以对超链接文字的四种状态进行样式编辑。
本博所有内容均为博主学习过程中的总结,如果有错误的地方欢迎大家指正。