首页 > Web开发 > 详细

CSS Day04 css核心基础

时间:2016-03-02 09:31:33      阅读:169      评论:0      收藏:0      [点我收藏+]

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;width: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" />

 

CSS Day04 css核心基础

原文:http://www.cnblogs.com/kylyww/p/5233616.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!