OpenSNN推文：CSS新手指南：小白速成課001

習CSS（層疊樣式表）是掌握前端開發技能的關鍵之一。CSS用于控制網頁的外觀和布局，使其更加美觀和用戶友好。以下是一個從零開始學習CSS的全面指南：

一、基礎概念

1. 什么是CSS

CSS（Cascading Style Sheets）是一種樣式表語言，用于描述HTML文檔的呈現。它可以控制網頁的顏色、字體、布局等視覺樣式。

2. CSS的作用

樣式和美化：定義文本顏色、背景顏色、邊框等。
布局和排版：控制元素的位置和大小，創建響應式布局。
動畫和交互：添加過渡效果和動畫，提升用戶體驗。

二、學習資源

1. 在線課程和學習平臺

MDN Web Docs：Mozilla開發者網絡提供了全面的CSS教程和參考資料。
W3Schools：提供CSS基礎和高級教程，并有大量示例和練習。
Coursera和Udemy：上面有許多高質量的CSS課程，適合系統學習。

2. 書籍

《CSS權威指南》：一本詳盡的CSS參考書，適合深入學習。
《HTML & CSS: Design and Build Websites》：適合初學者入門的書籍，結合HTML和CSS一起學習。

三、基礎語法

1. CSS語法

CSS規則由選擇器和聲明塊組成：

selector {
  property: value;
}

例如，設置所有段落文字顏色為藍色：

p {
  color: blue;
}

2. 引入CSS

內聯樣式：
This is a blue paragraph.
內部樣式表：
<head> <style> p { color: blue; } </style> </head>
外部樣式表：
<head> <link rel="stylesheet" href="styles.css"> </head>
styles.css 文件內容：
p { color: blue; }

四、選擇器

1. 基本選擇器

元素選擇器：
p { color: blue; }
類選擇器：
.class-name { color: blue; }
This is a blue paragraph.
ID選擇器：
#id-name { color: blue; }
This is a blue paragraph.

2. 組合選擇器

后代選擇器：
div p { color: blue; }
子選擇器：
div > p { color: blue; }
并集選擇器：
h1, h2, h3 { color: blue; }

3. 偽類和偽元素

偽類：
a:hover { color: red; }
偽元素：
p::first-line { font-weight: bold; }

五、盒模型

1. 盒模型概念

每個HTML元素都可以看作一個矩形的盒子，盒模型包括以下部分：

內容區域：實際內容顯示區域。
內邊距（padding）：內容區域周圍的空白區域。
邊框（border）：圍繞內邊距的邊框。
外邊距（margin）：元素周圍的空白區域。

2. 盒模型屬性

設置寬度和高度：
div { width: 100px; height: 100px; }
內邊距：
div { padding: 10px; }
邊框：
div { border: 1px solid black; }
外邊距：
div { margin: 10px; }

六、布局

1. 傳統布局

浮動布局：
.left { float: left; } .right { float: right; }
定位布局：
.relative { position: relative; top: 10px; left: 10px; } .absolute { position: absolute; top: 10px; left: 10px; }

2. 現代布局

Flexbox布局：
.container { display: flex; } .item { flex: 1; }
Grid布局：
.container { display: grid; grid-template-columns: repeat(3, 1fr); } .item { grid-column: span 2; }

七、響應式設計

1. 媒體查詢

使用媒體查詢來創建響應式布局：

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

2. 彈性單位

使用相對單位（如百分比、em、rem）來實現響應式設計：

.container {
  width: 80%;
  padding: 2em;
}

八、實戰練習

1. 創建一個簡單的網頁

結合HTML和CSS，創建一個簡單的個人簡介網頁，包含以下內容：

個人照片
簡短介紹
技能列表
聯系方式

2. 參與在線項目

參與一些前端開發項目，應用所學知識并獲取實踐經驗。可以在GitHub上尋找開源項目，也可以嘗試自己設計和實現一些小項目。

九、持續學習

