成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端基礎(chǔ)_CSS

JerryZou / 3376人閱讀

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

CSS 書寫語法

內(nèi)部與外部樣式

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

內(nèi)聯(lián)樣式

   // width: 300px
CSS 基礎(chǔ)選擇器

ID選擇器

#id{ }

class選擇器

.cls{ }

元素選擇器

div{ }
div.cls{ }
以上三種基本選擇器可以拼接在一起，匹配更準(zhǔn)確 例如：div.cls{ }
選擇器的作用：匹配HTML元素
CSS 高級(jí)選擇器

組合選擇器

element,element{ }

通配符選擇器

*{ }

后代選擇器

pElement subElement{ }

子元素選擇器

pElem > subElem{ }

相鄰兄弟選擇器

div + a{ }    // 選擇div后面相鄰的a標(biāo)簽

屬性選擇器

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

偽類選擇器

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

偽元素選擇器

div::after{ content:"" }
div::before{ content:"" }
CSS 優(yōu)先級(jí) 
內(nèi)部樣式和外部樣式合并
!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;
字體大?。篺ont-size: 40px;
字體粗細(xì)：font-weight: 900;
字體樣式：font-style：italic;

盒子

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

背景

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

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

行高

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

顯示與隱藏

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

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

定位

position

取值：absolute、relative、fixed

1、絕對(duì)定位
CSS 布局

html標(biāo)簽分類

塊級(jí)元素（block）
1、可以設(shè)置寬、高，不設(shè)置寬度，默認(rèn)100%
2、獨(dú)占一行
3、塊級(jí)元素可以嵌套塊級(jí)元素和行內(nèi)元素

行內(nèi)元素（inline）
1、行內(nèi)元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行
2、不支持設(shè)置寬、高，其寬和高隨元素的內(nèi)容而變化
3、行內(nèi)元素只能嵌套行內(nèi)元素，不能嵌套塊級(jí)元素和行內(nèi)塊元素

行內(nèi)塊元素（inline-block）
1、可以設(shè)置寬、高
2、行內(nèi)元素不會(huì)獨(dú)占一行
3、塊級(jí)元素可以嵌套塊級(jí)元素和行內(nèi)元素

布局種類

1、table 表格布局
2、float 浮動(dòng)布局 （重點(diǎn)）
3、inline-block布局
4、flexbox 布局  （現(xiàn)在布局方式）

float 浮動(dòng)布局

容器需要清浮動(dòng)，子元素需要浮動(dòng)（float: left/right;）
/*清除浮動(dòng)代碼*/
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1}    /*可解決ie6,ie7浮動(dòng)問題*/

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117448.html

相關(guān)文章

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

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

    Object 評(píng)論0 收藏0

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

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

    willin 評(píng)論0 收藏0

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

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

    levy9527 評(píng)論0 收藏0

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

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

    xushaojieaaa 評(píng)論0 收藏0

  • 如何合理的規(guī)劃前端之路

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

    skinner 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<