Html 之div+css布局之css基礎


Css是什么

        CSS即層疊樣式表(Cascading StyleSheet)。 在網頁制作時采用層疊樣式表技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。 只要對相應的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的升級版本,CSS3語言開發是朝着模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進來。這些模塊包括: 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等  From baidu

        當前文章主要描述css 樣式的一些基本的,最新版本的大家可自行拋磚引玉。

讓我來看下面Html代碼 來簡單了解下css 

     

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        
        </style>
        <script type="text/javascript">
            
        </script>
    </head>

    <body style="background-color: yellow">
    <div style="width: 400px; height: 200px; border: 1px solid red;">
    這是一個div 元素,顯式的區域,使用的是行內樣式
    </div>
    </body>

</html>

  執行效果如圖: 

 

可以看到 整個頁面 背景色為黃色,div 塊 呈現了 紅色邊框

不難看出,樣式都是以 style="" 嵌套在 html 標記之中的。

CSS屬性大全

      點擊此處查看 

 

使用方法,都是以 style="" 嵌套在 標記之中,   屬性名:屬性值,多個屬性之間以;分號來 分割。

例如:

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        
        </style>
        <script type="text/javascript">
            
        </script>
    </head>

    <body style="background-color: yellow">
    <div style="width: 400px; height: 200px; border: 1px solid red;font-size: 23px; color: blue; text-indent: 2em;">
    這是一個div 元素,顯式的區域,使用的是行內樣式
    </div>
    <p style="border:10px dotted red;">測試文本信息 </p>
    </body>

</html>
View Code

 

結果如圖:

 

 

好了,這篇文章就描述了基本的 css 的一些基礎的 字體  邊框  背景 樣式屬性,感興趣的可以去試試其它相關屬性,便於對這些屬性有一個基本的認識與了解。

下篇文章將會描述css 選擇器, css 作用優先級 ,以及css 一些基本的命名規范。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM