Django學習筆記：CSS基礎

CSS基礎

css概述

CSS是一組格式設定規則，用于控制Web頁面的外觀。例如，讓HTML中的某個div或者span元素北京顔色改為黑色，或者設定圖檔元素img的長、寬、顯示位置等，這些外觀的設定功能都可以通過CSS來控制。在Web開發淺短中，HTML用來控制頁面的内容，而CSS用來控制頁面内容的顯示方式。

CSS中的内容一般與HTML中的元素綁定起來，由選擇符和屬性組成，選擇符後面跟着屬性，但被一對花括号所包圍。屬性和值由冒号分隔，每個屬性生命以分号結尾。典型的CSS樣式設計代碼如下
```
body{
  background - color:white; /* 将背景色設定為白色 */
  color:black;	/* 将前景色設定為黑色 */
}
           
```
為了能夠設定HTML中的元素外觀，需要在HTML中引入CSS，具體由三種引入方式
1. 内聯樣式表：将CSS樣式設定代碼内嵌到HTML檔案的 <style> 标簽中，執行個體如下
```

<head>
  <meta charset='utf-8'/>
  <title></title>
  <style type='text/css'>
  	#box{
  			width:100px;
  			height:100px;
  			background:red;
  	}
  </style>
</head>
<body>
  <div id='box'>
  </div>
</body>

           
```
  上述代碼通過内嵌CSS方式，使得body中id為box的 <div> 元素寬、高均設定為100像素，背景顔色設定為紅色。
2. 超連結樣式表：将一個外部樣式通過 <link> 标簽超連結到HTML檔案中，執行個體如下
```

<head>
  <meta charset='utf-8'/>
  <title></title>
  <link rel='stylesheet' type='text/css' href='style.css(css檔案位址)'/>
</head>
<body>
  <div id='box'>
  </div>
</body>
           
```
  上述代碼對div元素box的控制寫在一個額外的css檔案style.css中并通過 <link> 标簽的引入實作對box元素的樣式控制。
3. 将樣式表直接加入到HTML檔案的元素設定中，這種方式寫入的CSS樣式又叫行内樣式表，執行個體如下
```

<head>
  <meta charset='utf-8'/>
  <title></title>
</head>
<body>
  <div id='box' style='width:100px;height:100px;background:red;'>
    
  </div>
</body>

           
```
  上述代碼中，直接在box元素的style屬性中進行CSS樣式設定。當然，可以采用這種方式對整個頁面元素進行設定，但是這種方式編寫的CSS不具有複用性，隻能針對目前控制的頁面元素，在開發實際項目的過程中相對較少采用這種方式。
CSS選擇器
在css中，選擇器是一種模式，用于選擇需要添加樣式的元素，即通過選擇器可以在HTML中找到需要更改外觀的元素。下面列舉一些經常使用的選擇器并介紹其基本的使用方法。
1. ID選擇器
  ID選擇器采用符号#來進行元素選擇。ID通常表示唯一值，是以，ID選擇器在CSS中通常隻出現一次。ID選擇器的基本形式如下
```
#box{
  background: red;
}
           
```
  上面的代碼會将id為box的頁面元素的背景設定為紅色。
2. 類選擇器
  類（class）選擇器就是将相同類型的元素進行分類定義，分類定義的好處就是能夠複用。在類名前面加符号 . 表示定義一個類選擇器，引用的時候在标簽後面加class引用。類選擇器的基本形式如下
```
.box{
  background: red;
}
           
```
  上述代碼可以将HTML中所有class為box的元素背景置為紅色。
3. 标簽選擇器
  标簽選擇器就是直接使用HTML标簽名作為CSS選擇器的名稱，這種方式會影響HTML中所有此标簽的樣式。标簽選擇器的基本形式如下
```
div{
  background: red;
}
           
```
  上述代碼會影響到HTML中所有使用div标簽的地方，使得其背景顔色變為紅色
4. 多元素選擇器
  當幾個元素需要設定相同的CSS風格時，可以使用多元素選擇器。選擇多個元素的時候，用逗号隔開。多元素選擇器基本形式如下
```
div,span{
  background: red;
}
           
```
  上述代碼會使得HTML中所有div和span标簽的背景均為紅色
5. 後代選擇器
  後代選擇器作用于父元素下面所有的子元素，其級聯層次按照HTML中的元素結構進行查找。後代選擇器的基本形式如下
