python web自動化測試（html）（五）

elenium的定位元素方式是基于html語言構建的，所以學習web自動化是很有必要去學習html

HTML

HTML 全名 HyperText Markup Language(超文本標記語言),是一種用于創建網頁的標準標記語言。常常和css js一起使用來構建漂亮的頁面。

HTML構成

HTML的元素的以標簽、屬性、text、內嵌標簽構成

下面以百度為例

在我們看到的頁面上展示的內容都在內嵌標簽有（head 頭部信息、body 體信息）

在web自動化測試中重要的是body里內嵌標簽中，因為展示的頁面操作都是在body 中完成的

html腦圖結構

常見HTML標簽

p : 段落文本，代表進行換行

h1-h6:標題從H1（最大）到H6（最?。?,標題大小

div：對html頁面進行布局，填充數據，容器，也有換行作用

span：對html頁面進行布局，填充數據，容器，在一行獨立設置樣式

ul: 將 <ul> 標簽與 <li> 標簽一起使用，創建無序列表組合：<ul><li></li></ul>

web自動化測試的重點

a：超鏈接跳轉到頁面，需要配合 href，一般都是<a href='www.baidu.com'> </a>使用

img： 圖片的超鏈接，組合<img src="#圖片鏈接#">

iframe：

在html頁面里面嵌套html頁面，src 頁面鏈接 width 寬度 height 長度

組合 <iframe src="http://www.toutiao.com" width="400" height="500"></iframe>

select標簽：組合<form><selevct></select> </form>

select的作用下拉選擇框

form標簽：

form的作用form表單是前端和后端進行用戶數據交互的一種方式，前端編寫的數據可以通過form表單傳遞給后端

action:接口地址，根據需求更改請求的接口地址 method：請求方法

input： input:通常有name和value屬性

格式：<input type="" name="" value="">

代表輸入，基本web自動化測試都必須要測的內容

<input name> ：默認屬性輸入框

組合：name 屬性 <input name="123" value=“number”>

input name屬性的作用：

當我們選擇（輸入）的數據傳遞給后端時會進行接收

input value值的作用：

后端接收的數據如果是json格式的話就會以接收{"name（123）"="value（number）"}

input type 的作用：

設定輸入格式，不設置格式，默認是text 文本輸入

<input name='password' type='password'>：

type='password'：代表輸入內容帶*號，用于設置密碼框

type="text"：默認是text 文本輸入

type="checkbox"：代表多選

type="radio"：代表單選框

type="file"：選擇文件

type="submit" 提交按鈕（配合form表單使用，將form內的數據提交到后端）

input placeholder的作用：輸入框提示

input disable 的作用：

禁用輸入框，輸入框置灰，如果想輸入在F12找到該元素并且去除

input readonly 的作用：只讀輸入框

