我了解的，css基礎寫法

css 樣式，有三種寫法。

內嵌在標籤上的寫法；

在html 頁面內，使用style 標籤的內部樣式；

在html 頁面內，使用 link 標籤，href 外聯外部檔案。

1.內嵌

在 html 中，寫乙個div 標籤。在標籤上新增乙個style的屬性名。之後就可以在style裡面填充自己需要的css 樣式。

class
="box1"
style
="width
: 100px;
height
: 100px;
background-color
: #f00
">
div>

這樣就成功的在頁面上新增了乙個，寬、高為100px，背景顏色為紅色的 div。

2.內部樣式

這裡需要注意，style標籤必須寫在，head 標籤內、title 標籤的下面。對頁面的渲染比較友好，也方便後期維護。當然寫在其他位置也可以達到效果（不推薦）

lang
="en"
>
>
charset
="utf-8"
>
>
樣式title
>
type
="text/css"
>
.box2
style
>
head
>
>
class
="box2"
>
div>
body
>
html
>

這樣就在頁面上新增了乙個綠色的方塊。

3.外聯樣式

第三種方式，是最常用的方式。當專案中頁面較多時，頁面內相同的樣式也會隨之增加。這種方式可以很好的節省**量，並且是公用樣式的內容達到統一。

我們需要在html 檔案所在的位置，新建乙個字尾為 .css 的檔案

之後我們在頁面html內引入。同樣的，我們 link 標籤的位置也遵循第二點中的，在 head 內、title 後面。

html

lang
="en"
>
>
charset
="utf-8"
>
>
樣式title
>
rel=
"stylesheet"
type
="text/css"
href
="./css.css"
>
head
>
>
class
="box3"
>
div>
body
>
html
>

css.css

.box3

這樣，就在頁面上新增了一黑色方框。

在實際的開發中，並沒有說只使用某一種css 的寫法就可以完成所有的樣式布局，都是三種用法混合著來，當然最多的還是外聯。

那麼就有個問題了，當乙個標籤的類在三個檔案中都定義的時候，會載入哪個？

樣式顯示是 1>2>3。

lang
="en"
>
>
charset
="utf-8"
>
>
樣式title
>
type
="text/css"
>
.thebox
style
>
rel=
"stylesheet"
type
="text/css"
href
="./css.css"
>
head
>
>
class
="thebox"
style
="width
: 100px;
height
:100px;
background-color
: #f00;
">
div>
body
>
html
>

上面這串**將三種方式都是用到了。我們給 thebox 這個類，設定寬高都為100px。不同的是，內嵌標籤中背景顏色為紅色，內聯樣式中顏色為綠色，外聯樣式中顏色為黑色。最後在頁面中展示的是紅色的方塊。

還可以通過瀏覽器的檢查功能檢視：

在頁面右邊styles 中就可以看到。三種方式書寫的**都對thebox 這個div 產生了影響。但是因為優先順序的關係，優先順序低的都被覆蓋了，最後生效的是標籤中內嵌的樣式。這個並不是全部否定，如果在外聯中定義了寬高，在內聯和內嵌中都沒有定義寬高，頁面上渲染的還是外聯的寬高。樣式優先順序針對的是，同乙個屬性。

在一開始書寫**的時候，樣式效果沒出來或者是不對的時候，一定要使用瀏覽器的檢查功能。這樣可以方便我們快速的定位問題，從而解決問題。

我了解的，css基礎寫法

優雅的css寫法

我心中的PHP寫法

我的PE了解

我了解的，css基礎寫法

優雅的css寫法

我心中的PHP寫法

我的PE了解

相關推薦