当前位置: 首页 > CSS+DIV > 正文

CSS+DIV知识

对于一个网页设计者来说,对HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页美观、大方,并且升级方便,维护轻松,那么仅仅知道HTML语言是不够的,CSS在这中间扮演着重要的角色。

CSS(Cascading Style Sheet),中文译为层叠样式表,它是用于控制网页样式并允许将样式信息与网页内容人、分离的一种标记性语言。简单地说,CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。

1、浏览器与CSS

网上的浏览器各式各样,绝大多数浏览器对CSS都有很好的支持,因此设计者往往不用担心其设计的CSS文件不被用户所支持。但目前主要的问题在于,各个浏览器之间对CSS很多细节的处理上存在差异,但比较幸运的是,出现各个浏览器效果上的差异,主要是因为各个浏览器对CSS样式默认值的设置不同,因此可以通过对CSS文件各个细节的严格编写,使得各个浏览器之间达到基本相同的效果。

使用CSS制作网页,一个基础的要求就是主流的浏览器显示效果要基本一致。通常的做法是一边编写HTML和CSS代码,一边在两个不同的浏览器上进行预览,及时地调整各个细节,这对深入掌握CSS也是很有好处的。

2、CSS控制方式

一、行内样式

行内样式是所有样式方法中最为直接的一种。

1
<p style="color: #ff0000; font-size: 20px;">正文内容1</p>

行内样式是最为简单的CSS使用方法,但由于需要为每一个标记设置style属性,后期维护成本依然很高,而且见面容易过胖,因此不推荐使用。

二、内嵌式

内嵌样式表就是将CSS写在<head>与</head>之间,并且用<style>和</style>标记进行声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*-- head部分 --*/

<style type="text/css"><!--
/* 上一行避免老式浏览器不支持CSS */
p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:25px;
}
--></style>/*-- body部分 --*/

紫色、粗体、下划线、25px的效果1

紫色、粗体、下划线、25px的效果2

紫色、粗体、下划线、25px的效果3

内嵌式将所有CSS代码部分被集中在了同一个区域,方便了后期的维护,页面本身也大大瘦身。但如果是一个网站,拥有很多的页面,对于不同页面上的

标记都希望采用同样的风格时,内嵌式的方法就显得略微麻烦,维护成本也不低。因此仅适用于对特殊的页面设置单独的样式风格。

三、链接式

链接式CSS样式表是使用频率最高,也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件,实现了页面框架HTML代码与美工CSS代码的完全分离。

1
2
3
4
5
6
7
/*-- head部分 --*/

    <link href="1.css" rel="stylesheet" type="text/css" /> /*-- body部分 --*/
<h2>CSS标题1</h2>
紫色、粗体、下划线、25px的效果1
<h2>CSS标题2</h2>
紫色、粗体、下划线、25px的效果2

然后创建文件1.css

1
2
3
4
5
6
7
8
9
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}

这三种方法如果同时运用到同一个HTML文件的同一个标记上时,将会出现优先级的问题。经过测试,可以判断出行内样式的优先级最高,其次是位于<style>和</style>之间的内嵌式,再次是采用<link>标记的链接式。

3、CSS的注释

编写CSS代码与编写其他的程序一样,养成良好的写注释习惯对于提高代码的可读性,以及减少日后维护的成本都非常的重要。在CSS中,注释的语句都位于” /* “与” */ “之间,其内容可以是单行也可以是多行。另外,在<style>和</style>之间常常会见到” <!– “和” –> “将所有的CSS代码包含于其中,这是为了避免老式浏览器不支持CSS、将CSS代码直接显示在浏览器上而设置的HTML注释。

4、CSS选择器

一、标记选择器

一个HTML页面由很多不同的标记组成,而CSS标记选择器就是声明哪些标记采用哪种CSS样式。例如P、H1选择器等等。

1
2
3
4
5
6
h1{
color:#0000FF;
}
p{
color:#FF00FF;
}

二、类别选择器

如果标记选择器一旦声明,那么页面中所有的该标记都会相应地产生变化,这时仅依靠标记选择器是远远不够的,还需要引入类别(class)选择器。

1
2
3
4
5
6
7
8
9
/*-- head部分 --*/

<style type="text/css"><!--
.one{
    color:red;          /* 红色 */
    font-size:18px;     /* 文字大小 */
}
--></style>/*-- body部分 --*/
<p class="one">class选择器1</p>

在HTML的标记中,还可以同时给一个标记运用多个class类别选择器,从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用,可以适当减少代码的长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*-- head部分 --*/

<style type="text/css"><!--
.one{
    color:blue;     /* 颜色 */
}
.two{
    font-size:22px; /* 字体大小 */
}
--></style>/*-- body部分 --*/

一种都不使用
<p class="one">同时使用两种class,只使用第一种</p>
<p class="two">同时使用两种class,只使用第二种</p>
<p class="one two">同时使用两种class,同时使用</p>
一种都不使用

三、ID选择器

ID选择器的使用方法跟class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强。

1
2
3
4
5
6
7
8
/*-- head部分 --*/