樣式代碼與演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web自動化</title>
</head>
<form action="http://httpbin.org/post" method="post">
<div>div也是個容器，對html頁面進行布局
    <h4>標題h4<span>對html頁面進行布局，這是個容器</span></h4>
    <a href="http://www.toutiao.com">點擊我，跳轉頭條<img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA2CAMAAACSsKctAAAANlBMVEVHcEzuQEDwRETyRUX3TEzvQkLuQEDuQUHuQUHvQEDuQUHuQEDvQkLuQEDuQUHwQUHxQkLtQEDKaksGAAAAEXRSTlMAxiweDlyo49Nri/F5+bhLOapXaIgAAATMSURBVGje7ZrpsqQqDIAb2VEE3/9lx263AAmu3XVv1cn8mFOtIh+JIQuvFyFSzdK8/jsSrbg7BG+HSdjPZi3iJPTchR7a7iYam7mGNvwKTM5vlOQd6n3Z37IhN6zSNhW1TsJqMt/TwQk6G3gxmt0DC5/LfpxS9U38wOJ9RJN38uG4KGBR0wRNxrcHtn4dlPjpv4pCYzqEEffBfAG2XDC9sxyCUbbfH3wVDdbkS2P4FzQGRR4As8NdsEYXy01Y4xMa28C6KljT3gUDXNtYOn5fY3UwNtwEA9+XA397+zONxR03fQ1MerjG0Is4QYK5riLzEMDdC4+CuQoY99sKoW9R20z5zsKwN0gAczDFUohdPzSKRpw4j9Yp0+Jg2GgCrHBf3sAVuIytC8u4RjIwYmGOh8AMvTutfLtgydR8ZjzCgeV32M7eFlyZj2T8GY3lfHwNmChTGmcP5tECNNFBf4m4AqEGhGt8rYEj2i+AwUhwFCocgOs+ok383MFfMecdoGYUHFwkW76Jz5kiHlmQ4TtPY48+iNAnfqgX1a+vtNMueXyjvqox5WTkJFgthq3t0i2ydhY+4MsbYhKMtEu6dxFseqw1Gd+s2raasylPRgCluoJJgnnU3SYaHbS8Y4rJBv3h42AFdN1gGzwWZtgcMHD3Xk5BfYOz67qlsWKDnq3G1DP74DTCZVwQVbA1X57WpWWqk40od4svgInKBrtUPJSpfGPGyYYC6zma/OjJm0RzBcwcBONltAzKIVYxfyBObJlbFAHAtKSyOla4x+c1FiuhAxvOiDcpWBKo4GDbp3sLDA2CJR07EGCaUZYJwUys5OGgBhdYCRYFIWQQHKzrjU/AXCUdQ8C0e0+Y295XwbSsFhiS4qLUC9hePsZ2QqqVT4I3NvtgvrfbXQLxkwsYUoWsgI37uX4GbOXj231+J332DPHsXKb+cknCkC2gkZ1iLQE2RtRPgiVJq6mAadVtUKL5CAea69v9qGxxs/KTMLFrVaozYLLi7UcwrVxWY3XYtjfu32q07cOF/Ob7YKpWLm0Emewj+7m43Ud5EGzdAvjJKnz/jTbCg2B2OBIpXgBzZl9a/xFdhBChwYWXYIEYe1GYzn6fHlPIE3rJDhBBTPxIPHYng5bDObEXQqrEK34PTP+B/c/A/kzxD+wUWLB1AXVJd8cUm3Jkv1W/SpmGlsiVOUw32GxPbMVbZtA9WwneGjo+Xun/34s8hEGLqQ+AgUaVff0cDHCpJ7stSZvKTVW//vNPoXVuNV3rVQ7WVR+juRjRfLqtMeuzkWOtG2SxdtrnuehrSc9utyBpwjwB5sp23eqdI33Og5Wm6IZan3eXKz/wcc8UYdl87ZOsrUtDZmzz6xIwoU9nB2CHKw5FLGBWVkQXzrTsu4Fvw1K+JGRWmjoPiTjto6eqysMeF08NFA0chRVu8jNRyzpogXpF6rF9LuSw2MVzHtnphMxRNLgj6IasdpCBNef8B+CKj53zyI5tWOqdATsP0VP7GPoYJd1QDQuuagw2f30xj9URaFF6MM8pMPSxfa7w4FmqxtTb4YgjCOVPReQRanvgKa5TGuvQ7j9+rq5QD6aNMqRa/LffKb9JvQoR6Al9XCQyrCZCIL5eX5Z4+QEscJfekj/2D7KhSDEKe9jHAAAAAElFTkSuQmCC">
    </a>
    <!--    下面是html頁面中嵌套另一個html頁面-->
</div>
<div></div>
<iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
<!-- 段落-->
<p>這是第一行段落</p>
<p>這是第二行段落</p>
<p>菜單標題</p>
<ul>無序列表
    <li>菜單1</li>
    <li>菜單2</li>
    <li>菜單3</li>
</ul>
<!--    用戶輸入-->
username:<input name="username" placeholder="輸入賬號" >
<p></p>
password:<input type="password" name="password" placeholder="輸入密碼">
    <p></p>
    禁用框 <input name="text"  disabled>
    <p></p>
    只讀框 <input name="text" placeholder="只能復制框內文字" readonly>
<p>choice you like color</p>
<div>

    <!--        radio代表的意思是單選-->
    <input type="radio" name="like_color" value="紅色">red
    <input type="radio" name="like_color" value="藍色">blue
    <input type="radio" name="like_color" value="綠色">green

</div>
<p>choice you not like color</p>
<div>
    <!--        checkbox代表的意思是多選-->
    <input type="checkbox" name="not_like_color">yellow
    <input type="radio" name="not_like_color">white
    <input type="radio" name="not_like_color">black
    <p>選擇文件</p>
    <input type="file" name="file" >
</div>
<p>choice you not like animal</p>

