初識(shí)CSS

CSS：Cascading Style Sheet 級(jí)聯(lián)/層疊樣式表

CSS的文件格式：.css

前端的組成：

? 結(jié)構(gòu)語(yǔ)言：HTML (蓋房子、毛坯房) 涉及到布局設(shè)計(jì)

? 表現(xiàn)語(yǔ)言：CSS (裝修)

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

CSS表格及表單美化

有效的傳遞頁(yè)面信息

使用CSS美化過(guò)的頁(yè)面文本，使頁(yè)面漂亮、美觀，吸引用戶

可以很好的突出頁(yè)面的主題內(nèi)容，使用戶第一眼可以看到頁(yè)面主要內(nèi)容

具有良好的用戶體驗(yàn)

<span> 標(biāo)簽的作用

• 能讓某幾個(gè)文字或者某個(gè)詞語(yǔ)凸顯出來(lái)

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

font-size屬性

? 單位

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

h1{font-size:12px;}

font-style屬性

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

h1{font-style:oblique;}

font-family屬性

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

font-weight屬性

值說(shuō)明

normal	默認(rèn)值，定義標(biāo)準(zhǔn)的字體
bold	粗體字體
bolder	更粗的字體
lighter	更細(xì)的字體
100、200、300、400……	定義由細(xì)到粗的字體400等同于normal，700等同于bold

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

font屬性

• 字體屬性的順序：字體風(fēng)格->字體粗細(xì)->字體大小->字體類(lèi)型

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

文本屬性

color屬性

RGB

? 十六進(jìn)制方法表示顏色：前兩位表示紅色分量，中間兩位表示綠色分量，最后兩位表示藍(lán)色分量

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

RGBA

? 在RGB基礎(chǔ)上增加了控制alpha透明度的參數(shù)，其中這個(gè)透明通道值為0~1

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

也可使用引文單詞調(diào)用，但是種類(lèi)不多

水平對(duì)齊方式

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

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

首行縮進(jìn)

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

p{font-size: 16px;/* 縮進(jìn) 你根據(jù)字體大小計(jì)算縮進(jìn)值 *//* px是絕對(duì)單位 *//*text-indent: 32px;*//* em是相對(duì)單位 它會(huì)以當(dāng)前字體大小進(jìn)行計(jì)算 */text-indent: 2em; }

行高

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

line-height: 30px;

文本裝飾

? text-decoration屬性

span{/* 下劃線 *//*text-decoration: underline;*//* 上劃線 *//*text-decoration: overline;*//* 刪除線：中劃線 *//*text-decoration: line-through;*//* 普通文字默認(rèn)情況下為none */text-decoration: none; }a{/* 超鏈接標(biāo)簽?zāi)J(rèn)文字擁有下劃線 一般我們會(huì)對(duì)其進(jìn)行下劃線去除 */text-decoration: none; }

垂直對(duì)齊方式

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

vertical-align:middle;

文本陰影

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

color:陰影顏色

x-offset X軸位移，用來(lái)指定影音水平位移量

y-offset Y軸位移，用來(lái)指定影音垂直位移量

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

caniuse.com 網(wǎng)站搜索支持的屬性

超鏈接屬性的使用

偽類(lèi)樣式

標(biāo)簽名：偽類(lèi)名{聲明;}

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

設(shè)置偽類(lèi)的順序：a：link -> a:visited -> a:hover ->a:active

鼠標(biāo)指針

• 小手型指針

  /* pointer 小手 */ cursor: pointer;

• wait 加載中

• help 幫助帶問(wèn)號(hào)

• text 文本光標(biāo)型

• crosshair 十字型

• default 默認(rèn)光標(biāo)樣式

背景樣式

背景屬性的使用

背景顏色

• background-color

  background-color:#000000;

背景圖像

• background-image

  background-image:#111111

背景圖像

• background-image屬性

  ?

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

背景重復(fù)方式

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

background-repeat:no-repeat;

背景定位

• background-position屬性

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

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

background-position:20px 20px;

背景屬性

• background屬性

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

背景尺寸

background-size

屬性值描述

auto	默認(rèn)值，使用背景圖片保持原樣
percentage	用百分值時(shí)，根據(jù)元素寬度來(lái)計(jì)算顯示比值的
cover	保持圖片原有尺寸，讓背景圖片填充
contain	讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬高比合適所定義背景的區(qū)域

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

線性漸變

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

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

徑向漸變

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

瀏覽器內(nèi)核

瀏覽器內(nèi)核前綴

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

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

列表

列表的定義

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

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

列表的分類(lèi)

• 無(wú)序列表
• 有序列表
• 定義列表

無(wú)序列表

無(wú)序列表的特性

• 沒(méi)有順序，每個(gè)<li>標(biāo)簽獨(dú)占一行(塊元素)
• 默認(rèn)<li>標(biāo)簽項(xiàng)前面有個(gè)實(shí)心小圓點(diǎn)
• 一般用于無(wú)序類(lèi)型的列表，如導(dǎo)航、側(cè)邊欄新聞、有規(guī)律的圖文組合模塊等

/*ul標(biāo)簽只能嵌套li標(biāo)簽*/ <ul><li>內(nèi)容一</li><li>內(nèi)容二</li><li>內(nèi)容三</li> </ul> <style> ul{/* 它其實(shí)是三個(gè)子屬性的集合體 但是通常用它來(lái)去除列表前綴符號(hào) */list-style: none;/*list-style: amharic;*/ } </style>

有序列表

有序列表的特性

• 有順序，每個(gè)<li>標(biāo)簽獨(dú)占一行(塊元素)
• 默認(rèn)<li>標(biāo)簽項(xiàng)前面有順序標(biāo)記
• 一般用于排序類(lèi)型的列表，如試卷、問(wèn)卷選項(xiàng)等

<ol><li>內(nèi)容一</li> </ol>

定義列表

定以列表的特性

• 沒(méi)有順序，每個(gè)<dt>標(biāo)簽、<dd>標(biāo)簽獨(dú)占一行(塊元素)
• 默認(rèn)么有標(biāo)記
• 一般用于一個(gè)標(biāo)題下有一個(gè)或多個(gè)列表項(xiàng)的情況

<dl><dt>水果</dt><dd>蘋(píng)果</dd><dd>桃子</dd> </dl>

列表樣式

值說(shuō)明語(yǔ)法示例

none	無(wú)標(biāo)記符號(hào)	list-style-type:none
disc	實(shí)心圓，默認(rèn)類(lèi)型	list-style-type:disc
circle	空心圓	list-style-type:circle
square	實(shí)心正方形	list-style-type:square
decimal	數(shù)字	list-style-type:decimal

li{list-style:none; }

表格

基本結(jié)構(gòu)

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

<table> /*表格標(biāo)簽*/<tr> /*行標(biāo)簽*/<th>第一行第一列單元格標(biāo)題</th> /*單元格標(biāo)簽*/<th>第一行第二列單元格標(biāo)題</th><th>第一行第三列單元格標(biāo)題</th></tr><tr><td>第一行第一列的單元格內(nèi)容</td><td第一行第二列的單元格內(nèi)容</td><td>第一行第三列的單元格內(nèi)容</td></tr> </table>

表格的跨列(colspan)

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

表格的跨行(rowspan)

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

表格的跨行和跨列

<tr><td colspan="3">學(xué)生成績(jī)</td> </tr> <tr><td rowspan="2">張三</td><td>語(yǔ)文</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隱藏賬號(hào)密碼)/(get顯示賬號(hào)密碼)
• action 向何處表單發(fā)送數(shù)據(jù)
• type 元素類(lèi)型
• name 元素名稱(chēng)
• value input的元素值

文本框

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

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

密碼框

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

• type=“password” 密碼框
• name 密碼框名稱(chēng)
• size 密碼框的長(zhǎng)度

單選框

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

name 值一定要設(shè)置成相同的，否則不能達(dá)成單選

type=“radio” 單選按鈕框

value 值

checked 單選按鈕選中的狀態(tài)

復(fù)選框

<input type="checkbox" name="interset" value="sports"/> 運(yùn)動(dòng) <input type="checkbox" name="interset" value="talk" checked />聊天 <input type="checkbox" name="interset" value="play" checked />玩游戲

checked 復(fù)選框選中的狀態(tài)

列表框（下拉菜單）

<select name="列表名稱(chēng)" size="行數(shù)"> <option value="選項(xiàng)的值" selected>……</option> <option value="選項(xiàng)的值">……</option> </select>

• select 列表框
• option 選項(xiàng)
• selected 默認(rèn)選中的項(xiàng)

按鈕

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

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

表單提交給服務(wù)器是的數(shù)據(jù)是以name值加上value值提交數(shù)據(jù)的,是一組鍵值對(duì)

圖片按鈕

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

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

多行文本域

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

• textarea 多行文本域
• cols 顯示的列數(shù)
• rows 顯示的行數(shù)
• 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” 郵箱

會(huì)自動(dòng)驗(yàn)證Email地址格式是否正確

網(wǎng)址

<p> 請(qǐng)輸入你的網(wǎng)址：<input type="url" name="userUrl"/></p> <input type="submit"/>

type=“url” 網(wǎng)址

會(huì)自動(dòng)驗(yàn)證URL地址格式是否正確

時(shí)間

<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 - 選取時(shí)間（小時(shí)和分鐘）
• datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間）

數(shù)字

<p>請(qǐng)輸入數(shù)字：<input type="number" name="num" min="0" max="100" step="10"/></p> <input type="submit"/>

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

滑塊

<p>請(qǐng)輸入數(shù)字：<input type="range" name="range1" min="0" max="10" step="2"/></p> <input type="submit"/>

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

搜索框

<p>請(qǐng)輸入搜索的關(guān)鍵詞：<input type="search" name="sousuo"/></p> <input type=="submit">

表單高級(jí)應(yīng)用

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

readonly 只讀

disabled 禁用

隱藏域

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

它不會(huì)顯示出來(lái)，但是如果綁定好name

表單元素的標(biāo)注

增強(qiáng)鼠標(biāo)的可用性

自動(dòng)將焦點(diǎn)轉(zhuǎn)移到與該標(biāo)注相關(guān)的表單元素上

/*for屬性用來(lái)關(guān)聯(lián)表單元素的id屬性*/ <label for="id">標(biāo)注的文本</label> <input type="radio" name="gender" id="male"/>

for=“id” 表單元素的id

id=“male”表單元素id

CSS3的高級(jí)選擇器

選擇器：選中要被設(shè)置樣式的標(biāo)簽

基本選擇器

• 標(biāo)簽選擇器
• 類(lèi)選擇器
• ID選擇器

高級(jí)選擇器

• 層次選擇器
• 結(jié)構(gòu)偽類(lèi)選擇器
• 屬性選擇器
• 復(fù)合選擇器

層次選擇器

后代選擇器

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

body p{background:red;}

子選擇器

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

body>p{background:red;}

相鄰兄弟選擇器

E+F表示選擇E選擇器后緊挨著的F選擇器內(nèi)容

.active+p{background:green;}

通用兄弟選擇器

E~F表示選擇E選擇器后的所有F選擇器內(nèi)容

.active~p{background:yellow;}

結(jié)構(gòu)偽類(lèi)選擇器

<html> <head lang="en"><meta charset="UTF-8"><title>使用CSS3結(jié)構(gòu)偽類(lèi)選擇器</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>

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

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

? E:Fnth-child(n)在父級(jí)里從一個(gè)元素開(kāi)始查找，不分類(lèi)型

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

屬性選擇器

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

復(fù)合選擇器

• 并集選擇器

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

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

  其他選擇器 類(lèi)選擇器/ID選擇器

  例如：p.div(X)

  p.active

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。