Python學習-基礎篇11 前端知識之HTML內容

時間  2019-11-09
標籤 python 學習 基礎 前端 知識 html 內容 欄目 Python 简体版
原文   原文鏈接

HTML介紹

Web服務本質 

import socket


sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)


while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.secd(b"<h1>Hello world!</h1>")
    conn.close()

瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面css

HTML是什麼？

  • 超文本標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。
  • 本質上是瀏覽器可識別的規則，咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，對同一個標籤可能會有不一樣的解釋。（兼容性問題）
  • 網頁文件的擴展名：.html或.htm

 

HTML不是什麼？ 

HTML是一種標記語言（markup language），它不是一種編程語言。html

HTML使用標籤來描述網頁。前端

HTML文檔結構

最基本的HTML文檔：git

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css樣式優先級</title>
</head>
<body>

</body>
</html>
  1. <!DOCTYPE html>聲明爲HTML5文檔。
  2. <html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
  3. <head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
  4. <title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
  5. <body>、</body>之間的文本是可見的網頁主體內容。

 

注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼。有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">。github

HTML標籤格式

  • HTML標籤是由尖括號包圍的關鍵字，如<html>, <div>等
  • HTML標籤一般是成對出現的，好比：<div>和</div>，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。
  • 也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、<img src="1.jpg" />等。
  • 標籤裏面能夠有若干屬性，也能夠不帶屬性。

標籤的語法：web

  • <標籤名 屬性1=「屬性值1」 屬性2=「屬性值2」……>內容部分</標籤名>
  • <標籤名 屬性1=「屬性值1」 屬性2=「屬性值2」…… />

幾個很重要的屬性：django

  • id：定義標籤的惟一ID，HTML文檔樹中惟一
  • class：爲html元素定義一個或多個類名（classname）(CSS樣式類名)
  • style：規定元素的行內樣式（CSS樣式）

HTML註釋

<!--註釋內容-->

註釋是代碼之母。--摘自哪吒語錄編程

<!DOCTYPE> 標籤

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。瀏覽器

<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。服務器

HTML經常使用標籤

head內經常使用標籤

標籤 意義
<title></title> 定義網頁標題
<style></style> 定義內部樣式表
<script></script> 定義JS代碼或引入外部JS文件
<link/> 引入外部樣式表文件
<meta/> 定義網頁原信息

 

Meta標籤

Meta標籤介紹：

  • <meta>元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
  • <meta>標籤位於文檔的頭部，不包含任何內容。
  • <meta>提供的信息是用戶不可見的。

meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。 

1.http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

<!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">

body內經常使用標籤

基本標籤（塊級標籤和內聯標籤）

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<p>段落標籤</p>

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

<!--換行-->
<br>

<!--水平線--><hr>

特殊字符

內容 對應代碼
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版權 &copy;
註冊 &reg;

 

div標籤和span標籤

div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。
span標籤用來定義內聯(行內)元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。

塊級元素與行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。

注意：

關於標籤嵌套：一般塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。

p標籤不能包含塊級標籤。

img標籤

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

a標籤

超連接標籤

所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。

URL：

什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分組成
第1部分：爲協議：http://、ftp://等 
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。
<a href="http://www.oldboyedu.com" target="_blank" >點我</a>

href屬性指定目標網頁地址。該地址能夠有幾種類型：

  • 絕對URL - 指向另外一個站點（好比 href="http://www.jd.com）
  • 相對URL - 指當前站點中確切的路徑（href="index.htm"）
  • 錨URL - 指向頁面中的錨（href="#top"）

 

target：

  • _blank表示在新標籤頁中打開目標網頁
  • _self表示在當前標籤頁中打開目標網頁

列表

1.無序列表

<ul type="disc">
  <li>第一項</li>
  <li>第二項</li>
</ul>

type屬性：

  • disc（實心圓點，默認值）
  • circle（空心圓圈）
  • square（實心方塊）
  • none（無樣式）

2.有序列表

