CSS1 初入CSS
什么是CSS,CSS效果
1.什么是CSS。
CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素。
说白了就是为了让单调的html页面变得花里胡哨。
2.CSS的简单效果。
http://www.runoob.com/try/try.php?filename=trycss_default
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
在这
CSS可以在哪里出现?
1.内联式:最麻烦的一种,在定义每个标签的时候嵌入CSS元素
下面的代码把字体颜色变为褐色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
</body>
</html>
2.嵌入式:在html文件头部定义一种修饰html元素的CSS元素,这样可以批量处理html元素(在以后我们的练习中最常用的一种方法)
在头不用style标签对中的内容来匹配html元素,并且设置内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p
{
color:sienna;
margin-left:20px;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
3.外部式:把CSS元素提取出来,放到一个单独的文件里。
(1)在同一个文件夹下创建一个后缀为css的文件,css文件里像上面一样写样式。
(2)html文件里声明链接文件。
p
{
color:sienna;
margin-left:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="csstest.css">
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
4.关于不同的css样式的优先级
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
同一个html文件里面可以有很多内部样式,因此关于同内部样式的优先级也有很多说法,这将在我们的下一篇博客里说明。