CSS Day04 css核心基础

1.在HTML中引入CSS的方法

　　（1）行内式

　　　　行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。
　　　　例如：
　　　　　　　 <h1 style=“color:white; background-color:blue”>这是一行文本/h1>

　　　　例1：

1 <html>
2     <head>
3         <title>行内式</title>
4     </head>
5     <body>
6         <h2 style="text-align: center;background-color: red;color: #eeeeee;">这是行内式</h2>
7         <p style="text-align: center;background-color: blue;color: green;500px;height:200px;line-height:200px;">这是一个段落!</p>
8     </body>
9 </html>

　　（2）嵌入式
　　　　嵌入式将对页面中各种元素的设置写在<head></head>之间。
　　　　例如：
　　　　　　 <style type="text/css">
　　　　　　h1{
　　　　　　　　　　 color:white;
　　　　　　　　　　background-color:blue；
　　　　　　　 }
　　　　　　</style>

　　　　例2：

 1 <html>
 2     <head>
 3         <title>嵌入式</title>
 4         <style type="text/css">
 5             h2{
 6                 text-align: center;background-color: blue;color: green;
 7             }
 8             p{
 9                 text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;
10             }
11         
12         </style>
13     </head>
14     <body>
15         <h2>这是嵌入式</h2>
16         <p>这是一个段落!</p>
17     </body>
18 </html>

　　（3）导入式
　　　　　<style type="text/css">
　　　　　　　@import"mystyle.css";
　　　　　</style>

　　　例3： 1）

 1 <html>
 2     <head>
 3         <title>嵌入式</title>
 4         <style type="text/css">
 5             @import"mystyle.css";
 6         </style>
 7     </head>
 8     <body>
 9         <h2>这是嵌入式</h2>
10         <p>这是一个段落!</p>
11     </body>
12 </html>

　　　　　　2）

1 @charset "utf-8";
2 /*css*/
3     h2{
4         text-align: center;background-color: blue;color: green;
5         }
6     p {
7         text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;
8     }

　　（4）链接式
　　　　<link href="mystyle.css" rel="stylesheet" type="text/css" />

　　例：

 1 <html>
 2     <head>
 3         <title>链接式</title>
 4         <link href="mystyle.css" rel="stylesheet" type="text/css"/>
 5     </head>
 6     <body>
 7         <h2>这是链接式</h2>
 8         <p>链接式的段落！</p>
 9     </body>
10 </html>

　　mystyle.css


1 @charset "utf-8";
2 /*css*/
3 h2{background-color: red;color: blue;text-align: center;}
4 p{background-color: blue;color: red;text-align: center;width: 500px;height: 300px;line-height:300px;}