<ol type="1" start="2">
  <li>第一項</li>
  <li>第二項</li>
</ol>

type屬性：

  • 1 數字列表，默認值
  • A 大寫字母
  • a 小寫字母
  • Ⅰ大寫羅馬
  • ⅰ小寫羅馬

3.標題列表

<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

表格

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
表格的基本結構：

<table>
  <thead>
  <tr>
    <th>序號</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>槓娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

屬性:

  • border: 表格邊框.
  • cellpadding: 內邊距
  • cellspacing: 外邊距.
  • width: 像素 百分比.（最好經過css來設置長寬）
  • rowspan: 單元格豎跨多少行
  • colspan: 單元格橫跨多少列（即合併單元格）

form

功能：

表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含textarea、select、fieldset和 label標籤。

表單屬性

 

屬性 描述
accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集）。
action 規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete 規定瀏覽器應該自動完成表單（默認：開啓）。
enctype 規定被提交數據的編碼（默認：url-encoded）。
method 規定在提交表單時所用的 HTTP 方法（默認：GET）。
name 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate 規定瀏覽器不驗證表單。
target 規定 action 屬性中地址的目標（默認：_self）。

 

表單元素

基本概念：
HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息
表單工做原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。 
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。

Django接收上傳文件代碼

from django.conf.urls import url from django.shortcuts import HttpResponse def upload(request): print("request.GET:", request.GET) print("request.POST:", request.POST) if request.FILES: filename = request.FILES["file"].name with open(filename, 'wb') as f: for chunk in request.FILES['file'].chunks(): f.write(chunk) return HttpResponse('上傳成功') return HttpResponse("收到了！") urlpatterns = [ url(r'^upload/', upload), ]

input

<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。

type屬性值 表現形式 對應代碼
text 單行輸入文本 <input type=text" />
password 密碼輸入框 <input type="password"  />
date 日期輸入框 <input type="date" />
checkbox 複選框 <input type="checkbox" checked="checked"  />
radio 單選框 <input type="radio"  />
submit 提交按鈕 <input type="submit" value="提交" />
reset 重置按鈕 <input type="reset" value="重置"  />
button 普通按鈕 <input type="button" value="普通按鈕"  />
hidden 隱藏輸入框 <input type="hidden"  />
file 文本選擇框 <input type="file"  />

 屬性說明:

  • name：表單提交時的「鍵」，注意和id的區別
  • value：表單提交時對應項的值
    • type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
    • type="text","password","hidden"時，爲輸入框的初始值
    • type="checkbox", "radio", "file"，爲輸入相關聯的值
  • checked：radio和checkbox默認被選中的項
  • readonly：text和password設置只讀
  • disabled：全部input均適用

select標籤

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">廣州</option>
    <option value="4">深圳</option>
  </select>
</form>

屬性說明：

  • multiple：布爾屬性，設置後爲多選，不然默認單選
  • disabled：禁用
  • selected：默認選中該項
  • value：定義提交時的選項值

label標籤

定義：<label> 標籤爲 input 元素定義標註（標記）。
說明：

    1. label 元素不會向用戶呈現任何特殊效果。
    2. <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action="">
  <label for="username">用戶名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默認內容
</textarea>

屬性說明：

  • name：名稱
  • rows：行數
  • cols：列數
  • disabled：禁用

CSS介紹

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。

CSS語法

CSS實例

每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束。

CSS註釋

/*這是註釋*/
註釋是代碼之母

CSS的幾種引入方式

行內樣式

行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。

<p style="color: red">Hello world.</p>

內部樣式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>
外部樣式

外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

 

CSS選擇器

基本選擇器

元素選擇器

p {color: "red";}
ID選擇器
#i1 {
  background-color: red;
}
類選擇器
.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

注意：

樣式類名不要用數字開頭（有的瀏覽器不認）。

標籤中的class屬性若是有多個，要用空格分隔。

通用選擇器

* {
  color: white;
}
組合選擇器
後代選擇器
/*li內部的a標籤設置字體顏色*/
li a {
  color: green;
}
兒子選擇器
/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗鄰選擇器

/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
  margin: 5px;
}

弟弟選擇器

/*i1後面全部的兄弟p標籤*/
#i1~p {
  border: 2px solid royalblue;
}
屬性選擇器
/*用於選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
  color: green;
}

不怎麼經常使用的屬性選擇器

/*找到全部title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到全部title屬性以hello結尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到全部title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：*/
[title~="hello"] {
  color: green;
}

分組和嵌套

分組

當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。 

例如 
div, p {
  color: red;
}

上面的代碼爲div標籤和p標籤統一設置字體爲紅色。

一般，咱們會分兩行來寫，更清晰: 
div,
p {
  color: red;
}
嵌套

多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。

.c1 p {
  color: red;
}

僞類選擇器

/* 未訪問的連接 */
a:link {
  color: #FF0000
}

/* 已訪問的連接 */
a:visited {
  color: #00FF00
} 

/* 鼠標移動到連接上 */
a:hover {
  color: #FF00FF
} 

/* 選定的連接 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;

僞元素選擇器

first-letter

經常使用的給首字母設置特殊樣式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每一個<p>元素以前插入內容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每一個<p>元素以後插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用於清除浮動。

選擇器的優先級

CSS繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個body定義了的字體顏色值也會應用到段落的文本中。

body {
  color: red;
}

此時頁面上全部標籤都會繼承body的字體顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。

咱們只要給對應的標籤設置字體顏色就可覆蓋掉它繼承的樣式。

p {
  color: green;
}

此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

選擇器的優先級

咱們上面學了不少的選擇器，也就是說在一個HTML頁面中有不少種方式找到一個元素而且爲其設置樣式，那瀏覽器根據什麼來決定應該應用哪一個樣式呢？

實際上是按照不一樣選擇器的權重來決定的，具體的選擇器權重計算方式以下圖：

除此以外還能夠經過添加 !import方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!import會使樣式文件混亂不易維護。

萬不得已可使用!import

CSS屬性相關

字體屬性

文字屬性

文字字體

font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。
 
簡單實例： 
body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

字體大小

p {
  font-size: 14px;
}

若是設置成inherit表示繼承父元素的字體大小值。

字重（粗細）

font-weight用來設置字體的字重（粗細）。

值 描述
normal 默認值，標準粗細
bold 粗體
bolder 更粗
lighter 更細
100~900 設置具體粗細，400等同於normal，而700等同於bold
inherit 繼承父元素字體的粗細值

文字顏色

顏色屬性被用來設置文字的顏色。

顏色是經過CSS最常常的指定：

  • 十六進制值 - 如: ＃FF0000
  • 一個RGB值 - 如: RGB(255,0,0)
  • 顏色的名稱 - 如:  red

還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。

文字屬性

文字對齊

text-align 屬性規定元素中的文本的水平對齊方式。

值 描述
left 左邊對齊 默認值
right 右對齊
center 居中對齊
justify 兩端對齊

文字裝飾

text-decoration 屬性用來給文字添加特殊效果。

值 描述
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
inherit 繼承父元素的text-decoration屬性的值。

經常使用的爲去掉a標籤默認的自劃線：

a {
  text-decoration: none;
}

首行縮進

將段落的第一行縮進 32像素：

p {
  text-indent: 32px;
}

 

背景屬性

/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');
/*
 背景重複
 repeat(默認):背景圖片平鋪排滿整個網頁
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top（20px 20px）;

 

支持簡寫：

background:#ffffff url('1.png') no-repeat right top;

使用背景圖片的一個常見案例就是不少網站會把不少小圖標放在一張圖片上，而後根據位置去顯示圖片。減小頻繁的圖片請求。

 參考連接點我

一個有趣的例子：

鼠標滾動背景不動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

邊框

邊框屬性 

  • border-width
  • border-style
  • border-color
#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

一般使用簡寫方式：

#i1 {
  border: 2px solid red;
}

邊框樣式

值 描述
none 無邊框。
dotted 點狀虛線邊框。
dashed 矩形虛線邊框。
solid 實線邊框。

 

除了能夠統一設置邊框外還能夠單獨爲某一個邊框設置樣式，以下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

用這個屬性能實現圓角邊框的效果。

將border-radius設置爲長或高的一半便可獲得一個圓形。

display屬性

用於控制HTML元素的顯示效果。

值 意義
display:"none" HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用。
display:"block" 默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。
display:"inline" 按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響。
display:"inline-block" 使元素同時具備行內元素和塊級元素的特色。

 

display:"none"與visibility:hidden的區別：

visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

CSS盒子模型

  • margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
  • padding:           用於控制內容與邊框之間的距離；   
  • Border(邊框):     圍繞在內邊距和內容外的邊框。
  • Content(內容):   盒子的內容，顯示文本和圖像。

看圖吧：

margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推薦使用簡寫：

.margin-test {
  margin: 5px 10px 15px 20px;
}

順序：上右下左

常見居中：

.mycenter {
  margin: 0 auto;
}

padding內填充

 

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推薦使用簡寫：

.padding-test {
  padding: 5px 10px 15px 20px;
}

順序：上右下左

補充padding的經常使用簡寫方式：

  • 提供一個，用於四邊；
  • 提供兩個，第一個用於上－下，第二個用於左－右；
  • 若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；
  • 提供四個參數值，將按上－右－下－左的順序做用於四邊；

float

在 CSS 中，任何元素均可以浮動。

浮動元素會生成一個塊級框，而不論它自己是何種元素。

關於浮動的兩個特色：

  • 浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
  • 因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

三種取值

left：向左浮動

right：向右浮動

none：默認值，不浮動

參考示例

clear

clear屬性規定元素的哪一側不容許其餘浮動元素。

值 描述
left 在左側不容許浮動元素。
right 在右側不容許浮動元素。
both 在左右兩側均不容許浮動元素。
none 默認值。容許浮動元素出如今兩側。
inherit 規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起做用，而不會影響其餘元素。

父標籤塌陷問題

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

overflow溢出屬性

值 描述
visible 默認值。內容不會被修剪，會呈如今元素框以外。
hidden 內容會被修剪，而且其他內容是不可見的。
scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

 

  • overflow（水平和垂直均設置）
  • overflow-x（設置水平方向）
  • overflow-y（設置垂直方向）

 

定位（position）

static

static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。

relative（相對定位）

相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。有趣的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

absolute（絕對定位）

定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。

fixed（固定）

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。

在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。

示例代碼：

返回頂部按鈕樣式示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回頂部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>

z-index

#i2 {
  z-index: 999;
}

設置對象的層疊順序，數值大的會覆蓋在數值小的標籤之上。z-index 僅能在定位元素上奏效。

自定義模態框示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

opacity
用來定義透明效果。取值範圍是0~1，0是徹底透明，1是徹底不透明。

 

綜合示例

頂部導航菜單

頂部導航菜單示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li標籤的float示例</title>
  <style>
    /*清除瀏覽器默認外邊距和內填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標籤默認的下劃線*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表默認的圓點樣式*/
      margin: 0; /*刪除列表默認的外邊距*/
      padding: 0; /*刪除列表默認的內填充*/
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓連接顯示爲塊級標籤*/
      padding: 0 15px; /*設置左右各15像素的填充*/
      color: #b0b0b0; /*設置字體顏色*/
      line-height: 40px; /*設置行高*/
    }
    /*鼠標移上去顏色變白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">雲服務</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">優品</a></li>
  </ul>
</div>
<!-- 頂部導航欄 結束 -->
</body>
</html>

圓形頭像

圓形頭像圖示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圓形的頭像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 100%;
      overflow: hidden;
    }
    .header-img>img {
      max-width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>

</body>
</html>

 

 

 

註釋是代碼之母。--摘自哪吒語錄

CSS的幾種引入方式

行內樣式

行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。

<p style="color: red">Hello world.</p>

內部樣式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：

複製代碼 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>
複製代碼

外部樣式

外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS選擇器

基本選擇器

元素選擇器

p {color: "red";}

ID選擇器

#i1 {
  background-color: red;
}

類選擇器

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

注意：

樣式類名不要用數字開頭（有的瀏覽器不認）。

標籤中的class屬性若是有多個，要用空格分隔。

通用選擇器

* {
  color: white;
}

組合選擇器

後代選擇器

/*li內部的a標籤設置字體顏色*/
li a {
  color: green;
}