閱讀文檔：隨時查閱MDN和W3Schools的文檔，獲取最新的CSS知識。
觀看視頻教程：YouTube和其他教育平臺上有許多優秀的CSS視頻教程。
加入社區：參與CSS開發者社區，向他人學習并分享自己的經驗。

通過以上步驟，你可以系統地學習CSS，并逐步掌握網頁樣式和布局的技能。堅持學習和實踐，你將能夠創建美觀且響應迅速的網頁。祝你學習愉快！

tml([val|fn]) 返回值:String

取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔。

在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容。

如果選擇器匹配多于一個的元素，那么只有第一個匹配元素的 HTML 內容會被獲取。

function(index, html) Function

此函數返回一個HTML字符串。接受兩個參數，index為元素在集合中的索引位置，html為原先的HTML值。

返回p元素的內容。

jQuery 代碼:

$('p').html();

設置所有 p 元素的內容

jQuery 代碼:

$("p").html("Hello <b>world</b>!");

使用函數來設置所有匹配元素的內容。

jQuery 代碼:

$("p").html(function(index,n){
    return "這個 p 元素的 index 是：" + n;
});

text([val|fn]) 返回值:String

val String 用于設定HTML內容的值

function(index, html) Function 此函數返回一個HTML字符串。接受兩個參數，index為元素在集合中的索引位置，html為原先的HTML值。

返回p元素的文本內容。

jQuery 代碼:

$('p').text();

設置所有 p 元素的文本內容

jQuery 代碼:

$("p").text("Hello world!");

使用函數來設置所有匹配元素的文本內容。

jQuery 代碼:

$("p").text(function(index,n){
    return "這個 p 元素的 index 是：" + n;
});
$("#test").html();

意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery里的方法

這段代碼等同于用DOM實現代碼：

document.getElementById("test").innerHTML;

直接獲取、編輯內容

在jQuery中，主要是通過html()和text()兩種方法來獲取和編輯頁面內容的。其中html()相當于獲取節點的innerHTML屬性，

添加參數html(text)時,則為設置innerHTML;而text()則用來獲取元素的純文本，text(content)為設置純文本。

實例1:

jQuery代碼:

$(function(){
    var sString=$("p:first").text(); //獲取純文本
    $("p:last").html(sString);
});

HTML代碼:

<p><b>文本</b>段 落<em>示</em>例</p>
<p></p>

實例2:

jQuery代碼:

$(function(){
    $("p").click(function(){
        var sHtmlStr=$(this).html(); //獲取innerHTML
        $(this).text(sHtmlStr); //將代碼做為純文本傳入
    });
});

HTML代碼:

文本段落示例

實例3：獲取選擇框的文本

$("#id").find("option:selected").text(); //獲取Select選擇的text文本
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$function(){
    $('#OK').bind('click', function () {
    alert($("#id").find("option:selected").text());
    });
}
</script>
</head>
<body>
<select id="select">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
</select>
<button id="OK">
獲取為本</button>
</body>
</html>

$().html(); //獲得節點包含的信息

$().html(信息); //設置節點包含的內容

$().text(); //獲得節點包含的"文本字符串信息"內容

$().text(信息); //設置節點包含的內容(有html標簽就把"><"符號變為符號實體)

注意: DOM操作必須保住DOM節點必須存在, 當然也包括使用css樣式display:none隱藏的DOM節點, 否則會導致js語法錯誤;

、 HTML 語言

1 HTML 簡介

HyperText Markup Language（超文本標記語言）

標記也稱標簽，放在< >中。
標記是英文單詞或縮寫，有固定含義，能被瀏覽器識別和翻譯。

2 HTML 文檔的結構

二、常用 HTML 標記

1 特殊字符標記

2 段落標記

<p 屬性=值>
------段(paragraph) (可以看作是空行)
------align 屬性可設置段落的對齊方式，如左對齊、居中、右對齊。

3 換行標記

<br>

4 居中標記

<center>需要居中的內容</center>

5 字體標記

<font face="字體樣式" color=字體顏色 size=字體大小>文字</font>

6 格式標記

<b>加粗</b>
<u>下劃線</u>
<i>傾斜</i>

