CSS樣式表

CSS樣式表

• 樣式表由一到多個樣式規則構成
• 每個樣式規則有兩個部分：
  • 選擇器：給誰樣式
  • 樣式聲明：設置成什麼樣的樣式
• CSS樣式表特性
  • 繼承性：子元素可以從父元素繼承樣式
  • 層疊性：元素的樣式可以來自於多處，這些樣式不衝突，將全部生效
  • 優先級：元素的樣式可以來自於多處，這些樣式如果有衝突，優先級高的生效

選擇器

• 通用選擇器：使用*來設置默認的樣式
• 元素選擇器：html的標籤（元素）天然就是選擇器
• 類選擇器：實現分組功能，將具有相同class名稱的一組元素統一設置樣式。一個元素可以同時屬於多個class。如果class樣式衝突，後定義的樣式生效。
• 擁有某個class名的元素： 元素.類
• id選擇器：唯一性的選出某個元素
• 羣組選擇器：使用逗號將多個選擇器分開，統一設置樣式
• 僞類選擇器：常用於爲a標籤設置訪問前、鼠標懸停、訪問後的樣式

尺寸

• 顏色：使用rgb顏色。red / green / blue。每種顏色都使用1個字節，即8位2進製表示，轉換成10進制數是0～255，轉成16進制數是00~FF。某一顏色越亮相應的數值越大。

框模型

• 也叫盒子模型，用於確定某一元素在頁面中的大小
• 塊元素才能設置大小
• 一個（塊級）元素所佔頁面寬度是：元素寬度+左右內邊距+左右邊框+左右外邊距

bootstrap

• bootstrap是twitter公司開發的開源前端web框架

• 可以簡單的理解爲它是一個大樣式表。

• 中文官方站：http://bootcss.com

• 準備環境，將nsd1909班devweb/day02/目錄的static目錄拷貝到工作目錄

# ls static/
css  fonts  imgs  js
css->樣式表目錄
fonts->字體
imgs->圖片
js->javascript腳本

一、排版樣式

• Bootstrap 將全局 font-size 設置爲 14px,line-height 行高設置爲 1.428(即20px);p段落元素被設置等於 1/2 行高(即 10px);顏色被設置爲#333333。
• 標題元素大小
  • h1: 36px
  • h2: 30px
  • h3: 24px
  • h4: 18px
  • h5: 14px
  • h6: 12px
• 爲了統一，bootstrap還創建了h1到h6 class，樣式與標題元素一致
• 內聯文本元素，各種加線條的文本、強調的文本

<mark>達內雲計算 nsd1904</mark>
<del>達內雲計算 nsd1904</del>
<s>達內雲計算 nsd1904</s>
<ins>達內雲計算 nsd1904</ins>
<u>達內雲計算 nsd1904</u>
<small>達內雲計算 nsd1904</small>
<strong>達內雲計算 nsd1904</strong>
<em>達內雲計算 nsd1904</em>

• 對齊方式

<p class="text-center">達內雲計算 nsd1904</p>
<p class="text-left">達內雲計算 nsd1904</p>
<p class="text-right">達內雲計算 nsd1904</p>

• 顏色
  • danger: 危險紅
  • muted：柔和灰
  • primary：首要藍
  • info：信息藍
  • success：成功綠
  • warning：警告黃

<p class="text-center text-primary bg-warning">達內雲計算 nsd1904</p>
<p class="text-left text-danger bg-success">達內雲計算 nsd1904</p>
<p class="text-right text-muted bg-info">達內雲計算 nsd1904</p>

二、表格

<table class="table table-bordered table-striped table-hover">

三、按鈕

<input type="submit" value="查 詢"><br>
<input class="btn btn-default btn-sm" type="submit" value="查 詢"><br>
<input class="btn btn-primary" type="submit" value="查 詢"><br>
<input class="btn btn-info btn-lg" type="submit" value="查 詢"><br>
<input class="btn btn-warning" type="submit" value="查 詢"><br>
<input class="btn btn-success btn-xs" type="submit" value="查 詢"><br>
<input class="btn btn-danger" type="submit" value="查 詢"><br>
<input class="btn btn-primary btn-block" type="submit" value="查 詢"><br>
<input type="submit" value="查 詢"><br>

四、表單

• 爲了有很好的間距，應該把各個控件放到form-group中
• 每個文本類型的控件，放到form-control中

<form action="">
    <div class="form-group">
        <label>uname: </label><input class="form-control" type="text">
    </div>
    <div class="form-group">
        <label>upass: </label><input class="form-control" type="text">
    </div>
    <div class="form-group">
        <input class="btn btn-primary" type="submit">
    </div>
</form>

• 如果希望表單只佔一行，只要設置form的class

<form action="" class="form-inline">
    <div class="form-group">
        <label>uname: </label><input class="form-control" type="text">
    </div>
    <div class="form-group">
        <label>upass: </label><input class="form-control" type="text">
    </div>
    <div class="form-group">
        <input class="btn btn-primary" type="submit">
    </div>
</form>

五、圖片

<!-- 圓角矩形 -->
<img class="img-rounded" src="https://img01.sogoucdn.com/app/a/100520021/c0b43a061bdb06f3b983953f41e7e8d0">
<!-- 圓形 -->
<img class="img-circle" src="https://img01.sogoucdn.com/app/a/100520021/c0b43a061bdb06f3b983953f41e7e8d0">
<!-- 支持自動縮放 -->
<img class="img-thumbnail" src="https://img01.sogoucdn.com/app/a/100520021/c0b43a061bdb06f3b983953f41e7e8d0">

六、柵格系統

1. 實現頁面佈局

2. 佈局時，要求頁面所有的元素位於container中

3. container的直接子元素是row

4. row中的元素是col-xx-yy

5. 一個row最多支持12列。其中的col-xx-yy設置爲佔多少列

   1. col-lg-3表示大屏幕尺寸下，它佔3列
   2. col-md-4表示中等屏幕尺寸下，它佔4列
   3. col-sm-6表示小屏幕尺寸下，它佔6列

6. 還可以設置自適應屏幕大小

<div class="container">
    <div class="row">
        <div class="col-lg-3 bg-primary col-md-4 col-sm-6">
            雲計算<br>
            nsd 1904
        </div>
        <div class="col-lg-3 bg-danger col-md-4 col-sm-6">
            雲計算<br>
            nsd 1904
        </div>
        <div class="col-lg-3 bg-success col-md-4 col-sm-6">
            雲計算<br>
            nsd 1904
        </div>
        <div class="col-lg-3 bg-warning col-md-4 col-sm-6">
            雲計算<br>
            nsd 1904
        </div>
    </div>
</div>

七、導航

• 水平導航

<div class="container" style="margin-top: 10px">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

<div class="container" style="margin-top: 10px">
    <ul class="nav nav-tabs nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

• 垂直導航

<div class="container" style="margin-top: 10px">
    <div class="row">
        <div class="col-sm-2">
            <ul class="nav nav-stacked nav-pills">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <div class="col-sm-7 bg-danger">
            這是中間區域<br>
            這是中間區域
        </div>
        <div class="col-sm-3 bg-warning">
            這是右邊區域<br>
            這是右邊區域
        </div>
    </div>
</div>