当前位置 : 首页 » 文章分类 :  开发  »  CSS-基础

CSS-基础

[TOC]


如何使用CSS样式

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

层叠次序

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,从1到4优先级逐渐提高,内联样式拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。


CSS基础语法

CSS规则由两个主要的部分构成:选择器,以及一条或多条声明,每个声明的格式为:属性名:属性值。
语法:selector {property: value; ...; property: value; }
使用花括号来包围声明,每条声明以分号”;”结尾。
例如:
h1 {color:red; font-size:14px;}
上面代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

错误声明会被自动忽略

如果在一个声明中使用了不正确的属性值,或者不正确的属性,则该条声明会被忽略掉。
举个不正确的例子:

p { 
    background-color: red
    font-family: 黑体;
    wordsize: 20px;
    float: left;
}

上面的例子第一条声明漏掉了分号,以上声明块会被解析为:

p {  
    background-color: red font-family: 黑体;
    wordsize: 20px;
    float: left;  
}

“red font-family: 黑体” 整个会被解析为background-color的属性值,这当然不是一个合法的属性值,该条声明将会被忽略掉。另外第二条声明使用了不正确的属性名wordsize,该条声明也将会忽略掉,结果只会正确处理第三条声明,等价于:

p {float: left;}

值为多个词要加引号

如果值为若干单词,则要给值加引号:
p {font-family: "sans serif";}

多重声明用分号分隔

如果要定义不止一个声明,则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样:
p {text-align:center; color:red;}
你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小写

大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
}

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

颜色值的不同写法

除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000
p { color: #ff0000; }
为了节约字节,我们可以使用 CSS 的缩写形式:
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。


其他

float属性

定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" alt="提示语"><br/>Markdown Logo</div>
<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" alt="提示语"><br/>Markdown Logo</div>
<div style="clear:both;"></div>

提示语
Markdown Logo

提示语
Markdown Logo


使用完float:left后必须clear:both来清楚float<div style="clear:both;"></div>,否则后续的内容还会继续浮动到前一行


上一篇 2017年第二季度运动记录

下一篇 Java-反射

阅读
1,678
阅读预计6分钟
创建日期 2017-03-25
修改日期 2017-10-12
类别
百度推荐