兒子選擇器

/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗鄰選擇器

/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
  margin: 5px;
}

弟弟選擇器

/*i1後面全部的兄弟p標籤*/
#i1~p {
  border: 2px solid royalblue;
}

屬性選擇器

複製代碼 
/*用於選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
  color: green;
}
複製代碼
  不怎麼經常使用的屬性選擇器

分組和嵌套

分組

當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。 

例如： 
div, p {
  color: red;
}

上面的代碼爲div標籤和p標籤統一設置字體爲紅色。

一般，咱們會分兩行來寫，更清晰: 
div,
p {
  color: red;
}

嵌套

多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。

.c1 p {
  color: red;
}

僞類選擇器

複製代碼 
/* 未訪問的連接 */
a:link {
  color: #FF0000
}

/* 已訪問的連接 */
a:visited {
  color: #00FF00
} 

/* 鼠標移動到連接上 */
a:hover {
  color: #FF00FF
} 

/* 選定的連接 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
複製代碼

僞元素選擇器

first-letter

經常使用的給首字母設置特殊樣式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每一個<p>元素以前插入內容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每一個<p>元素以後插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用於清除浮動。

選擇器的優先級

CSS繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個body定義了的字體顏色值也會應用到段落的文本中。

body {
  color: red;
}

此時頁面上全部標籤都會繼承body的字體顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。

咱們只要給對應的標籤設置字體顏色就可覆蓋掉它繼承的樣式。

p {
  color: green;
}

此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

選擇器的優先級

咱們上面學了不少的選擇器，也就是說在一個HTML頁面中有不少種方式找到一個元素而且爲其設置樣式，那瀏覽器根據什麼來決定應該應用哪一個樣式呢？

實際上是按照不一樣選擇器的權重來決定的，具體的選擇器權重計算方式以下圖：

除此以外還能夠經過添加 !import方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!import會使樣式文件混亂不易維護。

萬不得已可使用!import

CSS屬性相關

字體屬性

文字字體

font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。
 
簡單實例： 
body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

字體大小

p {
  font-size: 14px;
}

若是設置成inherit表示繼承父元素的字體大小值。

字重（粗細） 

font-weight用來設置字體的字重（粗細）。

值 描述
normal 默認值，標準粗細
bold 粗體
bolder 更粗
lighter 更細
100~900 設置具體粗細，400等同於normal，而700等同於bold
inherit 繼承父元素字體的粗細值

文本顏色

顏色屬性被用來設置文字的顏色。

顏色是經過CSS最常常的指定：

  • 十六進制值 - 如: ＃FF0000
  • 一個RGB值 - 如: RGB(255,0,0)
  • 顏色的名稱 - 如:  red

還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。

文字屬性

文字對齊

text-align 屬性規定元素中的文本的水平對齊方式。

值 描述
left 左邊對齊 默認值
right 右對齊
center 居中對齊
justify 兩端對齊

文字裝飾

text-decoration 屬性用來給文字添加特殊效果。

值 描述
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
inherit 繼承父元素的text-decoration屬性的值。

經常使用的爲去掉a標籤默認的自劃線：

a {
  text-decoration: none;
}

首行縮進

將段落的第一行縮進 32像素：

p {
  text-indent: 32px;
}

背景屬性

複製代碼 
/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');
/*
 背景重複
 repeat(默認):背景圖片平鋪排滿整個網頁
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top（20px 20px）;
複製代碼

支持簡寫：

background:#ffffff url('1.png') no-repeat right top;

使用背景圖片的一個常見案例就是不少網站會把不少小圖標放在一張圖片上，而後根據位置去顯示圖片。減小頻繁的圖片請求。

 參考連接點我

一個有趣的例子：

  鼠標滾動背景不動

邊框

邊框屬性 

  • border-width
  • border-style
  • border-color
#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

一般使用簡寫方式：

#i1 {
  border: 2px solid red;
}

邊框樣式

值 描述
none 無邊框。
dotted 點狀虛線邊框。
dashed 矩形虛線邊框。
solid 實線邊框。

 

除了能夠統一設置邊框外還能夠單獨爲某一個邊框設置樣式，以下所示：

複製代碼 
#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}
複製代碼

border-radius

用這個屬性能實現圓角邊框的效果。

將border-radius設置爲長或高的一半便可獲得一個圓形。

display屬性

用於控制HTML元素的顯示效果。

值 意義
display:"none" HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用。
display:"block" 默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。
display:"inline" 按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響。
display:"inline-block" 使元素同時具備行內元素和塊級元素的特色。

 

display:"none"與visibility:hidden的區別：

visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

 CSS盒子模型

  • margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
  • padding:           用於控制內容與邊框之間的距離；   
  • Border(邊框):     圍繞在內邊距和內容外的邊框。
  • Content(內容):   盒子的內容，顯示文本和圖像。

看圖吧：

margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推薦使用簡寫：

.margin-test {
  margin: 5px 10px 15px 20px;
}

順序：上右下左

常見居中：

.mycenter {
  margin: 0 auto;
}

padding內填充

複製代碼 
.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}
複製代碼

推薦使用簡寫：

.padding-test {
  padding: 5px 10px 15px 20px;
}

順序：上右下左

補充padding的經常使用簡寫方式：

  • 提供一個，用於四邊；
  • 提供兩個，第一個用於上－下，第二個用於左－右；
  • 若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；
  • 提供四個參數值，將按上－右－下－左的順序做用於四邊；

float

在 CSS 中，任何元素均可以浮動。

浮動元素會生成一個塊級框，而不論它自己是何種元素。

關於浮動的兩個特色：

  • 浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
  • 因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

三種取值

left：向左浮動

right：向右浮動

none：默認值，不浮動

參考示例

clear

clear屬性規定元素的哪一側不容許其餘浮動元素。

值 描述
left 在左側不容許浮動元素。
right 在右側不容許浮動元素。
both 在左右兩側均不容許浮動元素。
none 默認值。容許浮動元素出如今兩側。
inherit 規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起做用，而不會影響其餘元素。

父標籤塌陷問題

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

 overflow溢出屬性 

值 描述
visible 默認值。內容不會被修剪，會呈如今元素框以外。
hidden 內容會被修剪，而且其他內容是不可見的。
scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

 

  • overflow（水平和垂直均設置）
  • overflow-x（設置水平方向）
  • overflow-y（設置垂直方向）

 

定位（position）

static

static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。

relative（相對定位）

相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。有趣的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

absolute（絕對定位）

定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。

fixed（固定）

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。

在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。

示例代碼：

  返回頂部按鈕樣式示例

z-index

#i2 {
  z-index: 999;
}

設置對象的層疊順序，數值大的會覆蓋在數值小的標籤之上。z-index 僅能在定位元素上奏效。

  自定義模態框示例

opacity

用來定義透明效果。取值範圍是0~1，0是徹底透明，1是徹底不透明。

綜合示例

頂部導航菜單

  頂部導航菜單示例

圓形頭像

  圓形頭像圖示例

 

 
 
 
好文要頂  關注我  收藏該文   
3
0
 
 
 
« 上一篇： 前端知識之HTML內容
» 下一篇： 前端基礎之JavaScript
posted @  2017-12-20 16:13  Q1mi 閱讀( 1016) 評論( 0)  編輯  收藏
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程