CSS 入門

李濤發(fā)布于2019-08-30 15:54 / 2734人閱讀

摘要：運行結(jié)果選擇器實例選擇器這個標題居中這個段落居中。如果需要更多的信息，請關(guān)注我，我會持續(xù)更新。

一、CSS簡介 1.什么是css

css指層疊樣式表（ascading Style Sheets）

樣式定義如何顯示HTML樣式

樣式通常儲存在樣式表中

外部樣式表可以極大的提高工作效率

實際就是學習選擇器和css屬性

2.CSS語法

選擇器{屬性：屬性值;屬性：屬性值;}
div{color:blue;font-size:20px;}

實例1：

實例

這個標題設置的大小為 40 px

這個標題設置的顏色為藍色：blue

這個段落的左外邊距為 50 像素：50px

運行結(jié)果：

實例2：

實例2 ? ?

這是標題

你可以看到這個段落是被設定的 CSS 渲染的。

這是一個鏈接

運行結(jié)果：

3.id和class選擇器

如果你需要在HTML里設置CSS樣式，你需要在元素中設置"id" 和 "class"選擇器。

id選擇器實例：

選擇器

Hello World!

這個段落不受該樣式的影響。

運行結(jié)果： class選擇器實例：

選擇器

這個標題居中

這個段落居中。

運行結(jié)果：

二、CSS基礎(chǔ) 1.文本

color:#fff; ???????修飾字體顏色

text-align:left/center/right/justify ??設置文本對齊

text-indent:2em; ???設置文本縮進

2.字體

font-family:Microsoft YaHei; ????改變字體樣式

font-size:14px; ???????修改文字大小

font-weight:blod; ? ????字體加粗

3.鏈接

a:link - 正常，未訪問過的鏈接

a:visited - 用戶已訪問過的鏈接

a:hover - 當用戶鼠標放在鏈接上時

a:active - 鏈接被點擊的那一刻

4.列表樣式（ul）

無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）

有序列表 - 列表項的標記有數(shù)字或字母

使用css，可以列出進一步的樣式，并可用圖形做列表項標記

實例

列表樣式

無序列表實例:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

有序列表實例:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

運行結(jié)果：

總結(jié)

本教程已向你講解了如何創(chuàng)建樣式表來同時控制多重頁面的樣式和布局。
你已經(jīng)學會了如何使用CSS來添加背景、文字樣式、以及鏈接樣式，并定義列表樣式。
如果需要更多CSS的信息，請關(guān)注我，我會持續(xù)更新。

云服務器 GPU云服務器 css入門 css快速入門 css入門到精通 css入門教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116866.html

相關(guān)文章

前端學習資源整理

稍微整理了一下自己平時看到的前端學習資源，分享給大家。 html MDN：Mozilla開發(fā)者網(wǎng)絡 SEO：前端開發(fā)中的SEO css 張鑫旭：張鑫旭的博客 css精靈圖：css精靈圖實踐柵格系統(tǒng)：詳解CSS中的柵格系統(tǒng) 媒體查詢：css媒體查詢用法 rem布局：手機端頁面自適應布局移動前端開發(fā)之viewport的深入理解:深入理解viewport 淘寶前端布局：手機淘寶移動端布局 fl...

siberiawolf 2019-08-21 11:27 評論0 收藏0
webpack入門學習手記（五）

摘要：另外需要指定這個參數(shù)，表示在配置的數(shù)值以下的圖片才進行編碼，超過的不進行處理。代碼如下所以過程就是引入了，然后進行打包處理，生成和。目前這個入門學習手記到這里就結(jié)束了。完相關(guān)文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

AlphaWatch 2019-08-26 10:13 評論0 收藏0
webpack -> vue Component 從入門到放棄（二）

摘要：我們可以根據(jù)模塊類型擴展名來自動綁定需要的。當需要加載的文件匹配的正則時，就會調(diào)用后面的對文件進行處理，這正是強大的原因。這篇就這樣吧，感覺進度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點升華。 First Step 我們給第一篇例子中加個...

DobbyKim 2019-08-20 14:37 評論0 收藏0
webpack -> vue Component 從入門到放棄（二）

摘要：我們可以根據(jù)模塊類型擴展名來自動綁定需要的。當需要加載的文件匹配的正則時，就會調(diào)用后面的對文件進行處理，這正是強大的原因。這篇就這樣吧，感覺進度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點升華。 First Step 我們給第一篇例子中加個...

xiaochao 2019-08-01 16:23 評論0 收藏0
CSS入門之引用、選擇器、屬性（六分之三）

摘要：入門教程六分之三篇沒辦法，我直播教小伙伴入門，屬性講完，準備說定位的時候，他們就喊停，不住了。。。選擇器表達式如下相關(guān)效果見表達式關(guān)鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。 CSS 入門教程六分之三篇沒辦法，我直播教小伙伴CSS入門，屬性講完，準備說定位的時候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333 要點解釋引用如...

baishancloud 2019-08-30 15:54 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0