```

<head>
  < meta charset='utf-8'/>
  <title></title>
  <style>
    #box p{
      color: red;
    }
  </style>
</head>
<body>
  <div id='box'>
    <p>
      Python Web網站開發
    </p>
  </div>
</body>

           
```
  上述代碼通過内聯樣式表進行CSS設定，首先找到 <body> 中id為box的 <div> 元素，然後針對 <div> 元素中所有的 <p> 元素将其顔色設定為紅色。後代選擇器之間使用空格進行元素的遞進選擇。
CSS基本屬性和布局
CSS提供了很對針對HTML元素的屬性可供更改，包括顔色、長、寬、邊框大小、背景圖檔等。合理使用CSS屬性進行網頁控制和布局，可以制作出美觀的網站給使用者浏覽。下面介紹一些項目開發中經常使用的CSS屬性。
1. 顔色color
  
  顔色的表示方式有三種：RGB、十六進制和顔色名稱。RGB模式将紅（R）、綠（G）、藍（B）三個分量獨立出來，每個分量的取值範圍為0～255，比如紅色可以表示為rgb（255，0，0）。設定示例如下
  
  十六進制表示方法即采用6位十六進制數來精确地表示顔色，如紅色位#FF0000。設定示例如下
  
  顔色名稱指直接用顔色隊對應的英文名稱表示，如red、green、blue、yellow等。設定示例如下
  1. 邊框border
  CSS可以對邊框屬性進行設定，包括邊框風格border-style（實作、虛線等）、邊框寬度border-width、邊框顔色corder-color等。設定示例如下
```
div{
  border-style:dotted; /* 設定邊框為虛線 */
  border-color:red; /* 設定邊框位紅色 */
  border-width:4px; /* 設定邊框線寬為4個像素 */
}
           
```
  1. 背景background
  對指定的HTML的元素背景可以采用固定的顔色值進行設定。
```
p{
  background-color:red;
}
           
```
  也可以采用背景圖檔的方式，通過引入外部圖檔作為元素的背景。
```
p{
  background-image:url('11.jpg'); /* 填寫圖檔的位址 */
  background-repeat:no-repeat;
}
           
```
  其中，background-repeat屬性用來表示背景圖像的顯示方式，一般有三種顯示方式：水準方向複制圖像（repeat-x）、垂直方向複制圖像（repeat-y）、不複制（no-repeat）
  1. 字型font
  在Web開發中經常需要對字型進行排版，包括字型大小、顔色、粗細、位置等。CSS提供了一系列屬性用于進行字型樣式控制，設定示例如下
```
p{
  font-family:'宋體'; /* 設定字型為宋體 */
  font-size:14px; /* 設定字型大小為14個像素 */
  font-weight:bold; /* 設定字型加粗 */
  color:red; /* 設定字型顔色為紅色 */
  text-align:center /* 設定字型居中對齊 */
}
           
```
  1. 布局
  布局就是将不同的HTML元素按照一定的規則防止在浏覽器的不同位置，實際操作中經常需要用到填充、邊框、邊界等屬性。在HTML中，直接包圍内容時内邊距(padding)，内邊距呈現了元素的背景。邊框以外的事外邊距(margin)，外邊距預設是透明的，是以不會遮擋其後的任何元素。設定示例如下
```
#box1{
  margin:10px; /* 設定上下左右的外邊距為10像素 */
}
#box2{
  padding:10px; /* 設定上下左右的内邊距為10像素 */
}
           
```

Django學習筆記：CSS基礎

CSS基礎

css概述

CSS選擇器

ID選擇器

類選擇器

标簽選擇器

多元素選擇器

後代選擇器

CSS基本屬性和布局

顔色color

邊框border

背景background

字型font

布局

繼續閱讀

無法解析的外部符号 wmain，該符号在函數 "void cdecl mainCRTStartupHelper(struct HINSTANCE *,unsigned short con......

TestLink導出用例轉換工具(XML2Excel)

IE8 CSS設定DIV居中，添加“margin:0 auto”

YAML簡介和PyYAML安全操作YAML支援的類型YAML的優點：yaml的基本文法python操作

Small tricks

libsvm for python 安裝

學習軟體測試基礎測試第七天

Zeppelin 配置通路 REST APIApache Zeppelin Configuration REST API

【Torch】最簡潔logging使用指南

27. Remove Element(清單)題目代碼

Cloud Studio初體驗

使用 ctypes 進行 Python 和 C 的混合程式設計

【python】【資料處理】畫多元資料分布圖

【python】netconf協定對接管理裝置

「Python 網絡自動化」NETCONF —— Python 使用 NETCONF 管理配置 H3C 網絡裝置

在python中建立excel并寫入