2九、CSS

時間 2019-11-22

標籤 css 欄目 CSS 简体版

原文原文鏈接

CSS：頁面美化和佈局控制css

概念：層疊樣式表，多個樣式能夠做用在同一個html的元素上，同時生效html

好處：一、功能強大佈局

二、將內容展現和樣式控制分離，下降耦合度，讓分工協做更容易，提升開發效率字體

CSS的使用：CSS與html結合使用orm

一、內聯樣式：在標籤內使用style屬性指定CSS代碼htm

<div style="color: blue"> hello </div>

二、內部樣式：在head標籤內，定義style標籤，style標籤的標籤體內容就是css代碼資源

<style>
    div{
        color: blue;
    }
</style>

三、外部樣式：一、定義css資源文件開發

二、在head標籤內，定義link標籤，引入外部的資源文件it

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="DemoCSS.css">

</head>

注意：1，2，3中方式，css做用範圍愈來愈大class

1方式不經常使用，後期經常使用2，3

CSS的語法：

選擇器{

屬性名1:屬性值1；

屬性名2:屬性值2；

···

}

選擇器：篩選具備類似特徵的元素

注意：每一對屬性最後用；隔離，最後的能夠忽略

選擇器類型：

一、基本選擇器：id選擇器：選擇具體的id屬性值的元素，建議在一個html頁面中id值惟一

#id屬性值{}

<style>
    #div1{}
</style>

<div id="div1"> hello</div>

元素選擇器:選擇具備相同標籤名稱的元素

標籤名稱{}

<style>
    div{}
</style>

<div> hello</div>

類選擇器：選擇具備相同的class屬性值的元素

.class屬性值{}

注意：優先級順序：id>類 >元素

<style>
    .div{}
</style>

<div class="div"> hello</div>

二、擴展選擇器：全部元素選擇器：選擇全部元素

*{}

<style>
    *{}
</style>

並集選擇器：選擇多個選擇器

選擇器1，選擇器2{}

<style>
    div,p{}
</style>

<div class="div"> hello</div>
<p> </p>

子選擇器：選擇器1元素下的選擇器2元素

選擇器1 選擇器2{}

<style>
    div p{}
</style>

<div class="div"> <p>hello </p></div>

父選擇器：選擇器2的父元素選擇器

· 選擇器1>選擇器2{}

<style>
    p>div{}
</style>

<div class="div"> <p>hello </p></div>

屬性選擇器：選擇元素名稱，屬性名=屬性值的元素

元素名稱 [屬性名=「屬性值」]{}

<style>
    div[class=div]{
        color: blue;
    }
</style>

<div class="div"> <p>hello </p></div>

僞類選擇器：選擇一些元素具備的狀態

元素：狀態{}

<style>
    a:active{}
</style>

<a></a>

屬性：

一、字體、文本

font-size:字體大小

color：文本顏色

text-align：對齊方式

line-height：行高

二、背景

background

三、邊框

border

四、尺寸

width

height

五、盒子模型：控制佈局

margin：外邊距

padding：內邊距

注意：默認狀況下，內邊距會影響整個盒子的大小

box-sizing：：border-box；設置盒子屬性，，讓width和height就是最終盒子大小

float：浮動

left

right

<style>
    div{
        font-size: x-small;
        color: blue;
        text-align: center;
        line-height: normal;
        background: chartreuse;
        border: black;
        width: 100px;
        height: 200px;
        box-sizing: border-box;
        margin: 100px;
        padding: 20px;
    }
</style>

1. CSS：九宮格
2. css 九宮格
3. 智力扣（2）——九九扣
4. 九九乘法表--2
5. 2九、Jquery Ajax
6. css(2)
7. CSS-2
8. CSS - 2
9. 2.CSS
10. css 2
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• RxJava操作符（九）Connectable Observable Operators
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。