初識CSS

CSS：Cascading Style Sheet 級聯/層疊樣式表

CSS的文件格式：.css

前端的組成：

? 結構語言：HTML (蓋房子、毛坯房) 涉及到布局設計

? 表現語言：CSS (裝修)

? 行為語言：JavaScript (安裝點電梯… 基于事件的)

CSS表格及表單美化

有效的傳遞頁面信息

使用CSS美化過的頁面文本，使頁面漂亮、美觀，吸引用戶

可以很好的突出頁面的主題內容，使用戶第一眼可以看到頁面主要內容

具有良好的用戶體驗

<span> 標簽的作用

• 能讓某幾個文字或者某個詞語凸顯出來

<span>字體</span> <p>凸顯<span class="show">“字體”</span></p>

font-size屬性

? 單位

? px(像素)還有em、rem、cm、mm、pt、pc

h1{font-size:12px;}

font-style屬性

? normal(默認)、italic(傾斜)和oblique(通用傾斜)

h1{font-style:oblique;}

font-family屬性

h3{/*font-family: "楷體";*//*font-family: "宋體";*//*font-family: "\u5b8b\u4f53";*//* 如果這樣設置是為了防止當前面的字體無法使用時 可以作為替換性內容 *//* 一般會對中文和英文分別設置字體 */font-family: tahoma, arial, "Hiragino Sans GB", "宋體", sans-serif; }

font-weight屬性

值說明

normal	默認值，定義標準的字體
bold	粗體字體
bolder	更粗的字體
lighter	更細的字體
100、200、300、400……	定義由細到粗的字體400等同于normal，700等同于bold

p{/*font-weight: bold;*//* 加粗 *//*font-weight: 700;*//* 更細的 */font-weight: lighter;font-weight: normal; }

font屬性

• 字體屬性的順序：字體風格->字體粗細->字體大小->字體類型

p span{font:oblique bold 12px "楷體"}/* font-size: 12px/（行高）line-height: 1.5; */ font: 12px/1.5 tahoma,arial,"\5b8b\4f53";

文本屬性

color屬性

RGB

? 十六進制方法表示顏色：前兩位表示紅色分量，中間兩位表示綠色分量，最后兩位表示藍色分量

? rgb(r,g,b):正整數取值為0~255

RGBA

? 在RGB基礎上增加了控制alpha透明度的參數，其中這個透明通道值為0~1

color:#00ff00; color:rgb(204,232,207); color:rgba(204,232,207,0.5)

也可使用引文單詞調用，但是種類不多

水平對齊方式

• text-align屬性(必須保證要設置的對齊文字是處于塊元素內的)

p{/*text-align: left;*//*text-align: right;*//*text-align: center;*//* 兩端對齊 *//*text-align: justify;*/ }

首行縮進

• text-indent：2em; em相對值 也可以是px

p{font-size: 16px;/* 縮進 你根據字體大小計算縮進值 *//* px是絕對單位 *//*text-indent: 32px;*//* em是相對單位 它會以當前字體大小進行計算 */text-indent: 2em; }

行高

• line-height : px
• 行高平均分配在文字的上下方

line-height: 30px;

文本裝飾

? text-decoration屬性

span{/* 下劃線 *//*text-decoration: underline;*//* 上劃線 *//*text-decoration: overline;*//* 刪除線：中劃線 *//*text-decoration: line-through;*//* 普通文字默認情況下為none */text-decoration: none; }a{/* 超鏈接標簽默認文字擁有下劃線 一般我們會對其進行下劃線去除 */text-decoration: none; }

垂直對齊方式

? vertical-align屬性：middle(中)、top(上)、bottom(下)

vertical-align:middle;

文本陰影

text-shadow：color x-offset y-offset blur-radius;

color:陰影顏色

x-offset X軸位移，用來指定影音水平位移量

y-offset Y軸位移，用來指定影音垂直位移量

blur-radius 陰影模糊半徑，代表陰影向外模糊的模糊范圍

caniuse.com 網站搜索支持的屬性

超鏈接屬性的使用

偽類樣式

標簽名：偽類名{聲明;}

