Html 之div+css佈局之css基礎

時間 2019-12-02

標籤 html div+css div css 佈局基礎欄目 HTML 简体版

原文原文鏈接

Css是什麼

CSS即層疊樣式表（Cascading StyleSheet）。在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等 From baidujavascript

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

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

<!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>

執行效果如圖: java

能夠看到整個頁面背景色爲黃色，div 塊呈現了紅色邊框ide

不難看出，樣式都是以 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>