當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

23-Web-表单和CSS基础

發(fā)布時(shí)間：2023/12/20 CSS 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 23-Web-表单和CSS基础小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.表單標(biāo)簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><form action="" method=""> </form></body> </html>

2.input標(biāo)簽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><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><label for="pw">密碼:</label><input id="pw" type="password" name="pw" value="123456" placeholder="請(qǐng)輸入密碼"/><br><br><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><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><input type="button" name="" id="" value="確定" /><input type="button" name="" id="" value="取消" /><br><br><button type="button">確定</button><button type="button"><img src="./img/baidu.ico" ><br>百度</button><br><br><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><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><select name="city"><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><textarea rows="4" cols="40" name="comment" placeholder="請(qǐng)輸入你的建議" maxlength="200">沒(méi)有意見！</textarea><div id=""></div></body> </html>

4.CSS基礎(chǔ)語(yǔ)法

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/css1.css"/><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><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.選擇器

<!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><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í)

<!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.偽類選擇器

<!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></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></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)題。

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