深圳网站建设论坛

注册

 

发新话题 回复该文章列表

网站设计中常见的几种CSS样式的类型

1#
在网站设计技术中,DIV+CSS是目前最流行也是最实用的一种网页的布局方法。与传统中通过表格布局定位的方式不同,它可以实现网页页面内容与表现相分离。另外,在网站优化的优势方面,也深得大多数站长的喜爱。本文,深圳网站建设公司易捷网科技要总结的是CSS样式的类型。
据网站设计技术团队【云卓动力科技】技术小王介绍,一般CSS 样式可分为不同的类型,其中常用的样式类型主要有3种,即HTML标记样式、类样式与伪类样式。
1.HTML标记样式
HTML标记样式用于重定义HTML标记的格式。对于HTML中的各种标记,如 P、TR、DIV、IMG、BODY 等,均可通过CSS样式定义为相应的格式。在创建或更改HTML标记样式后,页面中所有使用相应HTML标记的内容便具有与其对应的HTML标记样式所定义的格式,如下例所示:
BODY {font-size: 9pt; color: #000099; background-color: #ffffff;}
2.类样式
类样式又称为自定义样式,其选择符通常是以点号“.”开头的某个合法的标识符,如下例所示:
.center {text-align: center} /*文字居中*/
与HTML标记样式不同,类样式可根据需要应用于任意HTML标记或元素。为此,只需在HTML标记中通过class属性指定相应的类样式即可,如下例所示:
<H1 class=”center”>这个标题是居中排列的</H1>
<P class=”center”>这个段落也是居中排列的</P>
3.伪类样式
伪类样式是一种特殊的类样式,主要用于将某个HTML元素区分不同的种类,其基本格式为:
选择符:伪类{属性:值}
例如,通过伪类样式,可将链接区分为一般的链接(Ank)、已被访问的链接(A:visited)、已被选中的链接(A:active)与鼠标指向时的链接(A:hover),并分别进行定义,如下例所示:
Ank {font-size: 9pt; text-decoration: underline; color: blue}
A:visited {font-size: 9pt; text-decoration: none; color: green}
A:active {font-size: 9pt; text-decoration: none; color: red}
A:hover {font-size: 9pt; text-decoration: underline; color: red}
需要注意的是,伪类样式能自动地被支持CSS的浏览器所识别,因此无须使用HTML标记的class属性加以指定。
企业网站建设公司-易捷网络科技
企业网站推广优化-易捷网络科技
企业邮箱申请购买-易捷网络科技
域名空间申请备案-易捷网络科技
2#

外部:在head内加<link rel="stylesheet" href="xxx.css" type="text/css" />
内部:在head内加<style type="text/css">css代码</style>
内联:在标签内加style,如<div style="font-size:14px; colorFF0000;">
<div id="demo">
<div class="inner">
<p><a href="#">链接</a></p>
<p><input type="checkbox" name="" id="" /></p>
</div>
</div>
class 选择器 .inner{ width:100px;}
id 选择器 #demo{ width:100px;}
标签 选择器 p{ width:100px;}
后代选择器 p a{ color: #f60;}
伪类选择器 a:hover{ color: #f00;}
伪元素选择器 a:after{ clear: both;}
属性选择器 input[type=checkbox]{ margin-left: 10px;}
css3选择器
由于ie的问题,比较常用的是前4种选择器。
发新话题 回复该文章列表
[Ctrl+Enter快速发布]
QQ在线咨询
网站建设
企业邮箱
域名申请
空间购买
推广优化
网站维护
网站备案
论坛制作