您的位置：首页 > Web前端 > CSS

初级CSS设计

2018-03-04 22:25 169 查看

一共有三种方法创建CSS

元素内嵌样式表

<a style='font-size: 40px'; color='#ff0000';>元素内嵌样式表</a>

<!DOCTYPE HTML>
<html>
<body>

<a>CSS简介</a>
<br />
<a style="font-size: 40px; color=#ffffff">CSS简介</a>

</body>
</html>

使用文档内嵌样式表

<style type='text/css'>
a {
font-size: 40px;
color: #ff0000;
}
</style>

文档内嵌样式表一般放在<head>里<html>

<head>
<style type="text/css">
h1 {color: red}
</style>
</head>

<body>
<h1>header 1</h1>
</body>

</html>

使用外部样式表

外部样式表需要创建一个新的css文档，引入至HTML文档方式如下：<link rel='stylesheet' type='text/css' href='CSS文档名.css'>CSS文档的内容格式： a {
font-size: 40px;
color: #ff0000;
}

使用<link>标签链接到一个外部样式表<html>

<head>
<link rel="stylesheet" type="text/css" href="http://www.w3school.com.cn/html/csstest1.css" >
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>

</html>

三者区别

如果想要设置多个<a>标签，并且想让他们的样式都一模一样的时候，使用文档内嵌样式表或者外部样式表更简洁
外部样式表可以控制多个HTML文件的样式，一般用来设置字体

层叠样式表层叠的含义

当同一个HTML元素被不止一个样式定义时，就涉及到层叠。
一般而言，所有的样式会根据以下规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于<head>标签内部）
4.内联样式（在HTML元素内部）
因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着他将优先于以下的样式声明：<head>标签中的样式声明，外部样式表的样式声明，或者浏览器中的样式声
4000
明（缺省值）。
级别一般有：4>3>2>1

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航