什么是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文件里面可以有很多内部样式，因此关于同内部样式的优先级也有很多说法，这将在我们的下一篇博客里说明。

CSS1 初入CSS