CSS基本相關內容–中秋特別奉獻

CSS基本相關內容

 

一、建立HTML頁1

 

二、建立HTML頁2

 

三、在瀏覽器中查看

 

四、網頁顯示介紹

http://localhost:33218/Desktop2/01.htm  中33218為連接埠號碼，如http://baidu.com.cn  的預設連接埠號碼為80就不顯示了。

還有一個問題，我們用VS建的網頁，預設的編碼都是UTF-8的編碼，瀏覽器會自動識別，所以不亂碼。

還有一些小的使用時需要注意的地方

 

五、修改預設瀏覽器

 

六、設計模式

下面我們來看看: Div層（什麼都可以放）、Span(文本)

這兩個標籤就是畫個圈把某部分圈起來.

我們來看下面案例

 

七、div與span

 

八、讓兩個代碼互換

 

九、改變span和div的長和寬

Div在網頁布局中使用非常多。在前幾年我們對div還不是特別的熟的時候，我們用表格來布局。但是現在不這麼做了，會產生大量的垃圾代碼，這些表格我們是隱藏的，不會顯示給使用者看。

 

十、HTML中的元素的查詢

下面我們說說CSS：

CSS是用來幹什麼的呢?

CSS（層疊樣式表，Cascading Style Sheets）是用來美化頁面用的，可以對頁面元素進行更精細的設定，樣式主要描述元素的字型顏色、背景顏色、邊框等。

如:QQ空間裡面的換膚功能。

 

使用CSS的好處：

外觀美化 布局、定位

樣式表能實現內容與樣式的分離，方便團隊開發

方便統一定義格式,修改也方便.

HTML標籤的外觀樣式比較單一

頁面色彩不生動

樣式修改不方便

樣式表的作用：為網頁設定外觀，相當於華麗的衣服。

 

下面我們介紹CSS常用的一些個屬性：

具體的內容，我們可以查看一下關於CSS的資料。

 

十一、學會查看CSS相關電子書

當然，我們這裡示範的時候還是把CSS檔案和HTML代碼寫在一起。

 

十二、在層裡面設定的CSS樣式。

 

十三、設定前景色彩

下面我們設定下層的高度和寬度。

 

十四、設定寬度和高度

下面執行去掉背景顏色，設定邊框的操作：

 

十五、如何設定邊框

 

十六、邊框的簡單寫法

看下怎麼設定四個邊框四種樣式：

 

十七、設定上下左右各不相同的邊框

  如果我們在設定好了之後，一些瀏覽器顯示不出來。原因就是瀏覽器的相容性問題。這個時候只能自己想辦法去類比了。

 

十八、在表格中設定邊框

插入一個小問題

 

十九、啟動服務

 

二十、顯示和隱藏

 

 

二十一、當滑鼠移入變換表徵圖

接下來是跟列標有關的

 

二十二、列標的不同顯示

 

二十三、margin的設定

margin:值1; //上右下左都是 值1。

margin:值1 值2; //上下為值1，左右為值2.

margin:值1 值2 值3; //上為值1 左右為值2 下為值3;

margin:值1 值2 值3 值4; //每個值分別是：上 右 下 左;(順時針方向)

 

接下來咱們說下:樣式選取器

剛才我們說了很多的樣式，但是都直接寫在標籤裡面了。這些樣式只能應用於當前的標籤，如果再來一個div，我就得再寫一遍。下面我們讓body裡面都是html元素，先把css提煉到head，title標籤裡面。看我怎麼提煉。

 

二十四、撤掉HTML中的所有CSS及分頁拖拉按鈕

即便我們上面寫了邊框的樣式，它怎麼知道的我是給下面的哪個層呢？這個時候我們就用到了選取器，告訴CSS下面哪個元素利用的它。

第一種選取器:標籤選取器。

 

二十五、1.標籤選取器

 

二十六、設定表格的標籤選取器

第二種選取器：Id選取器

 

二十七、Id選取器

這裡注意，id的名字不能重複。如果重複的話，會造成意想不到的效果。

需求：

有個樣式，在div上可能用它；table的td上可能用它；span也可能用到它；button裡面也要用到它。這個樣式可能被頁面上多種不同的元素所使用。Id選取器能搞定，代碼得寫很多回很不爽。用下面介紹的類別選取器。

第三種選取器：類別選取器

 

二十八、類別選取器

 

二十九、同時引用兩個樣式

CSS選取器的優先順序：Id選取器>類別選取器>標籤選取器

記法：越具體優先順序越高。

當遇到style時就都不行了。

CSS高於HTML標籤。

第四種選取器:標籤+class選取器

 

三十、標籤加類別選取器

再介紹其它的一些選取器，包含選取器：

 

三十一、層選取器

 

三十二、在標籤選取器中加層選取器

組合選取器，同時為多個標籤設定一個樣式

H1,H2,input{background-color:Green}

<h1>nihao</h1>

<input type="text" value="test" />

(*)其他CSS選取器：div > p(子選取器)、div + p（相鄰選取器）、…。IE7以下不支援。在jQuery中還會學習。

 

回到起始位置

作者近期文章列表:

C#中級進階教程（完全免費，獻給代碼愛好者的最好禮物。註：本作者分享自己精心整理的C#中級進階教程，無任何商業目的。希望與更多的代碼愛好者交流心得，也請高手多多指點！！！）
ASP.net項目	圖書商城項目總論
三層及其它內容	遞迴
	三層（一）
	三層相關案例（及常見的錯誤）
	三層執行個體（內涵Sql CRUD）
	手寫代碼產生器
SQL資料庫 ADO.net	資料庫的應用圖解一
	資料庫的應用詳解二
	ADO.NET（內涵效率問題）
	ADO.NET執行個體教學一
	ADO.NET執行個體教學二
	資料庫的應用詳解三
	ADO.NET（內含預存程序講解）
面向過程，物件導向中進階	面向過程，物件導向的深入理解一
	面向過程，物件導向的深入理解二
	物件導向的深入理解三
	無處不在的XML
winform基礎	Winform基礎
	winform中常用的控制項
面向過程	三種迴圈的比較
	C#中的方法（上）
	我們常見的數組
物件導向	思想的轉變
	C#中超級好用的類
	C#中解構函式和命名空間的妙用
	C#中超級好用的字串
	C#中如何快速處理字串
	實值型別和參考型別及其它
	ArrayList和HashTable妙用一
	ArrayList和HashTable妙用二
	檔案管理File類
	多態
	C#中其它一些問題的小節
GDI+	這些年我收集的GDI+代碼
	這些年我收集的GDI+代碼2
HTML概述以及CSS	你不能忽視的HTML語言
	你不能忽視的HTML語言2精編篇
	你不能忽視的HTML語言3
	html-綜合篇
	CSS基本相關內容--中秋特別奉獻
	CSS基本相關內容2
JavaScript基礎	JavaScript基礎一
	javascript基礎二JavaScript DOM編程
jQuery	jQuery(內涵: jquery選取器)
	jquery執行個體教學一