23-Web-表单和CSS基础
生活随笔
收集整理的這篇文章主要介紹了
23-Web-表单和CSS基础
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.表單標(biāo)簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 1.表單標(biāo)簽:formform--><form action="" method=""> </form></body> </html>2.input標(biāo)簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- input標(biāo)簽會(huì)因?yàn)閠ype屬性值不同功能完全不一樣 --><!-- 1.文本輸入框: textname屬性:對(duì)輸入框輸入的數(shù)據(jù)進(jìn)行說(shuō)明和區(qū)分的(類似字典的key)value屬性:就是輸入框中輸入和顯示的內(nèi)容(和輸入框中的內(nèi)容是雙向綁定)placeholder屬性:輸入框中的提示信息maxlength屬性:最大輸入的文字的個(gè)數(shù)--><label for="tel">手機(jī)號(hào):</label><input id="tel" type="text" name="tel" value="15300022703" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" maxlength="11"/><br><br><label for="uname">用戶名:</label><input id="uname" type="text" name="username" value="" placeholder="請(qǐng)輸入用戶名"/><br><br><!-- 2.密碼輸入框:password name屬性:對(duì)輸入框輸入的數(shù)據(jù)進(jìn)行說(shuō)明和區(qū)分的(類似字典的key)value屬性:就是輸入框中輸入和顯示的內(nèi)容(和輸入框中的內(nèi)容是雙向綁定)placeholder屬性:輸入框中的提示信息maxlength屬性:最大輸入的文字的個(gè)數(shù)--><label for="pw">密碼:</label><input id="pw" type="password" name="pw" value="123456" placeholder="請(qǐng)輸入密碼"/><br><br><!-- 3.單選按鈕: radioname屬性:同一組選項(xiàng)的name屬性必須相同,才能做到單選的效果value屬性:指定按鈕選中的時(shí)候?qū)?yīng)的值checked屬性:設(shè)置默認(rèn)選中--><font>性別:</font><input checked="checked" type="radio" name="sex" value="男" id="boy"/><label for="boy">男</label><input type="radio" name="sex" value="女" id="girl"/><label for="girl">女</label><br><br><!-- 4.復(fù)選按鈕: checkboxname屬性:同一組選項(xiàng)的name屬性必須相同value屬性:指定按鈕選中的時(shí)候?qū)?yīng)的值checked屬性:設(shè)置默認(rèn)選中--><font size="" color="">愛(ài)好:</font><input type="checkbox" name="hobby" id="b" value="籃球" /><label for="b">籃球</label><input checked="checked" type="checkbox" name="hobby" id="p" value="乒乓球" /><label for="p">乒乓球</label><input type="checkbox" name="hobby" id="y" value="羽毛球" /><label for="y">羽毛球</label><input type="checkbox" name="hobby" id="w" value="網(wǎng)球" /><label for="w">網(wǎng)球</label><br><br><!-- 5.按鈕:button --><input type="button" name="" id="" value="確定" /><input type="button" name="" id="" value="取消" /><br><br><!-- button標(biāo)簽 --><button type="button">確定</button><button type="button"><img src="./img/baidu.ico" ><br>百度</button><br><br><!-- 6.重置按鈕 和 提交按鈕重置:重置當(dāng)前form標(biāo)簽中所有的相關(guān)標(biāo)簽的狀態(tài)提交:將<strong>當(dāng)前form標(biāo)簽</strong>中所有設(shè)置了name屬性的相關(guān)標(biāo)簽以: name=value 形式對(duì)應(yīng)數(shù)據(jù)進(jìn)行提交--><input type="reset" name="" id="" value="重置1" /><br><br><br><form action="" method="get"><input type="text" name="username" placeholder="用戶名"/><br><br><input type="password" name="password" id="" value="123" placeholder="密碼"/><br><br><input type="reset" value="重置2"/><input type="submit" name="" id="" value="提交" /></form></body> </html>3.select和textarea標(biāo)簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 1.select標(biāo)簽 select - 整個(gè)下拉列表option - 下拉列表中的選項(xiàng)注意:name和value屬性都需要賦值--><form action="" method="get"><!-- 基本的下拉列表 --><select name="province"><option value ="四川">四川省</option><option value ="遼寧">遼寧省</option><option value ="吉林">吉林省</option><option value ="山東">山東省</option></select><select name="city"><option value="成都">成都市</option><option value="綿陽(yáng)">綿陽(yáng)市</option></select><br><br><!-- 內(nèi)容進(jìn)行分類 --><select name="city"><!-- optgroup添加分組 --><optgroup label="四川省"></optgroup><option value="成都">成都市</option><option value="綿陽(yáng)">綿陽(yáng)市</option><option value="德陽(yáng)">德陽(yáng)市</option><optgroup label="遼寧省"></optgroup><option value="大連">大連市</option><option value="沈陽(yáng)">沈陽(yáng)市</option><option value="鐵嶺">鐵嶺市</option></select><input type="submit" value="提交"/></form><br><br><!-- 2.textarea標(biāo)簽 rows屬性:最能顯示的行數(shù)(控制高度)cols屬性:列數(shù)(控制寬度)name屬性:區(qū)分和提交數(shù)據(jù)的時(shí)候用placeholder屬性:maxlength屬性注意:textarea不需要value屬性,標(biāo)簽內(nèi)容就相當(dāng)于value--><textarea rows="4" cols="40" name="comment" placeholder="請(qǐng)輸入你的建議" maxlength="200">沒(méi)有意見!</textarea><!-- div標(biāo)簽無(wú)語(yǔ)義標(biāo)簽, 一般用來(lái)對(duì)標(biāo)簽進(jìn)行分組和分塊而存在span標(biāo)簽也是無(wú)語(yǔ)義的標(biāo)簽--><div id=""></div></body> </html>4.CSS基礎(chǔ)語(yǔ)法
<!--1. 什么是CSSCSS又叫層疊樣式表是web標(biāo)志中的表現(xiàn)標(biāo)準(zhǔn),負(fù)責(zé)標(biāo)簽(內(nèi)容)樣式和布局2.CSS代碼寫在哪兒內(nèi)聯(lián)樣式表 - 將css代碼寫在標(biāo)簽的style屬性中(樣式只針對(duì)一個(gè)標(biāo)簽有效)內(nèi)部樣式表 - 將css代碼寫style標(biāo)簽中(樣式可以針對(duì)整個(gè)html中所有的標(biāo)簽)外部樣式表 - 將css代碼寫在css文件中,然后在html中用link標(biāo)簽去導(dǎo)入(樣式可以針對(duì)所有的html中所有的標(biāo)簽有效)內(nèi)聯(lián)樣式表的優(yōu)先級(jí)最高, 內(nèi)部樣式表和外部樣式表誰(shuí)后出現(xiàn)誰(shuí)的優(yōu)先級(jí)高3.CSS代碼怎么寫語(yǔ)法:選擇器{屬性名1:屬性值1;屬性名2:屬性值2;...}說(shuō)明:選擇器 - 選中當(dāng)前需要添加樣式的標(biāo)簽{} - 固定寫法(注意:內(nèi)聯(lián)樣式表中 選擇器{} 需要省略)屬性 - 以 屬性名:值 的形式存在,一個(gè)屬性結(jié)束后要分號(hào);CSS中有哪些屬性,每個(gè)屬性干嘛的都是固定(CSS3中有200多個(gè)屬性)常用屬性:color(文字顏色)、background-color(背景顏色)、font-size(字體大小)、width(寬度)、height(高度)、屬性值:a.數(shù)字大小需要添加單位(px)b.顏色值有三種方法:顏色的英文單詞(red)、#6位的十六進(jìn)制數(shù)(#ff0000)、rgb或者rgba值(rgb(255,0,0))rgba(255,0,0,1) -最后一個(gè)參數(shù)是透明度,取值范圍是0~1--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!-- 外部樣式表 --><link rel="stylesheet" type="text/css" href="css/css1.css"/><!-- 內(nèi)部樣式表 --><style type="text/css">#b1{color: blue;background-color: rgba(255,0,0,0.5);}#b2{background-color: gold;width: 200px;}#p1{color: green;background-color: greenyellow;}</style></head><body><!-- 內(nèi)聯(lián)樣式表 --><p id="p1" style="color: red; font-size: 20px;">我是段落1</p><h1 id="b1">我是標(biāo)題1</h1><h1 id="b2">我是標(biāo)題2</h1><div id="div1"></div><div id="div2"></div></body> </html>5.選擇器
<!-- 1. 常用選擇器 1)標(biāo)簽選擇器(元素選擇器) - 直接將標(biāo)簽名作為選擇器,選中當(dāng)前頁(yè)面中所有指定的標(biāo)簽 p{} - 選中當(dāng)前頁(yè)面中所有的p標(biāo)簽 a{} - 選中所有的a標(biāo)簽2)id選擇器 - 在id屬性值前加#作為一個(gè)選擇器,選中當(dāng)前頁(yè)面中id值是指定值的標(biāo)簽(id一般是唯一的) #p1{} - 選中id屬性值為p1的標(biāo)簽3)類選擇器(class選擇器) - 在class屬性之前加.作為一個(gè)選擇器,選中當(dāng)前頁(yè)面中所有class值是指定值的標(biāo)簽 .p1 - 選中class屬性值為p1的標(biāo)簽 注意:不同的標(biāo)簽的class值可以相同,同一個(gè)標(biāo)簽可以同時(shí)擁有多個(gè)不同的class值(多個(gè)之間用空格隔開)4)后代選擇器 - 將多個(gè)獨(dú)立的選擇器用空格隔開作為一個(gè)選擇器 div #p1{} - 選中div標(biāo)簽中id是p1的標(biāo)簽(最終選中的是id是p1的標(biāo)簽,但是這個(gè)標(biāo)簽必須是div的后代)5)父子選擇器 - 將多個(gè)獨(dú)立的選擇器用>隔開作為一個(gè)選擇器 div>.c1{} - 選中div中class值是c1的子標(biāo)簽6) 群組選擇器 - 將多個(gè)獨(dú)立的選擇器用逗號(hào)隔開作為一個(gè)選擇器,同時(shí)選中每個(gè)選擇器選中的標(biāo)簽 p,a{} - 選中所有的p標(biāo)簽和所有的a標(biāo)簽 #p1,.c1,a{} - 選中id是p1的標(biāo)簽和class是c1的標(biāo)簽以及所有的a標(biāo)簽7)通配符 - 將*作為選擇器,選中當(dāng)前頁(yè)面中所有的標(biāo)簽 *{}--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">/* 1.標(biāo)簽選擇器 *//* p{color: red;} *//* 2.id選擇器 *//* #p1{color: #0000FF;} *//* 3.類選擇器 *//* .p1{color: #008000;}.c1{background-color: #FFD700;} *//* 4.后代選擇器 *//* div #p1{background-color: #ADFF2F;} *//* div>.c1{background-color: #ADFF2F;color: red;} */*{color: red;}</style></head><body><!-- 1.標(biāo)簽選擇器示例 --><!-- <h1>我是標(biāo)題1</h1> --><!-- <p>我是段落1</p><a href="https://www.baidu.com">我是超鏈接1</a><p>我是段落2</p><div id=""><h2>我是標(biāo)題2</h2><p>我是段落3</p></div> --><!-- 2.id選擇器 --><!-- <p>我是段落1</p><a href="https://www.baidu.com">我是超鏈接1</a><p id="p1">我是段落2</p><div id=""><h2>我是標(biāo)題2</h2><p>我是段落3</p></div> --><!-- 3.class選擇器 --><!-- <p class="p1">我是段落1</p><a class="c1" href="https://www.baidu.com">我是超鏈接1</a><p class="c1">我是段落2</p><div id=""><h2 class="p1">我是標(biāo)題2</h2><p class="c1 p1">我是段落3</p></div> --><!-- 4.后代選擇器 --><!-- <p id="p1">我是段落1</p> --><!-- <div id=""><p id="p1">我是段落1</p></div> --><!-- <div id=""><p>我是段落1<p id="p1">我是段落2</p></p></div> --><!-- 5.父子選擇器 --><h1 class="c1">我是標(biāo)題1</h1><div id=""><p>我是段落1</p><p class="c1">我是段落2</p><p><font class="c1">我是文字1</font></p><div id=""><a href="" class="c1">我是超鏈接</a></div></div></body> </html>6.選擇器的優(yōu)先級(jí)
<!--選擇器的優(yōu)先級(jí):選擇器的優(yōu)先級(jí)看選擇器的權(quán)重值,誰(shuí)的權(quán)重值大誰(shuí)的優(yōu)先級(jí)就高,如果權(quán)重值相同誰(shuí)后執(zhí)行誰(shuí)的優(yōu)先級(jí)就高,內(nèi)聯(lián)樣式表的優(yōu)先級(jí)最高。標(biāo)簽選擇器:1class選擇器:2id選擇器:4可以在某個(gè)屬性后加 !important 讓當(dāng)前屬性的優(yōu)先級(jí)最高(內(nèi)聯(lián)也比不上)--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.c2{color: green;}#p1{color: red;}p{color: blue;}#div2 p{background-color: #ADFF2F;}.c2 .c3 .c4 p{background-color: yellow !important;}</style></head><body><div id="div1" class="c1"><p class="c2" id="p1">我是段落1</p></div><div id="div2" class="c2"><div class="c3"><div class="c4"><p style="background-color: #FFA500;">我是段落3</p></div></div></div></body> </html>7.偽類選擇器
<!--1.什么是偽類選擇器偽類選擇器選中的是標(biāo)簽的狀態(tài),可以讓同一個(gè)標(biāo)簽在不同的狀態(tài)下有不同的樣式普通選擇器:偽類選擇器2.常見的偽類選擇器link - 鏈接沒(méi)有成功訪問(wèn)過(guò)對(duì)應(yīng)的狀態(tài);(只針對(duì)超鏈接有效)visited - 鏈接已經(jīng)訪問(wèn)過(guò)的對(duì)應(yīng)的狀態(tài);(只針對(duì)超鏈接有效)hover - 鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài);(針對(duì)所有可見標(biāo)簽有效)active - 鼠標(biāo)按下沒(méi)有彈起來(lái)的時(shí)候?qū)?yīng)的狀態(tài);(針對(duì)所有可見標(biāo)簽有效)focus - 成為焦點(diǎn)對(duì)應(yīng)的狀態(tài)(正在操作某一個(gè)標(biāo)簽對(duì)應(yīng)的狀態(tài));(一般用于表單相關(guān)標(biāo)簽)--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">a{text-decoration: none;}a:link{color: #008000;}a:visited{color: darkgray;}a:hover{color: red;}a:active{color: yellow;}#div1{width: 100px;height: 100px;background-color: yellowgreen;}#div1:hover{width: 60px;height: 60px;}img:active{border: solid red 1px;}input{border: none;border-bottom: solid gray 1px;}input:focus{outline: none;border-bottom: solid blueviolet 2px;}</style></head><body><a id="a1" href="https://www.baidu.com">我是超鏈接</a><div id="div1"></div><img src="img/luffy.jpg" ><input type="password" name="" /></body> </html>8.CSS核心屬性
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DAY4:CSS核心屬性</title> <style> *{ margin:0; padding:0;} body{ padding: 30px; padding-top:10px; line-height: 35px; font-family: "微軟雅黑";} h1,h2{padding: 20px 0;} h3{ background: #00AA88;color: #FFFCF4;font-size: 20px;font-weight: 700;margin: 10px 0;border-radius: 4px;padding: 5px 0px 5px 15px;} p{ line-height: 40px;} ul li{ list-style: none;line-height: 40px;} span{ color: #199475; font-weight: 700; font-size:18px; display: block; border-radius: 4px; padding: 10px; font-size: 18px; padding-left: 0px;} em{ font-style: normal; color:red;} .other{ color:#044D22;} .oo{ color:red; display:inline; font-size:18px; font-weight:normal;} .marleft{ margin-left:30px;} .marbtom{ margin:15px 0; font-weight:600;} .borderbtm{ border-bottom: solid 1px #eee;padding-bottom: 15px;margin-bottom: 15px;} .textcon{margin: 10px 0;border: solid 1px #ddd;border-left-width: 6px;padding: 10px;border-radius: 4px;border-color: #f60;} .oos{ color:#000; font-weight:800;} </style> </head><body> <div class="boxs"><h1>DAY4:CSS核心屬性</h1><h2 class="borderbtm">學(xué)習(xí)目標(biāo)</h2><ul ><li>1、css浮動(dòng)屬性詳解</li><li>2、css文本屬性</li><li>3、css列表屬性</li><li>4、css背景屬性</li><li>5、css邊框?qū)傩?span id="ozvdkddzhkzd" class="token tag"></li></ul><h3>一、css浮動(dòng)屬性詳解</h3><div class="marleft"></p><blockquote class="textcon"><strong class="oo"></strong><br>無(wú)論多么復(fù)雜的布局,<strong class="oo">其基本出發(fā)點(diǎn)均是:“如何在一行顯示多個(gè)div元素”。</strong><br>顯然標(biāo)準(zhǔn)流已經(jīng)無(wú)法滿足需求,這就要用到浮動(dòng)。<br>浮動(dòng)可以理解為讓某個(gè)div元素脫離標(biāo)準(zhǔn)流,漂浮在標(biāo)準(zhǔn)流之上,和標(biāo)準(zhǔn)流不是一個(gè)層次。<br></p><p>1.什么是浮動(dòng)元素的脫離文檔流?</p><p>首先要知道,div是塊級(jí)元素,在頁(yè)面中獨(dú)占一行,自上而下排列,也就是傳說(shuō)中的標(biāo)準(zhǔn)流(網(wǎng)頁(yè)的正常排版順序)。</p><p>脫離文檔流: 就是脫離正常的網(wǎng)頁(yè)排版順序。成為浮動(dòng)流(浮動(dòng)后的元素就是浮動(dòng)流)。</p><p>簡(jiǎn)單來(lái)說(shuō)當(dāng)某一個(gè)元素浮動(dòng)之后, 那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣, 這個(gè)就是脫離文檔流。</p></blockquote><blockquote class="textcon"><p><strong class="oo">浮動(dòng)規(guī)律:</strong>假如某個(gè)div元素A是浮動(dòng)的,如果A元素上一個(gè)元素也是浮動(dòng)的,那么A元素會(huì)跟隨在上一個(gè)元素的后邊(如果一行放不下這兩個(gè)元素,那么A元素會(huì)被擠到下一行);如果A元素上一個(gè)元素是標(biāo)準(zhǔn)流中的元素,那么A的相對(duì)垂直位置不會(huì)改變,也就是說(shuō)A的頂部總是和上一個(gè)元素的底部對(duì)齊。<br>div的順序是HTML代碼中div的順序決定的。<br>靠近頁(yè)面邊緣的一端是前,遠(yuǎn)離頁(yè)面邊緣的一端是后。<br></p></blockquote><!-- <img src="images/pic5.png"/>--></p><p>2.浮動(dòng)元素脫離文檔流之后會(huì)有什么影響?</p><p>如果前面一個(gè)元素浮動(dòng)了, 而后面一個(gè)元素沒(méi)有浮動(dòng) , 那么這個(gè)時(shí)候前面一個(gè)元就會(huì)蓋住后面一個(gè)元素。元素浮動(dòng)之前,也就是在標(biāo)準(zhǔn)流中,是豎向排列的,而浮動(dòng)之后可以理解為橫向排列。</p><p><br>3.清除浮動(dòng)是為了解決高度塌陷問(wèn)題和元素重疊問(wèn)題。<br></p><p>4.清除浮動(dòng)的方法:</p><p>(1)添加空盒子,較流行。缺點(diǎn)是為清除浮動(dòng),頁(yè)面添加的空盒子較多,會(huì)造成冗余代碼,新手容易暈菜。 定義:在被浮動(dòng)的元素(同級(jí)元素)后面添加一個(gè)空的div,并且定義一個(gè)類名,賦給空div。語(yǔ)法:.clear{clear:both;}</p><p>(2)overflow:hidden、較簡(jiǎn)單,兼容市面上大部分瀏覽器。缺點(diǎn):做開發(fā)時(shí),有些公司會(huì)嚴(yán)格要求開發(fā)技術(shù)點(diǎn),不建議使用。 定義:先定義一個(gè)類名,然后把定義好的類名賦給浮動(dòng)元素的父級(jí)元素。 語(yǔ)法:.clear{overflow:hidden;}</p><p>(3)最流行、最常用、可兼容所有瀏覽器。稱為萬(wàn)能清除法。非要說(shuō)缺點(diǎn)就是代碼量大。開發(fā)推薦使用。 定義:定義一個(gè)類名,使用偽元素:after,并把類名賦給被浮動(dòng)元素的父級(jí)元素。語(yǔ)法:clear:after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}</p><blockquote class="textcon"> <p><strong class="oo">對(duì)于CSS的清除浮動(dòng)(clear),一定要牢記:這個(gè)規(guī)則只能影響使用清除的元素本身,不能影響其他元素。</strong></p></blockquote></div><h3>二、css文本屬性</h3><div class="marleft"><p class="oo oos">1)文本大小:{font-size:value;}</p><blockquote class="textcon"><p>說(shuō)明:<br>A) 屬性值為數(shù)值型時(shí),必須給屬性值加單位,屬性值為0時(shí)除外。<br>B)單位還可以是pt,9pt=12px;<br>C)為了減小系統(tǒng)間的字體顯示差異,IE Netscape(網(wǎng)景通信公司) Mozilla的瀏覽器制作商于1999年召開會(huì)議,共同確定16px/ppi為標(biāo)準(zhǔn)字體大小默認(rèn)值,即1em.默認(rèn)情況下,1em=16px,0.75em=12px; </p><!--<p>D)使用絕對(duì)大小關(guān)鍵字<br>xx-small <br>x-small <br>small <br>medium <br>large <br>x-large<br>xx-large <br></p>--></blockquote><strong class="oo oos">2)文本顏色:{color:顏色值;}</strong><br><blockquote class="textcon">說(shuō)明:<br>用十六進(jìn)制(是計(jì)算機(jī)中數(shù)據(jù)的一種表示方法)表示顏色值:<br>0 1 2 3 4 5 6 7 8 9<br>0 1 2 3 4 5 6 7 8 9 A B C D E F<br>顏色模式:光色模式<br> R G B<br> FF 00 00<br> 顏色值的縮寫:<br> 當(dāng)表示三原色的三組數(shù)字同時(shí)相同時(shí),可以縮寫為三位;<br> 當(dāng)用十六進(jìn)制表示顏色值時(shí),需要在顏色值前加“#”<br> # fa 00 00<br> </blockquote> <strong class="oo oos">3)文本字體:{font-family:字體1,字體2,字體3;}</strong><br> <blockquote class="textcon"> 說(shuō)明:瀏覽器首先會(huì)尋找字體1、如存在就使用改字體來(lái)顯示內(nèi)容,如在字體1不存在的情況下,則會(huì)尋找字體2,如字體2也不存在,按字體3顯示內(nèi)容,如果字體3 也不存在;則按系統(tǒng)默認(rèn)字體顯示; <br> 當(dāng)字體是中文字體時(shí),需加雙引號(hào);<br> 當(dāng)英文字體中有空格時(shí),需加雙引號(hào)如(“Times New Roman”)<br> 當(dāng)英文字體只有一個(gè)單詞組成是不加雙引號(hào);如:(Arial);<br> Windows中文版本操作系統(tǒng)下,中文默認(rèn)字體為宋體或者新宋體,英文字體默認(rèn)為Arial.<br> </blockquote> <strong class="oo oos">4)文字加粗</strong><br> <blockquote class="textcon"> font-weight:bolder(更粗的)/bold(加粗)/normal(常規(guī))/100—900;<br> 說(shuō)明:在css規(guī)范中,把字體的粗細(xì)分為9個(gè)等級(jí),分別為100——900,其中100對(duì)應(yīng)最輕的字體變形,而900對(duì)應(yīng)最重的字體變形,<br> 100-400 一般<br> 500常規(guī)字體<br> 600-900加粗字體 <br> </blockquote> <strong class="oo oos">5)文字傾斜</strong><br> <blockquote class="textcon"> font-style:italic/oblique/normal(取消傾斜,常規(guī)顯示);<br> 說(shuō)明:<br> italic和oblique都是向右傾斜的文字, 但區(qū)別在于Italic是指斜體字,而Oblique是傾斜的文字,對(duì)于沒(méi)有斜體的字體應(yīng)該使用Oblique屬性值來(lái)實(shí)現(xiàn)傾斜的文字效果.<br> </blockquote> <strong class="oo oos">6)水平對(duì)齊方式</strong><br> <blockquote class="textcon"> {text-align:left/right/center<br> </blockquote> <strong class="oo oos">7)文字行高 {line-height:normal/value;}</strong></p> <blockquote class="textcon"><p>說(shuō)明:<br>A)當(dāng)單行文本的行高等于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直方向居中對(duì)齊;<br>B) 當(dāng)單行文本的行高小于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直中齊以上任意位置的定位;</p><p></p><p>C) 當(dāng)單行文本的行高大于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直中齊以下任意位置的定位。(IE6及以下版本存在瀏覽器兼容問(wèn)題)</p></blockquote><blockquote class="textcon"><p><strong class="oo">*文字屬性簡(jiǎn)寫:font:12px/24px "宋體";</strong><br>font屬性的簡(jiǎn)寫:字號(hào),行高,字體<br>font-size:12px; line-height:24px; font-family:”宋體”;<br>font屬性的簡(jiǎn)寫:<br>說(shuō)明:font的屬性值應(yīng)按以下次序書寫(各個(gè)屬性之間用空格隔開)<br>順序: font-style font-weight font-size / line-height font-family<br>(1)簡(jiǎn)寫時(shí) , font-size和line-height只能通過(guò)斜杠/組成一個(gè)值,不能分開寫。<br>(2) 順序不能改變 ,這種簡(jiǎn)寫法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用,而且,你沒(méi)有設(shè)定font-weight , font-style , 他們會(huì)使用缺省值(默認(rèn)值)。<br></p></blockquote><p class="oo oos">8)文本修飾</p><blockquote class="textcon"><p>text-decoration:none/underline/overline/line-through<br>說(shuō)明:<br>none:沒(méi)有修飾<br>underline:添加下劃線<br>overline:添加上劃線<br>line-through:添加刪除線</p></blockquote><p class="oo oos">9)首行縮進(jìn):{text-indent:value;}</p><blockquote class="textcon"><p>說(shuō)明:首行縮進(jìn)2個(gè)字 text-indent:2em;<br>A)text-indent可以取負(fù)值;<br>B)text-indent屬性只對(duì)第一行起作用。<br></p></blockquote><p class="oo oos">10)字間距{letter-spacing:value;}</p><blockquote class="textcon"><p>控制英文字母或漢字的字距。(英文字母和字母)<br></p></blockquote></div><h3>三、css列表屬性</h3><div class="marleft"><p class="oo oos">1)定義列表符號(hào)樣式</p><blockquote class="textcon"><p>list-style-type:disc(實(shí)心圓)/circle(空心圓)/square(實(shí)心方塊)/none(去掉列表符號(hào));list-style-type:none===list-style:none;</p></blockquote><p><strong class="oo oos">2)使用圖片作為列表符號(hào)</strong><br><blockquote class="textcon">list-style-image:url(所使用圖片的路徑及全稱);<br></blockquote><strong class="oo oos">3)定義列表符號(hào)的位置</strong><br><blockquote class="textcon">list-style-position:outside(外邊)/inside(里邊);</p><p>list-style:none;去掉列表符號(hào) <br></p></blockquote></div><h3>四、css背景屬性</h3><div class="marleft"><strong class="oo oos">1)背景顏色</strong><br><blockquote class="textcon">語(yǔ)法:選擇符{background-color:顏色值;}<br></blockquote><strong class="oo oos"> 2)背景圖片的設(shè)置</strong><br><blockquote class="textcon"><p>語(yǔ)法:background-image:url(背景圖片的路徑及全稱);</p><p>說(shuō)明:<br><strong class="oo oos">網(wǎng)頁(yè)上有兩種圖片形式:插入圖片、背景圖;</strong><br>插入圖片:屬于網(wǎng)頁(yè)內(nèi)容,也就是結(jié)構(gòu)。<br>背景圖:屬于網(wǎng)頁(yè)的表現(xiàn),背景圖上可以顯示文字、插入圖片、表格等。</p><p class="oo">背景圖片的顯示原則:</p><p>A)容器尺寸等于圖片尺寸,背景圖片正好顯示在容器中<br> B)容器尺寸大于圖片尺寸,背景圖片將默認(rèn)平鋪,直至鋪滿元素;<br> C)容器尺寸小于圖片尺寸,只顯示元素范圍以內(nèi)的背景圖。</p></blockquote><p><strong class="oo oos">3)背景圖片平鋪屬性</strong><br><blockquote class="textcon">語(yǔ)法:選擇符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }<br>no-repeat:不平鋪<br>repeat:平鋪<br>repeat-x:橫向平鋪<br>repeat-y :縱向平鋪<br></blockquote><strong class="oo oos"> 4)背景圖的固定</strong><br><blockquote class="textcon">語(yǔ)法:<br>選擇符{background-attachment:scroll(滾動(dòng))/fixed(固定);}</p><p>說(shuō)明:<br>fixed 固定,不隨內(nèi)容一塊滾動(dòng);<br>scroll:隨內(nèi)容一塊滾動(dòng)。<br></p></blockquote><p> <strong class="oo oos"> 5)背景圖片的位置</strong><br><blockquote class="textcon">語(yǔ)法:選擇符<br>{background-position:left/center/right/數(shù)值 top/center/bottom/數(shù)值;}</p><p> 水平方向上的對(duì)齊方式(left/center/right)或值 <br>垂直方向上的對(duì)齊方式(top/center/bottom)或值</p><p>background-position:值1 值2;<br>兩個(gè)值 :第一個(gè)值表示水平位置的值,第二個(gè)值:表示垂直的位置。<br>當(dāng)兩個(gè)值都是center的時(shí)候?qū)懸粋€(gè)值就可以代表的是水平位置和垂直位置<br>說(shuō)明:向左方向,向上方向是負(fù)值<br></p></blockquote><blockquote class="textcon">背景屬性的縮寫語(yǔ)法:<br>background:屬性值1 屬性值2 屬性值3;<br>背景縮寫:background:url(背景圖片的路徑及全稱) no-repeat center top #f00;<br></blockquote><strong class="oo"> 網(wǎng)頁(yè)上常用的圖片格式(壓縮圖片)</strong><br><blockquote class="textcon">1)jpg :有損壓縮格式,靠損失圖片本身的質(zhì)量來(lái)減小圖片的體積,適用于顏色豐富的圖像;(像素點(diǎn)組成的,像素點(diǎn)越多會(huì)越清晰 )。<br>2)gif:有損壓縮格式,靠損失圖片的色彩數(shù)量來(lái)減小圖片的體積,支持透明,支持動(dòng)畫,適用于顏色數(shù)量較少的圖像;<br>3)png:有損壓縮格式,損失圖片的色彩數(shù)量來(lái)減小圖片的體積,支持透明,不支持動(dòng)畫,是fireworks的 源文件格式,適用于顏色數(shù)量較少的圖像;<br></p></blockquote></div><h3>五、css邊框?qū)傩?span id="ozvdkddzhkzd" class="token tag"></h3><div class="marleft"><p>border:邊框?qū)挾?邊框風(fēng)格 邊框顏色;<br>例如:border:5px solid #ff0000<br>邊框:border,網(wǎng)頁(yè)中很多修飾性線條都是由邊框來(lái)實(shí)現(xiàn)的。<br>邊框?qū)挾?#xff1a;border-width:<br>邊框顏色:border-color:<br><strong class="oo"> 邊框樣式:border-style:solid(實(shí)線)/dashed(虛線)dotted(點(diǎn)劃線)double(雙線)可單獨(dú)設(shè)置一方向邊框,</strong></p><p>border-bottom:邊框?qū)挾?邊框風(fēng)格 邊框顏色;底邊框<br>border-left:邊框?qū)挾?邊框風(fēng)格 邊框顏色;左邊框<br>border-right:邊框?qū)挾?邊框風(fēng)格 邊框顏色;右邊框<br>border-top:邊框?qū)挾?邊框風(fēng)格 邊框顏色;上邊框<br></p><p></p><p></p></div> </div><div style=" width: 130px; height: 45px; line-height: 44px; text-align: center; color: #f00; background: #000; border-radius: 4px; position: fixed; bottom: 50px; cursor:pointer; right: 10px; "><a href="#" style="color:#f00; text-decoration:none;">返回頂部</a></div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的23-Web-表单和CSS基础的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: bzoj1682
- 下一篇: DIV+CSS学习笔记总结篇