2019年3月3日html第二天-預(yù)習(xí)css第一天課堂筆記

一、csscss概css（cascadingstylesheet）層疊式樣式表。：層疊式，樣式。css也是由w3c組織進行和更新css作css樣式屬性是逐條排列的，有什么樣式就直接書寫什么屬性。divwidth:11.box23width:4height:5background-color:6}7p889font-size:color:font-weight: height:盒子高度width:width:height:background-color:color:文字顏色font-sizefont-weight:文字是否加粗（normal:文字不加 bold:文字加粗color:color:font-size:font-weight:css <divstyle="width100px;height200pxbackground-colorlightblue;">內(nèi)嵌式（嵌入式）：書寫在head內(nèi)部一對style中。Style有一個type屬性，屬性值“text/csscss是純文本文件。Type可以省略不書寫，但是要書寫就必須寫對。 234<style5div6color:7}8 Link也是書寫在head內(nèi)Css文件也是純文本的文件擴展名.css所有的樣式屬性直接書寫在css文件中，不用style包裹Link有一些屬Relhtmlcss關(guān)系是樣式表Type:css是純文本的文件Href:路徑HTMLcss的路徑 <linkrel="stylesheet"type="text/css"css雜 k:二、基礎(chǔ)選擇2.1選擇寫法：名{}，能夠選中頁面上所有的同種不管嵌套的再深都會被選中。 567891212ul3list-style: atext-decoration:7color: id通過的id屬性進行選中寫法 <p<pid="teshu">段落#teshu3font-size: Id名命名規(guī)則：首字符是字母（Aa是不同的兩個名字），其他字符可以使數(shù)字、下劃 <pid="header_1">我 的 <h3 <pcss的層疊性。ppcolor: #teshu5font-size: 通過的class屬性進行選 id .teshu2width:3height:4background-color: <divclass="teshu">盒子<divclass="teshu">盒子 <divclass="teshubd">盒子 <divclass="f20fb">盒子*通配符選擇器（*可以選中頁面上所有的甚至包括 * padding:3margin: 11二、高級選擇后代選擇divp3color: .boxp6color: <div9.boxp .boxp2color: <div56789<div .boxdivp .boxdivp 2font-size: 5<div67 交集選擇112p.parabackground-color:}可以連續(xù)交集。P.para.box(選中的元素既是p又有para類，同時還必須有box類名 <pclass="parabox">para #box.para{}不合法，因為#box并集選擇 p,div,h32color: p66color: div9color:1011h3color:13三、層疊性和繼承繼承1.box23width:4height:567font-size:8color:9}<div給.boxh3p可以繼承祖先.box（fontlinetext,color等（widthheight,background系列，浮動等）。css body2font-size:3color:4font-family: 層疊 div2color:3font-size: #box6color: .box9color:10DivId選擇器>類選擇器>選擇1id=2551個類選擇器=255選擇.box1.box1.box2.box3color:3font-size: #box1.box2div6color: #box1.box2.box39color:10 #box1.box2div2color: .box1#box2div5color:6font-size: body2font-size:3color: #box16color: .box1.box29color:10如果距離相同，看選擇器（祖先）的權(quán)重。依次比較id選擇器，類選擇器，選擇器數(shù)量。如果id最大。如果類選擇器數(shù)量也相同，再比較選擇器的數(shù)量，選擇器數(shù)量多的權(quán)重最大。11#box1.box22color: .box1#box25color:6}ppcolor:red3font-size: #para6color:7font-size: b