CSS初步--定义和应用样式

来源：互联网发布：java内存泄露快速定位编辑：程序博客网时间：2024/06/06 02:42

定义和应用样式
CSS样式由一条或多条以分号隔开的样式声明组成，每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。
例如：background-color:grey; color:white。

1.使用元素内嵌方式：使用全局属性style将样式应用到具体的某些元素上去。例如：

<a title="测试内容" href="http://www.baidu.com" style="background-color:#d0d0d0;color:#0000ff;">百度</a><p>I like <span>some </span>apples.</p>

效果如下：
这里写图片描述

2.使用文档内嵌样式
相比较style属性，我们可以使用style元素定义文档内嵌样式，通过CSS选择器指示浏览器应用样式。例:

<html><head>    <title>hhhhfff</title>    <style type="text/css">        a{            background-color: #d0d0d0;            color: #0000ff;        }    </style></head><body><a title="测试内容" href="http://www.baidu.com">百度</a><p>I like <span>some </span>apples.</p></body></html>

效果和上面的一致。
在一个style元素中可以定义多条样式，例：

<html><head>    <title>hhhhfff</title>    <style type="text/css">        a{            background-color: #d0d0d0;            color: #0000ff;        }        span{            border: thin red solid;            padding: 10px;        }    </style></head><body><a title="测试内容" href="http://www.baidu.com">百度</a><p>I like <span>some </span>apples.</p></body></html>

效果如下:
这里写图片描述
可以看到a元素和span元素同时有了样式。

3.使用外部样式表
为了在每一个文档中避免重复定义相同的样式，我们可以创建一个独立的样式表文件。例如，我们可以将上面的样式放到名为test.css的文件中去:

 a{            background-color: #d0d0d0;            color: #0000ff;        }        span{            border: thin red solid;            padding: 10px;        }

然后在HTML文档就可以使用link元素将样式表导入，例:

<html><head>    <title>hhhhfff</title>    <link rel="stylesheet"  type="text/css" href="test.css"></link></head><body><a title="测试内容" href="http://www.baidu.com">百度</a><p>I like <span>some </span>apples.</p></body></html>

得到的效果仍旧和上面的效果一致。

文档只要使用link元素就可以链接想要的样式表，但是需要注意的是，如果不同样式表中使用了同样的选择器，那么这些样式表的导入顺序很重要，这种情况下得以应用的是后导入的样式。

1.从其他样式表导入样式
可以使用@import语句将样式从一个样式表导入另一个样式表。例如下面的combine.css:

@import "styles.css"span{    border:medium black dashed;    padding:10px;}

然后用link链接新的样式表:

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

可以看到的是，最后是combine.css的span起了作用:
这里写图片描述

2.声明样式表的字符编码
在CSS样式表中可以出现在@import语句之前的只有@charset语句，它用于声明样式表使用的字符编码，例如:

@charset "UTF-8";@import "styles.css";span{    border:medium black dashed;    padding:10px;}

0 0