<select name="dog">
    <option>dog</option>
    <option>cat</option>
    <option>fish</option>
</select>
    <p></p>
    <input type="submit" width="50" height="20" value="點擊提交">
</form>
</html>

作為web自動化測試，了解具體是什么意思，以及如何進行元素的定位調用即可，當然全能弄懂那當然是更好的

TML（網頁）

Web領域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網，俗稱萬維網（www）。

W3C

W3C（World Wide Web Consortium）叫萬維網聯盟，是國際最著名的標準化組織，制定了web標準。

WEB標準

一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。

web標準包含了下面三個方面：

結構標準（HTML）：用于對網頁元素進行整理和分類。
表現標準（CSS）：用于設置網頁元素的版式、顏色、大小等外觀樣式。
行為標準（JavaScript）：用于定義網頁的交互和行為。

HTML定義

Html不是一種編程語言，而是描述性的標記語言，主要作用是定義內容的結構。

2014年10月萬維網聯盟（W3C）完成了HTML5標準制定，是目前最新的HTM版本。

HTML5的出世，標志著web進入一個富客戶端（具有很強的交互性和體驗的客戶端程序）時代，像APP網頁，小程序都是HTML5的應用場景。

Html5新特性：

用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對本地離線存儲的更好的支持。
新的特殊內容元素，比如 article、footer、header、nav、section。
新的表單控件，比如 calendar、date、time、email、url、search。

頁面基本結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="關鍵詞" />
    <meta name="Description" content="頁面描述" />
    <title>頁面標題</title>
</head>
<body>

</body>
</html>

關于viewport

viewport用戶網頁的可視區域，一個針對移動網頁優化的頁面 viewport meta 標簽如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。

常見元素

head區域元素：

meta title style link script base。

body區域元素：

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、dl、dt、dd
a
form、input、select、textarea、button

元素分類

塊級元素：每個元素都是獨占一行

address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是css layout的主要標簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1-h6 – 標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容）
noscript – ）可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

行內元素：元素在同一行水平排列

a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體
big – 大字體
br – 換行
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標簽
s – 中劃線(不推薦)
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量

inline-block：元素可以排列在同一行顯示，并且可以設置一些塊元素屬性

通過Css：display:inline-block 改變元素。

元素默認樣式

很多元素都自帶了默認樣式，不同瀏覽器下默認樣式表現不一致，為了統一或者滿足一些需求我們需求將所有默認樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認樣式進行了統一，

https://github.com/necolas/normalize.css

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對單位

in：英寸，1in=2.54cm=96px
pc：皮卡，1皮卡=1/16英寸
pt：點，1點=1/72英寸
px：像素，1點=1/96英寸

相對單位

em：font-size中相對于父元素的字體大小，在元素屬性中使用是相對于自身字體大小
rem：根元素的字體大小，在元素屬性中使用是相對于根元素字體大小
1h：元素的line-height
vw：視窗寬度的1%
vh：視窗高度的1%
vmin：視窗較小尺寸的1%
vmax：視圖大尺寸的1%

字體屬性

屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒有就顯示默認*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或寫（400｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號都是偶數，這樣保證它們的差一定偶數除2得到整數，如下圖所示：

line-height

文本垂直居中

對于單行文本可以設置行高=盒子高度。

對于多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

vertical-align

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文本屬性

letter-spacing: 0.5em ; 單個字母之間的間距。
word-spacing: 1em; 單詞之間的間距。
text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
color:red; 字體顏色。
text-align: center; 文字對齊方式，屬性值可以是：left、right、center、justify。
text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
text-indent:10px; 文本首行縮進。
text-shadow:2px 2px #ff0000; 文字陰影效果。
white-space: normal; 設置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內容溢出處理

visible：默認值，多余的內容會全部顯示出來。
hidden：超過元素的內容隱藏。
auto：內容超出顯示滾動條。
scroll：Windows總是顯示滾動條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

background-color:#fff; 設置背景顏色。
background-image:url(img.png); 設置圖像為背景。
background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
background-position:center top; 設置背景圖片在容器的位置，top，bottom，left，right，center。
background-attachment:scroll; 設置背景圖片隨滾動條移動，scroll（跟隨滾動），fixed（固定）。
background-origin:border-box; css3，border-box（背景相對于邊框框定位），padding-box（背景相對于填充框定位），content-box（背景相對于內容框定位）。
background-clip:border-box; css3，背景裁切。
background-size:cover; css3，調整尺寸，contain（在不裁剪或拉伸圖像的情況下，在其容器內盡可能大地縮放圖像），cover（盡可能大地縮放圖像以填充容器，必要時拉伸圖像。），auto（在相應的方向上縮放背景圖像，以保持其固有比例。）。

