html5課件筆記css3選擇器字體

CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的模塊包括：盒子模型、列表模塊、超方式、語言模塊、背景和邊框、文字特效、多欄布局等CSS3是的CSS標(biāo)準(zhǔn)善的瀏覽器來設(shè)計(jì)。css3中，增加了如下所示的三個(gè)屬性選擇器，使得屬性選擇器有1、[att*=val]: 表示att屬性值中包含val字符的選擇器寫法[class*=p]{background:red;<div2[att^=val]attval為屬性值開頭字符的選擇器寫[class^=p]{background:red;<div 表示att屬性中以val為屬性值結(jié)尾字符的選擇器寫法[class$=f]{background:red;<div復(fù)習(xí)css21、[class]:class屬性的所有元素設(shè)置樣式<div<div[class]{2、[att=“val”]:attval的元素[class=“div1”]{background:red;<div <div 3、[class~=val]: 表示給class屬性值包含val字符的元素設(shè)置樣式，<div <div<div [class~=div1] color:red;4[att|=val]: 表示給att屬性值為val開頭連字符的元素設(shè)置樣式；<div<divclass=”div1aa”></div>[class|=div1]{color:red;}持舊的偽類，比如:first-line、:first-letter、:before、:after等。對于CSS2之前已有的偽元素，比如:before法::before作用是一樣的。如果你的只需要兼容webkit、firefox、opera等瀏覽器，建議對于偽元素采用雙冒號的寫法，如果不得不兼容IECSS2的單冒號寫法比較安全。 寫法：元素：first-letter{} 表示設(shè)置在元前插入內(nèi)容寫法：元素:before{} 表示在元后插入內(nèi)容::selection:匹配元素中被用戶選中或處于狀態(tài)的部分（被background,cursor,outline。}css中已經(jīng)定義好的選擇器，不能隨便起名字。CSS定義中，a:hovera:linka:visited之后，CSS定義中，a:activea:hover之后，才是有:rootHTML文檔中根元素始HTML元素。{} p:not(.p1){color::empty選擇器為沒有任何子級元素并且沒有任何內(nèi)容的設(shè)IE6-8OddOddeven（1）p}p:nth-{}}{((anb)n（0始），b3p}{}{}{<spanspan。:only-of-type選擇一個(gè)元素是它的上級元素的唯一一個(gè)相同類型的{}}E:focus}<inputtype="text"E:disabled}<inputtype="text"disabledE:read-onlyreadonly"（只讀）}<inputtype="text"readonlyE:read-write（未設(shè)置的表單項(xiàng)都是可{background-color:}<p>input元素:<br><inputreadonlyE:checkedcheckedE:indeterminate：設(shè)置默認(rèn)未選中的單選項(xiàng)或者復(fù)選框選項(xiàng)的樣式（默認(rèn)還沒有被選擇過的時(shí)候會(huì)顯示的樣式設(shè)置）outline:solid2px}<inputtype="radio"name="<styleoutline:2pxsolid }"<inputtype="checkbox">看非非<styletype="text/css">outline:solid3pxUI}：<inputtype="radio"name="radio"value="male"<inputtype="radio"name="radio"value="female"~FE例如：h1~pbackground:red;E+F F例如：h1pwebkit：-webkit-presto：-o-trident：-gecko：-text-shadow：水平陰 垂直陰影模糊半 text-shadow:5px red,5px 25px5px 2css3中，使用@font-face屬性來利用服務(wù)器端的字體}OpenType和TrueType;opentype，文件擴(kuò)展名為.otf;truetype,文件擴(kuò)展名為.ttf;IEEmbeddedOpenType字體文件，擴(kuò)展名為.eot,format屬性；normalbreak-wordURL css3background } （IE9以上支持）padding區(qū)域（padding）開始顯示背景圖像。border區(qū)域（border）開始顯示背景圖像。 padding區(qū)域（padding）開始向外裁剪背景。border區(qū)域（border）開始向外裁剪背景。text1、IE2、Firefox-moz-background-clip-moz-background-clip：content3、Safari和Chrome添加私有屬性-webkit-background-clip支持。css3中邊框的變化： 1-moz-border-right-colors#f00#0f0#0ff#ff0; border-image-source:url(); numberborder-width%邊界圖像區(qū)域的大小：橫向偏移的寬度的面積，垂直偏移的高度autoimageslice的內(nèi)在寬度或高度border-imagewidth4border number數(shù)字表示圖像的像素（位圖圖像）或向量的坐標(biāo)（如果圖%百分比圖像的大小是相對的：水平偏移圖像的寬度，垂直偏移圖注意:此屬性指定頂部，右，底部，左邊緣的圖像向內(nèi)偏移，分為用于圖像邊界是否應(yīng)重復(fù)（repeat）、拉伸（stretch）（round）取值：repeatstretchborder-radiusvalueborder-radius:水平圓角半徑/垂直圓角半徑；border-top-left-radius:10px50px;-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleft-webkit-border-top-left-radius-webkit-border-top-right-radius-webkit-border-bottom-right-radius-webkit-border-bottom-left-radiusborder-top-left-radius左上角border-top-right-radius右