<style type="text/css"><!--
#one{
    font-weight:bold;       /* 粗体 */
}
--></style>/*-- body部分 --*/
<p id="one">ID选择器1</p>

虽然在很多浏览器下,ID选择器也可以用于多个标记,但这里需要指出的是,将ID选择器用于多个标记是错误的,因为每个标记定义的ID不只是CSS可以调用,JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同ID的标记,那么将会导致JavaScript在查找ID时出错。

5、集体声明

在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用集体声明的方法。

1
2
3
4
5
6
<style type="text/css"><!--
h1, h2, h3, h4, h5, p{          /* 集体声明 */
    color:purple;               /* 文字颜色 */
    font-size:15px;             /* 字体大小 */
}
--></style>

全局声明

1
2
3
4
5
6
<style type="text/css"><!--
*{                              /* 全局声明 */
    color: purple;              /* 文字颜色 */
    font-size:15px;             /* 字体大小 */
}
--></style>

选择器的嵌套

1
2
3
4
5
6
7
8
9
10
11
12
/*-- head部分 --*/

<style type="text/css"><!--
p b{                            /* 嵌套声明 */
    color:maroon;               /* 颜色 */
    text-decoration:underline;  /* 下划线 */
}
--></style>/*-- body部分 --*/

嵌套使<b>用CSS</b>标记的方法

嵌套之外的<b>标记</b>不生效

6、CSS的继承

CSS继承指的是子标记会继承父标记的所有样式风格,并可以在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格完全不会影响父标记。

7、CSS文字样式

字体:font-family

1
2
3
p{
font-family:Arial, Helvetica, sans-serif;
}

文字大小:font-size

文字颜色:color

文字粗细:<b>、<strong>、font-weight

斜体:font-style

文字的下划线、顶划线和删除线:text-decoration

段落的水平对齐方式:text-align

段落的水平对齐方式:vertical-align

行间距和字间距:line-height、letter-spacing

图片边框:border

背景色:background-color

8、CSS的核心元素

CSS中两个重要标记:<span>、<DIV>

<DIV>标记早在HTML3.0时代就已经出现,但那时并不常用,直到CSS的出现,才逐渐发挥出它的优势。而<span>标记直到HTML4.0时才被引入,它是专门针对样式表而设计的标记。

<DIV>与<span>的区别在于,<DIV>是一个块级元素,它包围的元素会自动换行。而<span>仅仅是一个行内元素,在它的前后不会换行。<span>没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就可以使用<span>元素。

此外,<span>标记可以包含于<DIV>标记之中,成为它的子元素,而反过来则不成立,即<span>标记不能包含<DIV>标记。

通常情况下,对于页面中大的区块使用<DIV>标记,而<span>标记仅仅用于需要单独设置样式风格的小元素,例如一个单词、一幅图片和一个超链接等。

所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。

一个盒子模型由:content(内容)、border(边框)、padding(间隙)和margin(间隔)这4个部分组成。

元素的定位:float、position、z-index

float定位

属性float的值很简单,可以设置为left、right或者默认值none。当设置了元素的向左或者向右浮动时,元素会向其父元素的左侧或右侧靠紧。

在CSS中可以通过设置块元素的clear属性,清除对float的影响,不再参与上一个块的混排,而是重新另起一段,在进行整个网页排版时,最下端的“脚注”部分通常就需要设置clear属性,从而消除正文部分各种排版方法对它的影响。

position定位

position定位与float一样,也是CSS排版中非常重要的概念。position从字面意思上看就是指定块的位置,即块相对于其父块的位置和相对于它自身应该在的位置。

position属性一共有4个值,分别为static、absolute、relative和fixed。其中static为默认值,它表示块保持原本应该在的位置上,即该值没有任何移动的效果。absolute表示绝对位置。

当将子块的position属性值设置为absotute时,子块已经不再从属于父块。

top、right、bottom和left这4个CSS属性,它们都是配合potition属性使用的,表示的是块的各个边界离页面边框(当position设置为absolute时)的距离,或各个边界离原来位置(position设置为relative)的距离。只有当position属性设置为absolute或者relative时才能生效。

当将块的position参数设置为relative时,与将其设置为absolute时完全不同,这时子块是相对于其父块进行定位的,同样配合top、right、bottom和left这4个属性来使用。

当将块的position参数设置为fixed时,本质上与将其设置为absolute一样,只不过块不随着浏览器的滚动条向上或者向下移动。

z-index空间位置

z-index属性用于调整定位时重叠块的上下位置,与它的名称一样,想像页面为x-y轴,垂直于页面的方向为z轴,z-index值大的页面位于其值小的上方。z-index属性的值为整数,可以是正数也可以是负数,当块设置了position属性时,该值便可设置各块之间的重叠高低关系。

更多内容请参考:w3cschool CSS教程CSS属性参考手册CSS3 教程W3C HTML

本文固定链接: http://www.ouchaoman.com/2013/11/21/css-div/ | 欧阳博客

该日志由 欧阳 于2013年11月21日发表在 CSS+DIV 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: CSS+DIV知识 | 欧阳博客
关键字:

CSS+DIV知识:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter