css学习入门篇（1）
?
1.網(wǎng)頁制作 的兩大誤區(qū)；【1】.網(wǎng)頁用了Table，頁面就不標(biāo)準(zhǔn)【2】.div標(biāo)簽越多越好。
解釋：table是為了存儲(chǔ)數(shù)據(jù)而div是為了架設(shè)頁面 ，兩者有不同的工作職能 。
2.W3C標(biāo)準(zhǔn)：他不是一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的組合：結(jié)構(gòu)標(biāo)準(zhǔn)（代表語言HTML）、表現(xiàn)標(biāo)準(zhǔn)（CSS）、動(dòng)作標(biāo)準(zhǔn)（JavaScript）。
3.css控制頁面的四種方式：
? ? ?【1】行內(nèi)樣式：<p style=" color: #F00; background: #CCC; font-size: 12px;">行內(nèi)樣式 </p>
? ? ?缺點(diǎn)：每個(gè)標(biāo)簽都要設(shè)置style標(biāo)簽，導(dǎo)致文件體積較大，HTML不夠 純凈，不利于搜索蜘蛛爬行，維護(hù)成本較高
? ? 【2】?jī)?nèi)嵌樣式：
? ? ?缺點(diǎn) ：每個(gè)頁面都要定義css代碼，如果一個(gè)網(wǎng)站有很多頁面，每個(gè)文件都很大，后期維護(hù)也很難度 也大
? ? 【3】鏈接樣式：推薦使用
? ? 優(yōu)點(diǎn)：?實(shí)現(xiàn)了頁面框架HTML代碼與表現(xiàn)CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，并且如果要保持頁面風(fēng)格統(tǒng)一
? ? 【4】導(dǎo)入樣式：
? ? ?采用import樣式導(dǎo)入CSS樣式表
4.CSS選擇器
? 【1】標(biāo)簽選擇器：對(duì)標(biāo)簽統(tǒng)一聲明css樣式。
? eg：
<!DOCTYPE html>
< html>
< head lang= "en" >
??? < meta charset= "UTF-8" >
??? < title>標(biāo)簽選擇器 </ title>
??? < style type= "text/css" >
??????? p {
????????? font-size: 20 px; /*字體大小*/
????????? background: #090; /*字體背景顏色*/
????????? color: aqua; /*字體本身顏色*/
??????? }
??? </ style>
</ head>
< body>
??? < p>標(biāo)簽選擇器demo </ p>
<!--??? <a href="http://www.w3cfuns.com/member.php?mod=register" target="_blank" id="reg"></a>-->
</ body>
</ html>
優(yōu)點(diǎn)：對(duì)統(tǒng)一標(biāo)簽屬性進(jìn)行了統(tǒng)一設(shè)置
缺點(diǎn)：如果頁面中除了某個(gè)標(biāo)簽和其他標(biāo)簽屬性不是一直的，那么這樣寫就不行了
? 【2】ID選擇器：ID具有唯一性，給標(biāo)簽起個(gè)ID更具有針對(duì)性。
eg：
<!DOCTYPE html>
< html>
< head lang= "en" >
??? < meta charset= "UTF-8" >
??? < title>標(biāo)簽選擇器 </ title>
??? < style type= "text/css" >
??????? #one {
????????? font-size: 20 px; /*字體大小*/
????????? background: #090; /*字體背景顏色*/
????????? color: aqua; /*字體本身顏色*/
??????? }
??? </ style>
</ head>
< body>
??? < p id= "one" >ID選擇器demo</ p>
<!--??? <a href="http://www.w3cfuns.com/member.php?mod=register" target="_blank" id="reg"></a>-->
</ body>
</ html>
優(yōu)點(diǎn)：可以單獨(dú)給某個(gè)標(biāo)簽定義屬性，可以解決【1】中的弊端
? ?【3】類選擇器：就是給不同的標(biāo)簽賦予相同的css樣式
eg：
<!DOCTYPE html>
< html>
< head lang= "en" >
??? < meta charset= "UTF-8" >
??? < title>標(biāo)簽選擇器 </ title>
??? < style type= "text/css" >
??????? . one{
????????? font-size: 20 px; /*字體大小*/
????????? background: #090; /*字體背景顏色*/
????????? color: aqua; /*字體本身顏色*/
??????? }
??? </ style>
</ head>
< body>
??? < p class= " one"> ID選擇器demo</ p>
??? < div class= " one"> 此處為DIV標(biāo)簽內(nèi)的文字</ div>
<!--??? <a href="http://www.w3cfuns.com/member.php?mod=register" target="_blank" id="reg"></a>-->
</ body>
</ html>
備注：ID和class可以同時(shí)使用，只是ID是#開頭，class是.開頭
? ?【4】通用選擇器：對(duì) 整個(gè)HTML標(biāo)簽進(jìn)行css樣式定義
eg：
<!DOCTYPE html>
< html>
< head lang= "en" >
??? < meta charset= "UTF-8" >
??? < title></ title>
</ head>
< style>
??? * {
? ? ? ??margin: 0; padding: 0;/*保證頁面能夠兼容多種瀏覽器，當(dāng)然這樣會(huì)影響性能，也可以用到那些就加那些*/
??????? font-size : 20 px;
??????? background :#000088 ;
??????? color : brown ;
??? }
</ style>
< body>
??? < p>通用選擇器 </ p>
??? < div>通用選擇器 </ div>
</ body>
</ html>
備注：功能很強(qiáng)大，但是不夠靈活，不建議使用
5.CSS選擇器命名及常用命名：駱駝命名法，帕斯卡命名法，匈牙利命名法
? ? ?命名是程序員最基本的，這里就不多做介紹，不了解的可以自己百度了解，很簡(jiǎn)單.
6.盒子模型：是XHTML+CSS布局頁面中的核心！
? 剛開始接觸的人來說理解可能有點(diǎn)暈，其實(shí)就是css標(biāo)簽中的四個(gè)屬性：content(內(nèi)容)、border(邊框)、padding(內(nèi)邊距)、margin(外邊距).
? 個(gè)人解釋：我把一個(gè)網(wǎng)頁當(dāng)著是一個(gè)大的長(zhǎng)方體，里面有很多小長(zhǎng)方體，這些小長(zhǎng)方體的寫的內(nèi)容就是content，小長(zhǎng)方體的厚度我們理解為border，里面的內(nèi)容和小長(zhǎng)方體的距離我們認(rèn)為是padding，小長(zhǎng)方體和大長(zhǎng)方體之間的距離可以認(rèn)為是margin.
? ?每個(gè)人理解方式不一樣，可以選擇其他的模型去幫助自己去記憶，最主要是去實(shí)戰(zhàn)中不斷用用這些標(biāo)簽屬性幫助理解.
7.塊狀元素和內(nèi)聯(lián)元素：對(duì)定義理解可能覺得不好理解，在后續(xù)的實(shí)戰(zhàn)中會(huì)慢慢理解，先理解定義，后面在寫代碼的過程慢慢對(duì)照定義深入理解
? ? ?塊狀元素：?一般是其他元素的容器，可容納內(nèi)聯(lián)元素和其他塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)高度(height)起作用。常見塊狀元素為div和p。
? ? ?內(nèi)聯(lián)元素：內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，它允許其他內(nèi)聯(lián)元素與其位于同一行，但寬度(width)高度(height)不起作用。常見內(nèi)聯(lián)元素為“a”.
轉(zhuǎn)載于:https://blog.51cto.com/8986098/1610162
總結(jié)
以上是生活随笔為你收集整理的css学习入门篇（1）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Linux】 任务调度/计划 cron
- 下一篇： ORA-14400: inserted