100天學習前端計劃 DAY 0 | CSS基礎

時間 2020-05-14

原文原文鏈接

學習是件有意思的事 & 持續的積累。css

本狸以前是作過產品啦，如今想學一學前端，實現一些本身的想法（雖然有在作，但很慢啦，由於本身缺少一個系統性的學習，總是返工）。以前的學習進度也有點緩慢，缺少自個人督促！所以作了這樣一個幾乎能夠是說從0開始學前端的計劃的100天計劃。但願天天記錄本身的所學所得(便是是一點點也不要緊），做爲本身的知識積累與沉澱，也把它當作一個持續的事情來堅持。I guess a hundred days is enough for me to do some small tricks lol.html

寫在前面

算是一個總結，主要學習材料是《HF》。這本書的好處在於十分的詳實，把基礎給打的很透很紮實。以前還看過CS50的課，那個課的優點在於給你一種思惟，方便理解整個是如何運做的，但進度很快，講得比較抽象。還跟着b站的課程學了一點，這個課主要是告訴你怎麼用的，但對背後的原理講得比較淺。綜上，更推薦HF來入門。前端

什麼是CSS？

CSS是層疊樣式表（Cascading Style Sheets）的縮寫，做用是爲頁面添加所須要的樣式。若是把HTML理解爲房子的結構好比窗戶，門，桌子，那CSS就是牆紙，玻璃的顏色，桌布。學習

規則

下面舉例說明基本的規則：spa

p{
    background-color: red;
}

一個CSS是由選擇器和聲明塊組成的。好比這裏的p就是選擇器，花括號包裹的就是聲明塊。code

聲明塊內又是由屬性和值組成的，在這裏，屬性是background-color,值是red。htm

場景

CSS應用於多個選擇器時

h1,h2{
    background-color:red;
}

做用於類選擇器時

如class="book"string

適用於類內全部元素

.land{
    background-color: red;
}

適用於類內的h1元素

h1.greenland{
    background-color:red;
}

做用於ID選擇器

如id="book"產品

#book{
    background-color:red;
}

做用於子孫選擇器

如div id="Book",要選擇book id中的段落。it

#Book p{
background-color:red;
}

使用的三種方式

最推薦——外鏈的方式

這樣就能夠把HTML和CSS分開，讓HTML好好幹結構的事，CSS好好負責樣式的事，這樣也很是方便修改，外鏈的話，在HTML頁面中只用增減一行link代碼，也十分方便後期維護。否則就要每一個頁面改一下，想象一下有幾十個頁面，那可太麻煩啦。 HOW TO: 在html文件中增長這樣一個代碼：

<head>
<title>
How to use css link
</title>
<link type="text/css" rel="stylesheet" href="../book/ibook.css">
</head>
複製代碼

如下講解各個的含義：

使用link元素鏈入外部信息
type="text/css"這個在H5中再也不須要，可不寫
rel屬性指定了HTML文件與所連接的文件之間的關係，在這裏是一個樣式表，因此是"stylesheet"
href標明瞭連接路徑，在這裏用的是相對路徑。
link是一個void元素，因此沒有結束標記。

內部樣式表（head裏放置）

<head>
<style> p{ color:red; } </style>
</head>
複製代碼

內聯樣式

<p style="color:red;">
複製代碼

注意點

.對應class,#對應id——能夠記憶爲有點累(類)
注意p元素不能包含塊元素，只能包含內聯元素
我理解，類選擇器和子孫選擇器的一個區別在於，子孫選擇器更加有普遍的適用性，使用於能夠用結構化的h1,p就能夠表達樣式了。

這幾個注意點是我本身寫代碼的過程當中發現，因此仍是要多寫啊，經過自個寫來掌握知識！寫着寫着就發現問題了。

（吐槽一下，發佈的時候添加標籤怎麼這麼很差用？我沒法自定義，查看已有的標籤交互作的也讓人難以理解...是打一個空格？並且怎麼找到CSS標籤，試了好幾遍才能夠emmm）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。