前端基礎_CSS

JerryZou 發布于2019-08-30 15:55 / 3364人閱讀

摘要：書寫語法內部與外部樣式選擇器樣式屬性值樣式內聯樣式樣式樣式基礎選擇器選擇器選擇器元素選擇器以上三種基本選擇器可以拼接在一起，匹配更準確例如選擇器的作用匹配元素高級選擇器組合選擇器通配符選擇器后代選擇器子元素選擇器相鄰兄弟選擇器選擇后面相鄰的

CSS 書寫語法

內部與外部樣式

選擇器 {
    樣式1;  // 屬性: 值; width: 300px
    樣式2;
}

內聯樣式


   // width: 300px

CSS 基礎選擇器

ID選擇器

#id{ }

class選擇器

.cls{ }

元素選擇器

div{ }
div.cls{ }

以上三種基本選擇器可以拼接在一起，匹配更準確 例如：div.cls{ }
選擇器的作用：匹配HTML元素

CSS 高級選擇器

組合選擇器

element,element{ }

通配符選擇器

*{ }

后代選擇器

pElement subElement{ }

子元素選擇器

pElem > subElem{ }

相鄰兄弟選擇器

div + a{ }    // 選擇div后面相鄰的a標簽

屬性選擇器

[attribute]{ }
element[attribute]{ }
element[attribute=value]{ }

偽類選擇器

a:link {color: #FF0000}        /* 未訪問的鏈接 */
a:visited {color: #00FF00}    /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標移動到鏈接上 */
a:active {color: #0000FF}    /* 選定的鏈接 */
p:first-child { }

偽元素選擇器

div::after{ content:"" }
div::before{ content:"" }

CSS 優先級

內部樣式和外部樣式合并

!important > 行間樣式 > ID選擇器 > 類選擇器/屬性選擇器/偽類選擇器 > 元素選擇器/偽元素選擇器 > 通配符選擇器

.cls{}      //0-0-0-1-0
#id{}       //0-0-1-0-0
div.cls{}   //0-0-0-1-1

CSS 常用樣式

文字

字體：font-family: "Times New Roman", Times, serif;
顏色：color: red;
字體大小：font-size: 40px;
字體粗細：font-weight: 900;
字體樣式：font-style：italic;

盒子

外邊距：margin：15px;
內邊距：padding: 20px;
邊框： border: 1px solid #999;
寬： width: 500px;
高： height: 400px;

背景

集成屬性寫法：
background: #0079D2 url(img/jt.jpg) no-repeat fixed 50% 20%;

單個屬性寫法：
背景圖大小：background-size:80px 60px; 
背景顏色：background-color:yellow;
背景圖位置：background-position:center; 
背景圖重復：background-repeat：no-repeat;
背景圖：background-image:url("paper.gif");

行高

line-height: 30px;     // 文字居中使用  取值可以是%，數值，像素

顯示與隱藏

1、display
隱藏樣式：display:none;
顯示樣式：display:非none的其它值

2、visibility
隱藏：visibility:hidden;
顯示：visibility:visible;

定位

position

取值：absolute、relative、fixed

1、絕對定位

CSS 布局

html標簽分類

塊級元素（block）
1、可以設置寬、高，不設置寬度，默認100%
2、獨占一行
3、塊級元素可以嵌套塊級元素和行內元素

行內元素（inline）
1、行內元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行
2、不支持設置寬、高，其寬和高隨元素的內容而變化
3、行內元素只能嵌套行內元素，不能嵌套塊級元素和行內塊元素

行內塊元素（inline-block）
1、可以設置寬、高
2、行內元素不會獨占一行
3、塊級元素可以嵌套塊級元素和行內元素

布局種類

1、table 表格布局
2、float 浮動布局 （重點）
3、inline-block布局
4、flexbox 布局  （現在布局方式）

float 浮動布局

容器需要清浮動，子元素需要浮動（float: left/right;）

/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1}    /*可解決ie6,ie7浮動問題*/

云服務器 GPU云服務器 css基礎基礎css css基礎教程前端css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117448.html

前端規范(ES6BEMOOCSSSMACSS)

摘要：前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。是定義了一種的命名規范，每個名稱及其組成部分都是存在一定的含義。前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。 Javascript Javascript規范直接參考airbnb: ES6 ...

Object 2019-08-02 15:54 評論0 收藏0
前端規范(ES6BEMOOCSSSMACSS)

摘要：前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。是定義了一種的命名規范，每個名稱及其組成部分都是存在一定的含義。前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。 Javascript Javascript規范直接參考airbnb: ES6 ...

willin 2019-08-30 13:02 評論0 收藏0
前端規范(ES6BEMOOCSSSMACSS)

摘要：前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。是定義了一種的命名規范，每個名稱及其組成部分都是存在一定的含義。前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。 Javascript Javascript規范直接參考airbnb: ES6 ...

levy9527 2019-08-19 18:18 評論0 收藏0
前端規范(ES6BEMOOCSSSMACSS)

摘要：前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。是定義了一種的命名規范，每個名稱及其組成部分都是存在一定的含義。前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。 Javascript Javascript規范直接參考airbnb: ES6 ...

xushaojieaaa 2019-06-24 17:51 評論0 收藏0
如何合理的規劃前端之路

摘要：什么是前端工程師總而言之就是運用等技術，在工作中配合設計師實現用戶界面，和后端工程師進行數據對接，完成應用開發的職位。什么是前端工程師？總而言之,就是運用 HTML、CSS、JavaScript 等 Web 技術，在工作中配合UI設計師實現用戶界面，和后端工程師進行數據對接，完成 Web 應用開發的職位。Tips:個人博客排版、UI更佳；地址：https://haonancx.git...

skinner 2019-08-02 15:56 評論0 收藏0