優先級

理解優先級很重要，有助于我們排查一些問題。瀏覽器將優先級分為兩部分：HTML的行內樣式和選擇器的樣式。

行內樣式

行內樣式是直接作用在元素，它的優先級高于選擇器樣式，使用！important可以提高樣式表的優先級。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優先級規則如下：

如果選擇器的ID數量最多的勝出。
如果ID數量一致，那么擁有最多類的選擇器勝出。
如果以上兩次比較都一致，那么擁有最多標簽名的選擇器勝出。

優先級

我們通過下圖這種標記方式，就可以判斷出選擇器的優先級。

優先級

兩條經驗法則

盡量不要使用ID選擇器，因為它會大幅提升優先級。當需要覆蓋這個選擇器時，通常找不到另一個有意義的ID，于是就需要復制原來的選擇器加上另一個類來讓它區別于想要覆蓋的選擇器。
不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個！important，而且依然要處理優先級的問題。

基礎選擇器

類型或標簽選擇器，匹配目標元素的標簽名，如：p，input[type=text]，優先級（0，0，1）。
類選擇器，匹配class屬性中有指定類名的元素，如：.box，優先級（0，1，0）。
ID選擇器，匹配擁有指定ID屬性的元素，如：#id，優先級（1，0，0）。
通用選擇器（*），匹配所有元素，優先級（0，0，0）。

組合選擇器

由多個基礎選擇器組合成的復雜選擇器。

后代組合器（單個空格（）表示），比如 .nav li，表示li是一個擁有nav類的元素的后代。
子組合器（>），匹配的元素是直接后代，.parent > .child。
相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會選中目標元素之前的兄弟元素，li.active ~ li。

復合選擇器

多個基礎選擇器連起來（中間沒有空格）組成一個復合選擇器（如：ul.nav）。復合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態的元素，優先級（0，1，0）。

:first-child——匹配的元素是其父元素的第一個子元素。
:last-child——匹配的元素是其父元素的最后一個子元素。
:only-child——匹配的元素是其父元素的唯一一個子元素（沒有兄弟元素）。
:nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數，該公式指定要選中哪個元素。要了解一個公式的工作原理，請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。

:nth-child(an+b)

