css學習基礎詳細(常用)

最後更新：2017-08-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：第一天

css簡介

層疊樣式表，可以修飾html

可以單獨拿出來，直接做成css檔案

通過單個樣式表控制多個文檔的布局

更為精確的布局控制

為不同的媒體類型（螢幕，列印等）採取不同的布局

無數進階，先進的技巧

可以活動更換網頁風格

行內，內部，外部樣式表

用html設定設定背景

<backgroupcolor="" >

用css設定

body{backgroup-color=""}

寫行內擴充性不好，寫行內也不好

單獨拿出來，寫成css檔案

<html>

<head>

<title>

行內樣式表

</title>

</head>

</body>

</html>

<html>

<head>

<title>

行內樣式表

</title>

</head>

<body >

</body>

</html>

(失敗)

<html>

<head>

<title>

行內樣式表

</title>

body{

background：red;}

</style>

</head>

<body >

這是一個紅色頁面

</body>

</html>

(失敗)

層疊次序

段落文字變紅

<html>

<head>

</head>

<body>

<p><font color="red">我愛大李子

</font></p>

</body>

</html>

內部樣式表

style屬性

<html>

<head>

<style>

p {

color:red;

}

</style>

</head>

<body>

<p>我愛大李子

</p>

</body>

</html>

行內樣式

style元素

<html>

<head>

<style>

p {

color:red;

}

</style>

</head>

<body>

<p>我愛大李子

</p>

<p style="color:blue">我愛大李子

</p>

</body>

</html>

使用link文法引入外部樣式表

eg:<head>

</head>

css基礎文法

selector(選取器)

{property(屬性)：value(值);

}

屬性

color

background

<div> 可定義文檔中的分區或節（division/section）。

<div> 標籤可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。

如果用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。

用法

<div> 是一個區塊層級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。

不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。

可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。

多選文法

selector1,selector2,selector3{

roperty:value;

}

後代選取器和子選取器

後代選取器

選擇某元素下所有元素

selector1 selector2{

roperty:value;

}

子選取器

選擇某元素下的子項目

selector > selector1

{

roperty:value;

}

<span> 在CSS定義中屬於一個行內元素,在行內定義一個地區，也就是一行內可以被 <span> 劃分成好幾個地區，從而實現某種特定效果。 <span> 本身沒有任何屬性。 <div> 在CSS定義中屬於一個區塊層級元素 <div> 可以包含段落、標題、表格甚至其它部分。這使DIV便於建立不同整合的類，如章節、摘要或備忘。在頁面效果上，使用 <div> 會自動換行，使用 <span> 就會保持同行。

id選取器

選擇標有特定id元素

eg:在標籤中添加id="自己定義"

#自己定義

{

}

類別選取器

eg:在標籤中添加class="自己定義"

.自己定義

{

}

本文出自 “大李子” 部落格，謝絕轉載！

css學習基礎詳細(常用)

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More