DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css 10分鐘入門
css 10分鐘入門
編輯:CSS詳解     

對於剛剛接觸的同學來說,不知道是什麼,CSS工作原理又是怎麼樣的。

這裡帶剛剛接觸CSS,而想學習CSS的同學開始入門。

1、認識CSS -

CSS是英文單詞Cascading Style Sheets縮寫,翻譯為“樣式表”,我們又稱“CSS樣式表”。通俗講CSS是控制網頁中內容的顏色、字體、文字大小、寬度、邊框、背景、浮動等樣式來實現各式各樣、花樣百出的網頁樣式的統稱(了解更多控制樣式屬性)。如大學是什麼,大學裡有計算機、教師、物理、化學、英語等專業系、院組成了一所大學,這就是大學。

2、 -
認識了CSS原理,相當於我們找到CSS下手學習入口,進入CSS世界。
轉入正題,CSS原理模型例子:我們知道使用對講機雙方要通話,必須要在一定距離內(對講機信號覆蓋區),CSS一樣,CSS要生效必須引入要正確(推薦style 和 link,內嵌和引入2種方式引入嵌入CSS);對講機雙方除了在信號范圍內才能通話,還有最重要的就是雙方頻道頻率(調頻頻率)要相同,CSS也是這樣,要想CSS生效就需要在CSS代碼的命名和中值或的值的引用的CSS選擇器命名相同。這樣CSS選擇器命名與html應用CSS類(class)值名相同後,這個CSS選擇器裡寫不同樣式屬性,html對應部分網頁內容樣式就跟著你在CSS選擇器裡設置不同CSS屬性樣式而變化。

HTML與CSS本身是一個整體缺一不可,CSS代碼表達的樣式要實現就需要html中使用class或ID的值與CSS選擇器的的名稱相同。

DIVCSS5例子-style html中內嵌CSS代碼法: -
CSS代碼(代碼是放入html的head開始與結束標簽內):
<style type="text/css">
.yangshi{ color:#F00;}/* 定義內容為紅色 */
#abc{ color:#0F0;}/* 定義內容為綠色 */
< /style>

對應在html調用(此代碼是放入body區內):

<div class="yangshi">我是紅色</div>
< div id="abc">我是綠色</div>

CSS原理與CSS實例說明: -

1、css屬性選擇器與html中內使用CLASS或ID引入CSS的命名的名稱要相同。(如上例,CSS中.yangshi{...}對應HTML<div class="yangshi"></div>)
2、CSS代碼寫到什麼地方(上例:使用style在html中內嵌CSS代碼,當然可以使用LINK外部引入CSS文件)
3、CSS屬性選擇器命名自己可以取,而CSS樣式屬性是固定的,如寬度對應width


注意“yangshi”與"abc",對應到HTML裡一個用class一個用ID,我們就需要認識與。

從CSS原理我們主要是學習CSS與HTML關系,

下來你將接觸到-必須學會與認識知識 -
:學會控制網頁內容與布局高度
:學會使用CSS控制網頁與布局寬度
:學會在CSS中注解、注釋
:一定要搞清楚ID與CLASS
:一定搞清ID作用
:一定搞清楚CLASS用法作用及與ID區別
:內容居中、布局居中、垂直居中、上下左右居中
:CSS控制背景方法與CSS背景深入運用
:學會對文字、字體控制
:學會和認識常見CSS工具
:一定要收藏的遇到CSS問題或單詞可以提供在線CS手冊速查
:學CSS前必備功課
:歡迎來到DIVCSS5、同時有什麼問題可以通過網頁頂部搜索工具搜索想要的知識與問題。
等...
在學習過程中你的很多CSS問題都在能查看學習解決掉或到()討論區,提交問題我們共同來給你解答解決。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved