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