:nth-last-child(an+b)——類似于：nth-child()，但不是從第一個元素往后數，而是從最后一個元素往前數。括號內的公式與：nth-child()里的公式的規則相同。
:first-of-type——類似于：first-child，但不是根據在全部子元素中的位置查找元素，而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。
:last-of-type——匹配每種類型的最后一個子元素。
:only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個子元素。
:nth-of-type(an+b)——根據目標元素在特定類型下的數字順序以及特定公式選擇元素，類似于：nth-child。
:nth-last-of-type(an+b)——根據元素類型以及特定公式選擇元素，從其中最后一個元素往前算，類似于：nth-last-child。
:not(<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器，它只能指定元素本身，無法用于排除祖先元素，同時不允許包含另一個排除選擇器。
:focus——匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。
:hover——匹配鼠標指針正懸停在其上方的元素。
:root——匹配文檔根元素。對HTML來說，這是html元素，但是CSS還可以應用到XML或者類似于XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關的偽類選擇器。
:disabled——匹配已禁用的元素，包括input、select以及button元素。
:enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點的元素。
:checked——匹配已經針對選定的復選框、單選按鈕或選擇框選項。
:invalid——根據輸入類型中的定義，匹配有非法輸入值的元素。例如，當<inputtype="email">的值不是一個合法的郵箱地址時，該元素會被匹配。

更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS

偽元素選擇器

偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先級（0，0，1）。

::before——創建一個偽元素，使其成為匹配元素的第一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::before。
::after——創建一個偽元素，使其成為匹配元素的最后一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::after。
::first-letter——用于指定匹配元素的第一個文本字符的樣式，如：h1::first-letter。
::first-line——用于指定匹配元素的第一行文本的樣式。
::selection——用于指定用戶使用鼠標高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用于根據HTML屬性進行匹配元素，優先級（0，1，0）。

[attr]——匹配的元素擁有指定屬性attr，無論屬性值是什么，如：input[disabled]。
[attr="value"]——匹配的元素擁有指定屬性attr，且屬性值等于指定的字符串值，如：input[type="radio"]。
[attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值的開頭是指定的字符串值，例如：a[href^="https"]。
[attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
[attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值是一個空格分隔的值列表，列表中的某個值等于指定的字符串值，如：a[rel="author"]。
[attr|="value"]——匹配的元素擁有指定屬性attr，且屬性值要么等于指定的字符串值，要么以該字符串開頭且緊跟著一個連字符（-）。

小結

本文要點回顧，歡迎留言交流。

Web中的一些基本概念介紹。
Html頁面結構，元素分類。
Css優先級。
Css選擇器，（基礎選擇器，組合選擇器，復合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

網頁中文字作為信息的主要載體，非常重要，之前學習過HTML中關于文本、段落等格式的知識，這些只是簡單排版，如果想制作更好看的文本樣式，就的使用css 字體和文本樣式了。

css字體

css 字體屬性主要包括字體系列、字體大小、字體風格等其它樣式。

1、設置字體系列 —— font-family

這個屬性用來設置網頁使用哪種類型的字體顯示文本，語法如下：

font-family: "字體1"，"字體2"，"字體3"...

font-family 屬性可以定義多個字體，瀏覽器會從前到后優先選擇使用字體，當瀏覽器不支持第一個字體，則會嘗試使用第二個字體，以此類推。如果瀏覽器不支持所有字體，則使用默認字體。

如下示例：

2、字體樣式—— font-style

字體樣式有三種：

正常 - 正常顯示文本
斜體 - 以斜體字顯示的文字
傾斜的文字 - 文字向一邊傾斜（不管是斜體字還是正常的字體）

如下示例：

這里有2種斜體，它們有什么區別？

italic 和 oblique 都是向右傾斜的文字, 但區別在于 italic 是指斜體字，而 oblique 是傾斜的文字，對于沒有斜體的字體應該使用 oblique 屬性值來實現傾斜的文字效果。

3、字體大小 —— font-size

“font-size”屬性來設置字體大小，它的值可以使用預定義關鍵字、絕對大小、相對大小。

預定義關鍵字

預定義關鍵字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按順序依次增大。它的可選范圍只有這幾種，且不同瀏覽器廠商定義的預定義關鍵字對應的字體大小不一致，所以相同的屬性值，在不同瀏覽器看到的大小不一樣，建議不要使用這種方式。

絕對大小

絕對大小使用比如：px(像素)、pt(點，1pt 相當于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等單位設置字體大小。

如下示例：

絕對大小不會隨著頁面大小改變而改變，如果要想使文字大小自適應不同的屏幕或設備就需要使用相對大小。

相對大小：

相對大小使用 em、%、rem等來設置大小，它們都是相對于某個參考基準的字體大小，來計算當前字體的大小，只是參考基準不同而已。

如果你不指定一個字體的大小，默認大小和普通文本段落一樣，是16像素（1em=16px,100%=16px）。

em和%都是相對于父級元素的字體大小，其子級元素會在其父級元素的計算結果上繼續計算大小，如下示例：

如上p元素的字體大小是36px，而不是12px * 200%等于24px，它是在其父級div元素的計算結果上繼續計算的值。

使用em 或 %雖然可以方便修改文字大小，但是當元素嵌套很深的時候，就變得比較復雜，深層的元素文字大小就變得不可控，所以css3 新增加了rem 來設置字體大小。

rem 是相對于根元素（html 元素） font-size屬性的值，每一層級都會參考html根元素的字體大小來計算，這樣一來，無論嵌套多少層，字體大小的計算就變得統一了。

rem 是CSS3新增的一個相對單位，IE9 以下版本的老瀏覽器卻不支持它，這也是很多編程人員尚未使用 rem 的原因。

在定義字體大小時，建議在 html 元素中定義絕大多數元素所需要的字體大小，并讓所有子元素繼承 html 的字體大小。如果某個子元素要改變字體大小，則使用相對尺寸 em 或 % 或 rem 重新定義。

4、復合屬性—— font

font 屬性可以看成是字體的簡寫，它可以定義字體系列、大小、風格、粗細、等樣式，語法如下：

 font："font-style font-variant font-weight font-size/line-height font-family"

其中font-size和font-family的值是必需的。如果缺少了其他值，將使用瀏覽器的默認值。

如下示例：

除了以上設置，font還有其它的屬性值，如下：

這些屬性，只有部分瀏覽器支持，具體使用時請查看瀏覽器是否支持。

5、其它字體屬性

字體還有 font-weight（設置粗細的屬性）、font-variant（設置小型大寫字母的字體顯示文本）如下示例：

font-weight 字體粗細：有normal、lighter、bold、數值三種，數值范圍從 100 ~ 900 依次變粗，900 相當于 bold。

font-variant值有normal（標準字體顯示）、small-caps（瀏覽器會顯示小型大寫字母的字體）、inherit（繼承父元素的設置）

如下示例：

font-variant 屬性設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。

css 文本樣式

css 文本屬性主要設置比如字符間隔，文本顏色、單詞間隔、行高、文字修飾、對齊方式等效果。

1、文字顏色 —— color

color 使用以“#”開頭16進制的顏色代碼或顏色關鍵詞（如red、blue），如下示例：

2、字符間隔 —— letter-spacing

設置字符水平間距，如下示例：

3、單詞間隔 —— word-spacing

設置單詞之間的間距，如下示例：

這里注意中文比較特殊，一個中文字不等同于英文的一個單詞。

4、行高 —— line-height

設置字體行之間垂直間距，如下示例：

5、文字修飾 —— text-decoration

可以設置文字下劃線、刪除線等樣式，如下示例：

還可以定義波浪線效果，如下示例：

6、水平對齊 —— text-align

有三種水平方向的對齊方式，居左，居中、居右，如下示例：

7、垂直對齊—— vertical-align

vertical-align 屬性設置一個元素的垂直對齊方式。

該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

如下示例，對齊圖片：

還有很多其它屬性，在此不每個都介紹了，可參考如下：

8、文字大小寫轉換—— text-transform

可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。如下示例：

9、文本縮進 —— text-indent

文本縮進屬性是用來指定文本的第一行的縮進。如下示例：

文本縮進可以使用絕對值如：px、pt、cm等，也可以是相對單位 %。且可以是負值，如果是負值，就相當于變成向左縮進了。

10、空白處理 —— white-space

white-space屬性指定元素內的空白怎樣處理。如下示例：

11、文字陰影 —— text-shadow

text-shadow 可以設置文字陰影效果，比如內陰影或外陰影，語法：

text-shadow: x坐標 y坐標 模糊大小 顏色;

其中x/y 坐標相對于文本左上角的偏移量，如下示例：

12、文本溢出 —— text-overflow

text-overflow 屬性指定當文本溢出時包含它的元素應該如何顯示?？梢栽O置文本被剪切、顯示省略號 (...) 或顯示自定義字符串（不是所有瀏覽器都支持）。

text-overflow 需要配合以下兩個屬性使用：

overflow: hidden;

如下示例：

總結

本篇講述了文字和文本的大部分樣式設置，掌握這些css用法非常重要，網頁大部分都是文本，要想制作一個漂亮的頁面，這些是必須要學會的，且要學會融會貫通。

本篇主要講了以下內容：

字體系列、大小、樣式、粗細等樣式的設置。
字體font簡寫屬性的使用。
文本顏色、字符間隔、單詞間隔、行高等設置。
文本修飾、大小寫轉換、文本縮進、空白處理等。
文本水平對齊、垂直對齊。
文本陰影及文本溢出。

以上都是最基本的，要多加練習，才能夠理解學會使用。感謝關注，祝學習愉快！

上篇：前端入門——css 盒子模型

在線咨詢

上一篇：「JS 逆向百例」醫保局 SM2+SM4 國產加密算
下一篇：select、poll和epoll的區別和 IO多路

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

python web自動化測試 （html）（五）

TML（網頁）

WEB

W3C

WEB標準

HTML定義

頁面基本結構

關于viewport

常見元素

元素分類

元素默認樣式

CSS（層疊樣式表）

Css的單位

字體屬性

文本屬性

Overflow屬性

濾鏡

背景屬性

優先級

基礎選擇器

組合選擇器

復合選擇器

偽類選擇器

偽元素選擇器

屬性選擇器

小結

css字體

css 文本樣式

總結

您的項目需求

python web自動化測試（html）（五）