CSS Syntax(CSS 語法)

簡單介紹CSS,學習入門自用=-=

以下筆記摘抄全部來自優達學城,感謝優達讓我入門。

什么是CSS

CSS即層疊樣式表,是一種標記語言。用來描述網站上各種元素的外觀。

CSS把網站的樣式和內容分開了。HTML寫頁面內容,CSS頁面內容呈現的樣式。

CSS規則集

一個簡單CSS語句中的基本構件模塊

下圖中,div為選擇器


規則集示意圖

規則集由兩部分組成,一個是選擇器,一個是聲明塊。

選擇器篩選出你想要添加樣式的HTML元素的代碼。

聲明塊用來描述你想要為指定HTML添加的樣式的代碼。

注釋

CSS注釋形式

CSS評論被開頭/*和結尾包圍*/。

例子

p{

????color: blue;

????}

/* add CSS here */

h1{

????color: red;

????}

屬性和選擇器

標簽選擇器

h1{

????color: green;

????}

使用標簽選擇器的話,會選擇所有的標簽。

class?屬性選擇器

.book-summary{

????color: blue;

????}

推薦:)可以給多個HTML元素添加同樣的屬性。

類可以應用在多個HTML元素中。

一個HTML元素也可以擁有多個類。

id?屬性選擇器

#site-description{

????color: red;

????}

我們要保守的使用ID。一個HTML元素只能擁有一個ID。

CSS參考

Mozilla開發者網絡 -?CSS參考

css-tricks.com -?CSS年歷

開發工具

谷歌瀏覽器F12召喚

火狐瀏覽器F12召喚

CSS單元


絕對單位和相對單位

絕對單位:測量固定單元

相對單位:相對于另一個物體的固定長度

CSS顏色

RGB模式表現

例,洋紅色rgb(255,0,255)

Red:255

Green:0

Blue:255

body{

? ? background-color:rgb(255,0,255);

? ? }

十六進制表現

例,洋紅色#FF00FF 或 #F0F

Red:FF

Green:00

Blue:FF

body{

? ? background-color:#FF00FF;

? ? }



?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • FreeCodeCamp - HTML5 and CSS 發現原來在另外一臺電腦學 FreeCodeCamp 的時...
    付林恒閱讀 9,424評論 2 17
  • CSS基礎 本文包括CSS基礎知識選擇器(重要!!!)繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,114評論 0 40
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,594評論 32 459
  • 20170913親愛的兒子,今天下班回家,我們都放松的休息會,你和我們聊天,你告訴我們,你們班今天發生的幾件事,你...
    簡單的幸福_ceb3閱讀 153評論 0 1
  • 支付寶開發文檔地址(https://pay.weixin.qq.com/wiki/doc/api/jsapi.ph...
    潦倒神仙閱讀 1,620評論 0 1