a:hover{color:#B46210text-decoration:underline; }

設置偽類的順序：a：link -> a:visited -> a:hover ->a:active

鼠標指針

• 小手型指針

  /* pointer 小手 */ cursor: pointer;

• wait 加載中

• help 幫助帶問號

• text 文本光標型

• crosshair 十字型

• default 默認光標樣式

背景樣式

背景屬性的使用

背景顏色

• background-color

  background-color:#000000;

背景圖像

• background-image

  background-image:#111111

背景圖像

• background-image屬性

  ?

  background-image：url(../image/picture.jpg);

背景重復方式

• background-repeat屬性
• repeat：沿水平和垂直兩個方向平鋪
• no-repeat-x：不平鋪，即顯示一次
• repeat-x：只沿水平方向平鋪
• repeat-y：只沿垂直方向平鋪

background-repeat:no-repeat;

背景定位

• background-position屬性

Xpos Ypos單位：px，Xpos表示水平位置，Ypos便是垂直位置

X% Y%	使用百分比表示背景的位置
X、Y方向關鍵詞	水平方向的關鍵詞：left、center、right 垂直防線的關鍵詞：top、center、bottom

background-position:20px 20px;

背景屬性

• background屬性

background：#000000(背景顏色) url(../image/picture.jpg)(背景圖像) 200px 20px(背景定位) no-repeat(背景不重復顯示)

背景尺寸

background-size

屬性值描述

auto	默認值，使用背景圖片保持原樣
percentage	用百分值時，根據元素寬度來計算顯示比值的
cover	保持圖片原有尺寸，讓背景圖片填充
contain	讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬高比合適所定義背景的區域

background-size:auto; background-size:50%(寬) 50%(高); background-size:50px 100px;

線性漸變

• 顏色沿著一條直線過度：從左到右、從右到左、從上到下等

  /*position漸變方向,color顏色*/ linear-gradient(position,color1,color2,...) /*上下*/ background:linear-gradient(to top,red,green); /*左右*/ background:linear-gradient(to left,red,green);

徑向漸變

• 圓形或橢圓形漸變，顏色不在沿著一條直線變化，而是從一個起點朝所有方向混合

瀏覽器內核

瀏覽器內核前綴

IE	Trident	-ms-
Chrome	Webkit	-webkit-
Safari	Webkit	-webkit-
Opera	Blink	-o-
Firefox	Mozill2a	-moz-

兼容Webkit內核的瀏覽器 -webkit-linear-gradient(position,color1,color2,...)

列表

列表的定義

? 列表就是信息資源的一種展示形式

? 以列表的樣式顯示，可以使信息結構化條理化，便于瀏覽者能更好的獲取信息

列表的分類

• 無序列表
• 有序列表
• 定義列表

無序列表

無序列表的特性

• 沒有順序，每個<li>標簽獨占一行(塊元素)
• 默認<li>標簽項前面有個實心小圓點
• 一般用于無序類型的列表，如導航、側邊欄新聞、有規律的圖文組合模塊等

/*ul標簽只能嵌套li標簽*/ <ul><li>內容一</li><li>內容二</li><li>內容三</li> </ul> <style> ul{/* 它其實是三個子屬性的集合體 但是通常用它來去除列表前綴符號 */list-style: none;/*list-style: amharic;*/ } </style>

有序列表

有序列表的特性

• 有順序，每個<li>標簽獨占一行(塊元素)
• 默認<li>標簽項前面有順序標記
• 一般用于排序類型的列表，如試卷、問卷選項等

<ol><li>內容一</li> </ol>

定義列表

定以列表的特性

• 沒有順序，每個<dt>標簽、<dd>標簽獨占一行(塊元素)
• 默認么有標記
• 一般用于一個標題下有一個或多個列表項的情況

<dl><dt>水果</dt><dd>蘋果</dd><dd>桃子</dd> </dl>

列表樣式

值說明語法示例

none	無標記符號	list-style-type:none
disc	實心圓，默認類型	list-style-type:disc
circle	空心圓	list-style-type:circle
square	實心正方形	list-style-type:square
decimal	數字	list-style-type:decimal

li{list-style:none; }

表格

基本結構

• 行(tr)
• 列(td)
• 單元格

<table> /*表格標簽*/<tr> /*行標簽*/<th>第一行第一列單元格標題</th> /*單元格標簽*/<th>第一行第二列單元格標題</th><th>第一行第三列單元格標題</th></tr><tr><td>第一行第一列的單元格內容</td><td第一行第二列的單元格內容</td><td>第一行第三列的單元格內容</td></tr> </table>

表格的跨列(colspan)

<table><tr><td colspan="n"(所跨的列數)>單元格內容</td></tr><tr><td>單元格內容</td></tr> </table>

表格的跨行(rowspan)

<table><tr><td rowspan="n"(所跨的行數)>單元格內容</td></tr><tr><td>單元格內容</td></tr> </table>

表格的跨行和跨列

<tr><td colspan="3">學生成績</td> </tr> <tr><td rowspan="2">張三</td><td>語文</td><td>98</td> </tr>

表單

<from name="from1" method="post" action = "result.html"><p>名字：<input name="name" type="text"> </p><p>名字：<input name="pass" type="password"> </p><p><input type="submit" name="Button" value="提交"/><input type="reset" name="Reset" value="重填"/></p> </form>

• name 表名
• moetod 提交方式(post隱藏賬號密碼)/(get顯示賬號密碼)
• action 向何處表單發送數據
• type 元素類型
• name 元素名稱
• value input的元素值

文本框

<input type="text" name="userName" value="用戶名" size="30" maxlength="20"/>

• type=“text” 文本框
• name 文本框名稱
• value 用戶名
• size 文本框長度取值范圍[1-7]
• maxlenght 文本框可輸入字符最大值

密碼框

<input type="password" name="pass" size="20">

• type=“password” 密碼框
• name 密碼框名稱
• size 密碼框的長度

單選框

<input name="gen" type="radio" value="男" checked />男 <input name="gen type="radio" value="女" />女

name 值一定要設置成相同的，否則不能達成單選

type=“radio” 單選按鈕框

value 值

checked 單選按鈕選中的狀態

復選框

<input type="checkbox" name="interset" value="sports"/> 運動 <input type="checkbox" name="interset" value="talk" checked />聊天 <input type="checkbox" name="interset" value="play" checked />玩游戲

checked 復選框選中的狀態

列表框（下拉菜單）

<select name="列表名稱" size="行數"> <option value="選項的值" selected>……</option> <option value="選項的值">……</option> </select>

• select 列表框
• option 選項
• selected 默認選中的項

按鈕

<input type="reset" name="butReset" value="reset按鈕"/> <input type="submit" name="butSubmit" value="submit按鈕"/> <input type="button" name="butButton" value="button按鈕"/> <!-- 未來結合js使用 --> <input type="button" value="普通按鈕" /> <br/> <from action="success.html">用戶名：<input type="text" name="username" value="張三"/><!-- 提交表單 --><input type="submit" name="butSubmit" value="提交"/><!-- 效果等同于提交按鈕 但是可以設立圖片 --><input type="image" src="login.gif"/><!-- 重置按鈕 可以恢復為表單初識的狀態 --><input type="reset" value="重置"/><!-- button系列的按鈕 --><!-- 默認效果和提交按鈕一樣 --><button type="submit">提交按鈕</button><button type="button">普通按鈕</button><button type="reset">重置</button> </from>

• type=“reset” 重置按鈕
• type=“submit” 提交按鈕
• type=”button” 普通按鈕
• type=“image” 圖片按鈕
• name= 傳輸時的鍵名
• value 按鈕上顯示的文字

表單提交給服務器是的數據是以name值加上value值提交數據的,是一組鍵值對

圖片按鈕

<input type="image" src="images/login.jpg">

• type=“image”圖片按鈕
• src 圖片路徑

多行文本域

<textarea name="showText" cols="x" rows="y" style:resize:none;>文本內容</textarea>

• textarea 多行文本域
• cols 顯示的列數
• rows 顯示的行數
• style:resize:none; 可以取消可縮放效果

文件域

<from action="" method="post"> <p> <input type="file" name="files"/> <input type="submit" name="upload" value="上傳"></p> </form>

type=“file” 文件域

郵箱

<p>郵箱：<input type="email" name="email"/></p> <input type="submit"/>

type=“email” 郵箱

會自動驗證Email地址格式是否正確

網址

<p> 請輸入你的網址：<input type="url" name="userUrl"/></p> <input type="submit"/>

type=“url” 網址

會自動驗證URL地址格式是否正確

時間

<input type="date" name="user_date" /> <input type="month" name="user_date" /> <input type="week" name="user_date" /> <input type="time" name="user_date" /> <input type="datetime-local" name="user_date" />

• date - 選取日、月、年
• month - 選取月、年
• week - 選取周和年
• time - 選取時間（小時和分鐘）
• datetime-local - 選取時間、日、月、年（本地時間）

數字

<p>請輸入數字：<input type="number" name="num" min="0" max="100" step="10"/></p> <input type="submit"/>

• type=“number” 數字
• min 允許的最小值
• max 允許的最大值
• step 合法的數字間隔

滑塊

<p>請輸入數字：<input type="range" name="range1" min="0" max="10" step="2"/></p> <input type="submit"/>

• type=“range” 滑塊
• min 允許的最小值
• max 允許的最大值
• step 合法的數字間隔

搜索框

<p>請輸入搜索的關鍵詞：<input type="search" name="sousuo"/></p> <input type=="submit">

表單高級應用

/*只讀*/ <input name="name" type="text" value="張三" readonly> /*禁用*/ <input type="submit" disabled value="保存">

readonly 只讀

disabled 禁用

隱藏域

<input type="hidden" value="666" name="userid">

它不會顯示出來，但是如果綁定好name

表單元素的標注

增強鼠標的可用性

自動將焦點轉移到與該標注相關的表單元素上

/*for屬性用來關聯表單元素的id屬性*/ <label for="id">標注的文本</label> <input type="radio" name="gender" id="male"/>

for=“id” 表單元素的id

id=“male”表單元素id

CSS3的高級選擇器

選擇器：選中要被設置樣式的標簽

基本選擇器

• 標簽選擇器
• 類選擇器
• ID選擇器

高級選擇器

• 層次選擇器
• 結構偽類選擇器
• 屬性選擇器
• 復合選擇器

層次選擇器

后代選擇器

E F表示選擇E選擇器下的F選擇器

body p{background:red;}

子選擇器

E>F 表示選擇E選擇器下的F選擇器(只會選擇直接子元素)

body>p{background:red;}

相鄰兄弟選擇器

E+F表示選擇E選擇器后緊挨著的F選擇器內容

.active+p{background:green;}

通用兄弟選擇器

E~F表示選擇E選擇器后的所有F選擇器內容

.active~p{background:yellow;}

結構偽類選擇器

<html> <head lang="en"><meta charset="UTF-8"><title>使用CSS3結構偽類選擇器</title> </head> <body><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul> </body> </html>

/*第一個p標簽變成紅色*/ /*父級里面第一個子元素*/ p:first-child{background:red; } /*第一個li標簽變成紅色*/ li:first-child{background:red; } /*最后一個li標簽變成紅色*/ li:last-child{background:red; } /*第二個li標簽變成綠色*/ li:nth-child(2){background:green; } /*父級里面第一個類型是p的子元素*/ p:first-of-tyype{background:blue; }

使用E:F nth-child(n) 和E Fnth-of-type(n) 關鍵點

? E:Fnth-child(n)在父級里從一個元素開始查找，不分類型

? E:Fnth-of-type(n)在父級里先看類型，在看位置

屬性選擇器

a{id}{background:yellow} a[id=first]{background:red; } a[href^=http]{brackground:red;} a[href&=png]{background:red;} a[href*=links]{background:red;}

復合選擇器

• 并集選擇器

  E,F 表示E和F選擇器都被選中

• 交集選擇器(小心語法)

  其他選擇器 類選擇器/ID選擇器

  例如：p.div(X)

  p.active

/*1.使用并集選擇器將p選擇器和ul選擇器的范圍內背景顏色都設置為藍色*/ /*p,ul{ background: green; }*//*2.使用交集選擇器將p選擇器和.active選擇器的范圍內公共的交集部分顏色設置為藍色*/ /*p.active{ background: red; }*/

總結

以上是生活随笔為你收集整理的CSS表格及表单美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。