7 圖像標記

<img src="images/adv_2.jpg" width="300" height="150" alt="明星演唱會開幕">
------image：圖片/像
------source：來源
------alternative：交替、變換

8 鏈接標記

<a href="register/register.html">[免費注冊]</a>
------anchor：錨，鏈接
------http references：參考的 http 地址

9 表格標記

9.1 表格的結構

9.2 表格標記

9.3 合并行或列

10 表單標記

10.1 典型應用

注冊用戶
收集信息
反饋信息

10.2 表單由控件組成

10.3 表單中的標記

10.3.1 表單標記

10.3.2 控件標記

樣式表(Cascading Style Sheets，層疊/級聯樣式表)
------用于設置控件屬性格式。
------行內嵌入 css 樣式表：<標記 style="">

10.3.3 文本框控件

10.3.4 密碼框控件

10.3.5 單選按鈕控件

10.3.6 復選框控件

10.3.7 下拉列表控件

10.3.8 列表框控件

10.3.9 多行文本框/文本區域控件

10.3.10 按鈕控件

按鈕類型可為 submit、reset、button

10.3.11 框架標記

10.3.11 .1 創建框架中的每個子頁面窗口

top.html
left.html
main.html

10.3.11 .2 創建框架集

改變框架內的頁面顯示

單擊 left.html 中不同的按鈕，在 rightframe 中顯示不同的頁面
使用 target 目標窗口屬性
<a href=url target="要顯示的框架名">

三、 Session 和 Cookie

1 http 無狀態

http 協議是無狀態的，本次請求和上次請求無法判斷是不是同一個人操作的，從而 http本身不會記住"過去的"數據。

2 Session

用于解決 http 無狀態問題。一般稱為“會話控制”，瀏覽器在第一次訪問服務器時，服務器會創建一個 session，然后同時為該 session 生成一個唯一的會話 sessionid。

Session 存儲特定用戶會話所需的屬性及配置信息，當用戶在應用程序的 Web 頁之間跳轉時，存儲在 Session 中的變量將不會丟失，而是在整個用戶會話中一直存在下去。當用戶請求來自應用程序的 Web 頁時，如果該用戶還沒有會話，則 Web 服務器將自動創建一個Session 對象。當會話過期或被放棄后，服務器將終止該會話。Session 最常見的一個用法就是存儲用戶的首選項。

3 Cookie

有時也用其復數形式 Cookies，指某些網站為了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端上的數據（通常經過加密）。

Cookie 技術誕生以來，它就成了廣大網絡用戶和 Web 開發人員爭論的一個焦點。有一些網絡用戶，甚至包括一些資深的 Web 專家也對它的產生和推廣感到不滿，這是因為 Cookie的使用對網絡用戶的隱私構成了危害。因為 Cookie 是由 Web 務器保存在用戶瀏覽器上的小文本文件，它包含有關用戶的信息。當 Web 服務器創建了 Cookies 后，只要在其有效期內，當用戶訪問同一個 Web 服務器時，瀏覽器首先要檢查本地的 Cookies，并將其原樣發送給 Web服務器。

查看 Cookie：

在線咨詢

上一篇：在IE瀏覽器中，使用PHPExcel導出文件時，文件
下一篇：Java專家教你Eclipse的使用技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

OpenSNN推文：CSS新手指南：小白速成課001

一、基礎概念

1. 什么是CSS

2. CSS的作用

二、學習資源

1. 在線課程和學習平臺

2. 書籍

三、基礎語法

1. CSS語法

2. 引入CSS

四、選擇器

1. 基本選擇器

2. 組合選擇器

3. 偽類和偽元素

五、盒模型

1. 盒模型概念

2. 盒模型屬性

六、布局

1. 傳統布局

2. 現代布局

七、響應式設計

1. 媒體查詢

2. 彈性單位

八、實戰練習

1. 創建一個簡單的網頁

2. 參與在線項目

九、持續學習

、 HTML 語言

二、 常用 HTML 標記

三、 Session 和 Cookie

您的項目需求

二、常用 HTML 標記