CSS 核心樣式

時間：2023-08-30 02:48:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-08-30 02:48:02 來源：網(wǎng)站運(yùn)營

CSS 核心樣式：

CSS核心樣式

粗細(xì)font-weight

• 作用:設(shè)置文字是否加粗顯示
• 屬性名: font-weight, 屬于font屬性的一個單-屬性
• 屬性值有兩種方式:單詞類型、數(shù)字類型

單詞類型

數(shù)字類型

• 100-900之間的整百數(shù)字
• 數(shù)字越大，文字顯示越粗
• 其中400等價于normal, 700等價于bold

字體風(fēng)格font-style

• 作用:設(shè)置文字是否斜體顯示
• 屬性名: font-style, 屬于font屬性的一個單- - 屬性
• 屬性值:單詞

行高line-height

• 作用:設(shè)置的是一行文字實(shí)際占有的高度，文字字號在行高中是垂直居中的
• 屬性名: line-height, 屬于font屬性的-一個單一屬性

字體綜合font

• 字體、字號、行高、加粗、斜體都是font綜合屬性的單一屬性
• font屬性五個單一屬性的值可以進(jìn)行合寫，屬性值可以有2到多個，值之間用空格進(jìn)行分隔

寫法一

• font進(jìn)行綜合書寫時，必須有字號和字體參與，而且必須字號在前，字體在后，不能顛倒順序
  如：font:14px "宋體"；

寫法二

• font屬性經(jīng)常對字體、字號、行高進(jìn)行合寫，書寫順序必須是字號、行高、字體，字號和行高之間必須用/進(jìn)行分隔
  如：font：14px/28px "宋體"

寫法三

• 如果font屬性需要設(shè)置加粗和斜體，兩個屬性值只能寫在最前面，兩個值之間可以互換位置，后面的字號、行高、字體不能更改位置
  如： font： bold italic 14px/28px "宋體"；

水平對其 text-aligns

作用：設(shè)置文本水平方向的對齊
在盒子中，不論文本是單行還是多行，都會對應(yīng)方向?qū)R
屬性值：三個方向的單詞

文本修飾text-decoration

• 作用:設(shè)置文本整體是否有線條的修飾效果

文本縮緊

• 作用:設(shè)置段落首行是否進(jìn)行縮進(jìn)

盒模型又叫框模型

• 包含了五個用來描述盒子位置、尺寸的屬性，分別是寬度width、高度height、內(nèi)邊距、padding、邊框border、外邊距margin
  常見盒模型區(qū)域
• 盒模型的屬性中，根據(jù)不同屬性的效果，可以劃分區(qū)域:
• 書寫元素內(nèi)容區(qū)域: width+height
• 盒子可以實(shí)體化的區(qū)域: width+height+padding+border
• 盒子實(shí)際占位的位置: width+height+padding+border+margin
  注：深刻理解盒模型圖
  盒模型寬度 width
• 作用：設(shè)置可以添加元素內(nèi)容的區(qū)域?qū)挾?/li>

特殊應(yīng)用

如果一個元素不添加width屬性，默認(rèn)屬性值為auto,不同的元素瀏覽器會根據(jù)其特點(diǎn)自動計算出實(shí)際寬度，例如<div>元素等獨(dú)占- -行的，其width屬性的值會自
動撐滿父元素的width區(qū)域，如果是<span>元素等不需要獨(dú)占一行的，其width屬性的值是內(nèi)部元素內(nèi)容自動撐開的寬度

盒模型高度 height

• 作用：設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度
• 特殊應(yīng)用
  如果一個元素不添加height屬性，默認(rèn)屬性值為auto,瀏覽器會自動計算出實(shí)際
  高度，也就是是內(nèi)部元素內(nèi)容自動撐開的高度。元素的高度自適應(yīng)內(nèi)部內(nèi)容的高度

盒模型內(nèi)邊距 padding

• 作用:設(shè)置的是元素的邊框內(nèi)部到寬高區(qū)域之間的距離
• 特點(diǎn):可以去加載背景，不能書寫嵌套的內(nèi)容
• 屬性值:常用px為單位的數(shù)值
• padding是-個復(fù)合屬性，可以根據(jù)內(nèi)邊距的方向不同劃分為四個方向的單屬性
• 單一屬性：書寫四個方向單一屬性時，一般是按照順時針規(guī)律書寫：上、右、下、左
  簡寫
• 有時為了化簡書寫，-般習(xí)慣將四個方向的單一屬性進(jìn)行合寫成padding屬性
• padding屬性值:可以有1-4個值，值之間用空格進(jìn)行分隔
• 根據(jù)四個方向?qū)傩灾挡煌琾adding有多種值的書寫表示方法
• 根據(jù)padding的屬性值的個數(shù)不同，區(qū)分了四種表示法:
  

1. 四值法 p {padding:10px 20px 30px 40px;} 上右下左
2. 三值法 p {padding:10px 20px 40px;}上 左右 下
3. 二值法 p {padding:10px 20px;} 上下 左右
4. 單值法 設(shè)置屬性值只有一個，分配方向上右下左，四邊的值相同

制作三邊內(nèi)邊距相同，一邊不同

• 方法①:使用四值法、三值法，進(jìn)行屬性值設(shè)置
• 方法②:利用綜合屬性和單一屬性之間的層疊，對綜合屬性設(shè)置單值法，將四邊內(nèi)邊距設(shè)置相同，在后面使用單一屬性寫法，再次定義某個方向的屬性值不同，可以實(shí)現(xiàn)單一屬性層疊綜合屬性的一部分
• 其中第二種用法更加靈活，推薦使用，使用過程中注意書寫順序，單一屬性必須書寫在后，才能層疊掉綜合屬性中重復(fù)的部分

盒模型 border

• 作用:設(shè)置的是內(nèi)邊距外面的邊界區(qū)域，作為盒子的實(shí)體化的最外層
• 屬性值:由三個值組成，分為線的寬度、線的形狀、線的顏色
• border 屬性是一個復(fù)合屬性，根據(jù)劃分依據(jù)不同可以有兩種單一屬性的劃分分布
  p {
  border: 10px solid #f00;
  }
  按照屬性值的類型劃分
• 線寬：border-width
• 線型：border-style
• 顏色：bordr-colors
  線寬border-width
• 作用:設(shè)置邊框線的寬度
• 屬性值:常用px形式的數(shù)值，四個方向都有邊框,屬性值類似于padding,也有四種值的寫法
  border-width {
  10px 20px 30px 40px;
  }
  線型border-style
• 作用:設(shè)置邊框的線條形狀
• 屬性值:形狀的單詞，總體也是類似padding的綜合屬性寫法
• 屬性值的單詞可能性:none solid dashed dotted double grove ridge inset outset 重點(diǎn)記住前三個
  邊框顏色border-color
• 作用:設(shè)置邊框的顏色
• 屬性值:顏色名或顏色值，整體類似padding綜合屬性寫法
  根據(jù)邊框的方向劃分
• 上邊框: border-top
• 右邊框: border-right
• 下邊框: border- bottom
• 左邊框: border-left
• 每個單一屬性都必須與復(fù)合屬性border一致，設(shè)置三個屬性值
• 根據(jù)方向和類型，進(jìn)一步細(xì)分類似border-top的單一方向?qū)傩?，也可以根?jù)屬性值類型繼續(xù)進(jìn)行單一屬性劃分
• 單一屬性寫法: border-方向-類型。
• 注意:細(xì)分時必須先寫方向劃分再寫類型劃分，否則屬性名錯誤
  border-top-color: #000;

盒模型 margin

• body{
  padding: 0;
  margin: 0;
  }
• 和padding 差不多

盒模型 清除默認(rèn)樣式

• 大部分標(biāo)簽都有一個瀏覽器加載的默認(rèn)樣式，會對布局造成一些影響。為了避免默認(rèn)樣式對整體布局效果造成影響，一定要清除默認(rèn)樣式
• 盒模型屬性中內(nèi)外邊距:大部分容器級標(biāo)簽都有默認(rèn)邊距，要么用標(biāo)簽選擇器的并集方式，要么通配符清除
• <ul>和<ol>兩種列表有默認(rèn)的列表前綴:清除list--style屬性
  <a>標(biāo)簽的默認(rèn)樣式，順帶設(shè)置頁面中常用的a的公共樣式:設(shè)置color和text-decoration
• 清除默認(rèn)加粗效果:設(shè)置font-weight

/* 清除默認(rèn)樣式 */ /* body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li { margin: 0; padding: 0; } */ * { margin: 0; padding: 0; } ul,ol { list-style: none; } a { color: #333; text-decoration: none; } h1,h2,h3,h4,h5,h6,b,strong { font-weight: normal; } /* 設(shè)置初始化的公共樣式 */ body { color: #333; font-size: 14px; font-family: Arial,"宋體"; } </style>

盒模型高度height應(yīng)用

• 根據(jù)不同的需求，高度屬性可以設(shè)置也可以不設(shè)置
• 如果設(shè)置了高度:盒子占有的高度位置就確定死了，后面的同級元素會緊挨著加載
• 如果不設(shè)置高度:會根據(jù)標(biāo)簽內(nèi)部內(nèi)容高度自動撐開
• 以<div>標(biāo)簽為例，根據(jù)情況不同選擇是否設(shè)置高度
  overflow屬性
• 設(shè)置了高度的盒子，如果內(nèi)部元素的加載高度超過父級，會出現(xiàn)溢出效果。可以通過一個溢出的屬性overflow,進(jìn)行溢出部分內(nèi)容的顯示效果設(shè)置

必須不設(shè)置高度

• 要求盒子高度必須自適應(yīng)內(nèi)部內(nèi)容的高度
• 或者設(shè)置height的屬性值是自動的

盒模型擴(kuò)展-居中

文本水平居中

• 水平居中: text-align屬性
• 不論單行或多行都可以設(shè)置
  文本垂直居中
• 單行文本垂直居中: 讓文字行高line-height等于盒子高度heigh
• 多行文本垂直居中: 讓元素高度自適應(yīng)或者正好等于多行文字的高度，設(shè)置元素內(nèi)邊距上下值相同
  元素垂直居中
• 一個元素內(nèi)部嵌套的子元素，在父元素中居中
• 垂直居中:與多行文字類似，讓父元素高度自適應(yīng)，子元素高度自動撐開父級的高度，再給父元素設(shè)置相同的上下邊距
  元素水平居中
• 針對類似<div>樣式上必須獨(dú)占一行的盒子，如果子盒子寬度低于父盒子寬度，可以設(shè)置子盒子的margin值，水平方向的值都設(shè)置為auto
• 原因: auto 只在水平方向有作用，水平方向的margin如果設(shè)置為auto,邊距會自動無限增大，直到撐滿整個父元素除了子元素寬度之外剩余的區(qū)域，如果兩個水平
  方向都是auto,兩邊都要無限大，只能達(dá)到一個平衡，兩邊距離相同，導(dǎo)致盒子居中

盒模型擴(kuò)展-父子盒模型

• 一般情況下，一個父元素內(nèi)部可以放一個或多個子元素，而且多個子元素要排成行顯示，必須保證父元素的寬度一定要足夠(不考慮溢出情況)，需要遵循一個設(shè)
• 置尺寸的規(guī)律:所有子元素的寬度加在一起不能大于父元素的寬度width
• 父元素的width≥所有子元素width + padding + border + margin
• 如果不滿足條件:要么多余的子元素掉下來不能在一-排， 要么溢出父元素
• 解決方法： 計算或量取尺寸時一定要計算準(zhǔn)確，一像素都不能偏差
  特殊情況:盒模型自動內(nèi)減
• 父子盒模型中，只有一個子元素，且子元素是類似<div>標(biāo)簽必須占一行的
• 不設(shè)置子元素的width屬性，子元素的width屬性值會自動加載父級元素的width
• 如果同時設(shè)置了子元素水平方向的padding和border、margin, 不需要手動去進(jìn)行內(nèi)減，子元素的width會自動收縮尺寸
• 子元素所有的水平方向的位置所有屬性的加和等于父元素的width

margin塌陷現(xiàn)象

• margin塌陷現(xiàn)象:在垂直方向如果有兩個元素的外邊距有相遇的，瀏覽器中加載的
• 真正的外邊距不是兩個間距的加和，而是兩個邊距中值較大的，邊距值小的塌陷到了邊距值大的值內(nèi)部
  同級元素塌陷
• 上面的元素有下邊距，下面的元素有上邊距，兩個邊距相遇，真正的盒子間距離是較大的那個值
  父子元素塌陷
• 父子元素之間也會出現(xiàn)margin塌陷，父元素和子元素都設(shè)置了同方向的
• margin-top值，兩個屬性之間沒有其他的內(nèi)容進(jìn)行隔離，導(dǎo)致兩個屬性相遇，發(fā)生margin塌陷
• 父盒子沒設(shè)置margin-top時,本身父元素與上一個元素的距離是0，子元素如果設(shè)置了垂直方向的上邊距，會帶著父級一起掉下來
  解決margin塌陷問題的方法
• ①同級元素:如果兩個元素垂直方向有間距，只需要設(shè)置給一個元素，不要進(jìn)行拆分
• ②父子元素:讓兩個邊距不要相遇，中間可以使用父元素border或padding將邊距分隔開;更加常用的方法，父子盒模型之間的距離就不要用兒子的margin去踹出來，而是父級的padding擠出來
• 另外注意：水平方向的margin沒有塌陷現(xiàn)象

標(biāo)準(zhǔn)文檔流

• 在我們遇到的HTML元素中，有的標(biāo)簽元素如<div>、<p>等在瀏覽器中加載時必須獨(dú)自占滿一行，有的標(biāo)簽元素如<a>、<span>等則不會獨(dú)占一行，原因是什么?
  標(biāo)準(zhǔn)文檔流
• 標(biāo)準(zhǔn)文檔流，指的是元素排版布局過程中，元素會默認(rèn)自動從左往右，從上往下的流式排列方式。前面內(nèi)容發(fā)生了變化，后面的內(nèi)容位置也會隨著發(fā)生變化
• HTML就是一種標(biāo)準(zhǔn)文檔流文件
• HTML中的標(biāo)準(zhǔn)文檔流特點(diǎn)通過兩種方式體現(xiàn):微觀現(xiàn)象和元素等級
  微觀現(xiàn)象
• 1.空白折疊現(xiàn)象
• 2.文字類的元素日過排在一行會出現(xiàn)一種高低不齊、底邊對齊的效果
• 3.自動換行，元素內(nèi)一行內(nèi)容寫滿元素的width時會自動進(jìn)行換行
  元素等級
• 在標(biāo)準(zhǔn)流中，大部分元素是區(qū)分等級的，習(xí)慣將元素劃分為幾種常見的加載級別:
  塊級元素、行內(nèi)元素、行內(nèi)塊元素等
• 塊級元素:大部分容器級標(biāo)簽包括p標(biāo)簽都是塊級元素，比如<div>、 <h1>等
• 行內(nèi)元素:大部分的文本級柝笠，比如<span>、 <a>、<b>等
• 行內(nèi)塊元素:比如<img>、<input>等。
  塊級元素
• a、塊級元素可以設(shè)置寬高，在瀏覽器中正常加載
• b、塊級元素必須獨(dú)占一行，不能與其他任何標(biāo)簽并排一行
• C、塊級元素如果不設(shè)置寬度，會自動撐滿父級的width區(qū)域;高度不設(shè)置，會被內(nèi)容自動撐開高度
  行內(nèi)元素
• a、行內(nèi)元素不能正常加載寬度和高度屬性，其他的盒模型屬性雖然能設(shè)置，但是容易出現(xiàn)加載問題
• b、行內(nèi)元素可以與其他的行內(nèi)或行內(nèi)塊元素并排一行顯示
• c、行內(nèi)元素不論是否設(shè)置寬高，寬度和高度都只能被內(nèi)容自動撐開
  行內(nèi)塊元素
• a、行內(nèi)塊元素可以設(shè)置寬度和高度
• b、行內(nèi)塊元素可以與其他的行內(nèi)或行內(nèi)塊并排一行顯示
• C、行內(nèi)塊元素如果不設(shè)置寬高，要么以原始尺寸加載要么被內(nèi)容自動撐開
• d、行內(nèi)塊依舊具有標(biāo)準(zhǔn)流的微觀性質(zhì)，例如空白折疊現(xiàn)象

顯示模式-display

• 標(biāo)準(zhǔn)流中的元素有自己默認(rèn)的瀏覽器加載模式，但是加載模式不是-成不變的，后期可以通過display屬性更改一個標(biāo)簽的顯示模式
• 屬性值:元素根據(jù)屬性值不同，可以加載對應(yīng)元素等級的顯示模式的特點(diǎn)
  屬性值

脫離標(biāo)準(zhǔn)流

• display屬性更改的顯示模式并沒有改變標(biāo)準(zhǔn)流本質(zhì)性質(zhì)，頁面還是只能從，上往下加載，存在空白折疊現(xiàn)象等微觀性質(zhì)。要想實(shí)現(xiàn)更多的界面布局效果需要脫離標(biāo)準(zhǔn)流的限制
• 標(biāo)簽元素脫離標(biāo)準(zhǔn)流的方法包括:浮動、絕對定位、固定定位

浮動定義

• 浮動是一種非常重要的布局屬性
• 屬性名：float、漂流、浮動的意思
• 屬性值： left： 左浮動 right： 右浮動
• 作用： 讓元素脫離標(biāo)準(zhǔn)流，同一級的浮動的元素可以并排在一起顯示
  浮動的元素脫離標(biāo)準(zhǔn)流
• 標(biāo)準(zhǔn)文檔流特點(diǎn):區(qū)分行塊
• 塊級元素:可以設(shè)置寬高，必須獨(dú)占一行
• 行內(nèi)元素:不能設(shè)置寬高，可以并排一行
• 浮動的元素脫離了標(biāo)準(zhǔn)流的限制，具備行塊二象性，浮動的元素可以設(shè)置寬高，還可以并排一行，而且不會有空白折疊現(xiàn)象，如果元素不設(shè)置寬高，可以被元素內(nèi)容
  自動撐開
  浮動性質(zhì)-依次貼邊
• 浮動屬性值: left、 right。
• 浮動方向設(shè)置不同，進(jìn)行布局時，加載位置方向不同
• 以left為例:
• 父元素寬度足夠，所有子元素會按照HTML書寫順序，依次向左進(jìn)行貼邊，父元素
  左邊←子元素1←子元素2←子元素3←子元素4
  貼邊性質(zhì)應(yīng)用
• 利用浮動的這個依次貼邊性質(zhì)，可以完成多種網(wǎng)頁布局效果。例如:
• ① 上述平均分布表格效果
• ②導(dǎo)航欄效果
• ③常見的電商或企業(yè)網(wǎng)站布局
  浮動性質(zhì) - 沒有margin塌陷、字圍現(xiàn)象
• margin 塌陷現(xiàn)象出現(xiàn)在標(biāo)準(zhǔn)流中，浮動元素已經(jīng)脫離標(biāo)準(zhǔn)流，不再具有margin塌陷現(xiàn)象
  浮動的元素讓出了標(biāo)準(zhǔn)流的位置
• 元素浮動之后，脫離了標(biāo)準(zhǔn)流，會將原來占有的標(biāo)準(zhǔn)流位置讓給后面的一個同級元素
• 由于瀏覽器中有兼容性的問題，不會使用這種屬性制作壓蓋效果
• 如果沒有特殊需求，不允許一個父元素中的子元素有的浮動有的不浮動，同級元素中有一個浮動其他的也要浮動
  字圍現(xiàn)象
• 與前面壓蓋效果結(jié)構(gòu)類似，同級元素中前面的元素浮動，后面的元素不浮動，不浮動的元素內(nèi)部還有一些文字，浮動的藍(lán)盒子會壓蓋住粉盒子的一部分，但是文字內(nèi)
  容不會被蓋住，粉盒子中的文字會讓開藍(lán)盒子位置，圍繞它進(jìn)行加載
  浮動的問題
• 標(biāo)準(zhǔn)流中的元素，不設(shè)置高度的情況下，都能被內(nèi)部的標(biāo)準(zhǔn)流元素自動撐高，如果內(nèi)部的子元素進(jìn)行了浮動，浮動的子元素是撐不高標(biāo)準(zhǔn)流父親的
  清除浮動的方法
• 方法一：
  
• 清除浮動一： height
• 給標(biāo)準(zhǔn)流的父元素強(qiáng)制給一個合適的高度
• 解決:父元素有了高度，前面的浮動不能影響后面元素的標(biāo)準(zhǔn)流位置和貼邊
• 問題:父元素高度不是自適應(yīng)，一旦子元素高度變化，問題可能再次出現(xiàn)

• 清除浮動二： clear屬性
  
• clear,清除
• 作用:清除標(biāo)簽元素自身受到的前面的浮動元素的影響
• 屬性值:
  left 清除前面左浮動帶來的影響
  right 清除前面右浮動帶來的影響
  both 清除前面所有浮動帶來的影響
  給標(biāo)準(zhǔn)流父元素添加clear屬性，父元素不受前面浮動影響，不會再占有浮動讓出的位置
• clear: both
• 解決:浮動元素影響后面元素標(biāo)準(zhǔn)流位置和貼邊
• 問題:父元素不能高度自適應(yīng)，兩個父元素之間如果有margin效果不正確

• 清清除浮動三:隔墻法
  
• 外墻法:在兩個大的父盒子之間，添加一個空的<div>標(biāo)簽，標(biāo)簽上帶有clear:both屬性
• 解決:浮動影響后面元素標(biāo)準(zhǔn)流位置和貼邊，模擬父元素間的距離
• 問題:父元素沒有高度自適應(yīng)

內(nèi)墻法解決了

• 內(nèi)墻法:在父元素內(nèi)部，所有的浮動子元素后面添加一個空的元素，標(biāo)簽高度為0，添加clear屬性
• 解決:父元素高度自適應(yīng)，浮動影響后面的元素位置和貼邊
• 缺點(diǎn):浮動是css樣式屬性帶來的問題，內(nèi)墻法使用HTML結(jié)構(gòu)去輔助解決問題，如果頁面中浮動元素很多，需要添加多個沒有語義的空標(biāo)簽，造成HTML結(jié)構(gòu)的冗余

• 清除浮動四： 偽類
  
• 本質(zhì)是使用偽類方法利用css代碼書寫-堵內(nèi)墻
• 偽類選擇器:通過選中的標(biāo)簽添加偽類，去選中標(biāo)簽的某個狀態(tài)或位置
• :after:這個偽類表示選中的是某個標(biāo)簽內(nèi)部的最后的位置
• 書寫方法:前面必須加普通的選擇器，后面連續(xù)書寫偽類名稱
• 將偽類添加給一個選中父盒子的選擇器后面，一般給需要清除浮動的父盒子設(shè)置一個clearfix的類名
• .clearfix:after{
  content: "1";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

• 清除浮動五： 溢出隱藏
  
• 小偏方:給內(nèi)部有浮動子元素的父元素添加溢出隱藏overflow: hidden;屬性，可以解決浮動的所有問題
• 補(bǔ)充：overflow屬性，元素高度設(shè)置后，overflow：hidden；效果是將超過高度的部分直接隱藏
• 高度自適應(yīng)原因:一個元素沒有設(shè)置高度，同時設(shè)置了溢出隱藏，瀏覽器在加載盒子尺寸時，遇到溢出隱藏瀏覽器會強(qiáng)制性去檢索內(nèi)部的子元素的高度，不論子元素
  是標(biāo)準(zhǔn)流還是浮動，都會將最高的高度作為父盒子高度加載
• 浮動影響后面的元素:父元素有了高度后，可以管理住內(nèi)部所有的浮動元素，不會延伸到后面標(biāo)簽中影響貼邊

• 總結(jié)
  
• 如果父元素高度是固定的，建議使用height屬性解決
• 如果父元素高度需要自適應(yīng)，建議使用overflow屬性解決浮動問題

a標(biāo)簽的偽類

• 概念：
• 偽類和類之間有一定的相似之處，也存在明顯的區(qū)別。
• 普通的類:必須給標(biāo)簽設(shè)置對應(yīng)的class屬性值，才能選中標(biāo)簽，而且類選擇器后面添加的屬性，會立即加載到瀏覽器之上
• 偽類:不需要給標(biāo)簽添加任何屬性，偽類名都是語法提前規(guī)定好的，書寫時偽類必須搭配其他選擇器使用，偽類選擇器后面添加的樣式不一-定立即加載到瀏覽器之上，
  只有用戶觸發(fā)了對應(yīng)的行為，偽類的樣式才會立即加載
• 偽類選擇器的權(quán)重與普通的類選擇器相同
• 偽類選擇器寫法：前面是普通的選擇器，后面緊跟：偽類名
• <a>標(biāo)簽的偽類
  
• <a>標(biāo)簽可以根據(jù)用戶行為不同，劃分為四種狀態(tài)，通過<a>標(biāo)簽的偽類可以將四種狀態(tài)選中設(shè)置為不同的樣式效果，用戶觸發(fā)對應(yīng)行為，就可以加載對應(yīng)的樣式
• a:link {
  color:gray; ----- 訪問前狀態(tài)
  }
• a:visited {
  color:cyan; ----- 訪問后狀態(tài)
  }
• a:link {
  color:red; ----- 鼠標(biāo)懸浮狀態(tài)
  }
• a:link {
  color:yellow; ----- 訪鼠標(biāo)點(diǎn)擊狀態(tài)
  }
  <a>標(biāo)簽的偽類書寫順序

• <a>標(biāo)簽上可能會同時觸發(fā)2到3個狀態(tài)，每個狀態(tài)的屬性都會進(jìn)行加載，相同的屬性之間會發(fā)生層疊
• 偽類的權(quán)重是相同的，只能根據(jù)書寫順序，后寫的層疊先寫的，所以偽類書寫順序非常重要
• 要想讓每個偽類的狀態(tài)正常加載，書寫順序必須是:訪問前l(fā)ink、訪問后visited、鼠標(biāo)移.上hover、鼠標(biāo)點(diǎn)擊active
• 為了方便記憶，利用愛恨準(zhǔn)則: love hate
  <a>標(biāo)簽的偽類實(shí)際應(yīng)用
• 一般會將訪問前和訪問后狀態(tài)設(shè)置為一樣的效果，保證了頁面的統(tǒng)一性，可以選擇性的設(shè)置鼠標(biāo)移上和鼠標(biāo)點(diǎn)擊狀態(tài)
  a:link,a:visited {
  color: #666;
  }
  a:hover {
  color: #f00;
  }
• 更加常用的一種設(shè)置方式如下:
  
• <a>標(biāo)簽任何普通的選擇器，可以同時選中四種狀態(tài)，可以將四種狀態(tài)設(shè)置為相同的樣式，屬性可以設(shè)置所有的<a>默認(rèn)顯示樣式的屬性，包括盒模型、文字等
• a:hover偽類選擇器:設(shè)置鼠標(biāo)移上時不一樣的樣式屬性

css常用樣式-背景屬性一

• 背景顏色background-color
  
• 屬性名: background-color
• 作用:在盒子區(qū)域添加背景顏色的修飾。
• 加載區(qū)域:在border及以內(nèi)加載背景顏色
• 屬性值:顏色名、顏色值

• 背景圖片background-image
  
• 屬性名: background-image
• 作用:給盒子添加圖片的背景修飾
• 加載范圍:默認(rèn)的加載到邊框及以內(nèi)部分。后期如果圖片不重復(fù)加載，加載從border以內(nèi)開始
• 屬性值： URL（圖片路徑）
  url: uniform resource locator,統(tǒng)一資源定位符，小括號內(nèi)部書寫查找圖片的路徑

• 背景重復(fù)background-repeat
  
• 屬性名: background-repeat
• 作用:設(shè)置添加的背景圖是否要在盒子中重復(fù)進(jìn)行加載
• 根據(jù)屬性值不同，有四種重復(fù)加載方式 repeat no-repeat repeat-x repeat-y

• 背景定位background-position
  
• 屬性名: background-position
• 作用:主要用于設(shè)置不重復(fù)的圖片在背景區(qū)域的加載開始位置
• 屬性值:分為三種寫法，單詞表示法、像素表示法、百分比表示法。不論哪種寫法，屬性值都有兩個，值之間用空格分隔
• 第一個屬性值：表示背景圖片在水平方向的位置
• 第二個屬性值：表示背景圖片在垂直方向的位置
• 單詞表示法
• 屬性值都是使用代表方向的單詞進(jìn)行書寫
• 水平方向可選單詞: left、 center、 right
• 垂直方向可選單詞: top、 center、bottom
• 單詞表示圖片與盒子背景區(qū)域進(jìn)行對應(yīng)方向的對齊

• 像素表示法
• 使用像素值作為背景定位的屬性值
• 第一個屬性值：像素是幾，表示背景圖片左上角針對border以內(nèi)的左上頂點(diǎn)水平方向位移的距離
• 第二個屬性值：像素是幾，表示背景圖片左上角針對border以內(nèi)的左上頂點(diǎn)垂直方向位移的距離

• 像素值區(qū)分正負(fù)，正負(fù)代表位移方向不同:
• 正數(shù):表示圖片針對盒子的原點(diǎn)向右、向下移動
• 負(fù)數(shù):表示圖片針對盒子的原點(diǎn)向左、向上移動

• 百分比表示法
• 百分比表示法使用百分比數(shù)字作為屬性值
• 100%代表的數(shù)值:
  水平方向，等價于盒子的border以內(nèi)的背景區(qū)域?qū)挾葴p去圖片的寬度
  垂直方向，等價于盒子的border以內(nèi)的背景區(qū)域?qū)挾葴p去圖片的寬度

• 背景附著background-attachment
• 屬性名: background- attachment
• 作用:設(shè)置的是背景圖片是否要隨著頁面或者盒子的滾動而滾動
• 綜合寫法background
• background屬性可以將五個單屬性的值進(jìn)行合寫
• 屬性值:可以有1-5個屬性值，值之間用空格進(jìn)行分隔，背景定位的兩個屬性值算作
• 一個屬性值，不能被分開也不能顛倒順序。五個屬性值之間可以互換位置
  例如： background: url() no-repeat center top fixed;

• 注意事項(xiàng)
• 注意1: 如果屬性值沒有設(shè)置完全，其他沒有設(shè)置的單一屬性會按照默認(rèn)值加載
• 注意2: 如果想去層疊綜合屬性中的一部分，其他的屬性值保持不變，最好使用單一屬性寫法層疊

場景一: 替換插入圖

• <h1>標(biāo)簽是權(quán)重最高的標(biāo)簽，一般會在內(nèi)部書寫最重要的內(nèi)容，比如logo圖片、最大的標(biāo)題等
• 另外<h1>內(nèi)部的文字，可以幫助提高SEO搜索排名
• 在設(shè)置的是logo圖片時候，如果使用插入圖，就不能書寫搜索關(guān)鍵字

<h1> <a href="#"><img src="images/logo.png"/></a></h1><p data-line="556" class="sync-line" style="margin:0;"></p>

背景圖替換插入圖方法

• 如果想解決SEO問題，可以將HTML結(jié)構(gòu)中，插入圖換成搜索關(guān)鍵字，然后使用css添加背景圖給<a>標(biāo)簽或<h1>標(biāo)簽文字隱藏方法
• ①將字號設(shè)置為0。IE8 及以.上或高版本瀏覽器可以隱藏文字，但是IE7及以下有兼容問題
• ②可以設(shè)置給<a>標(biāo)簽一個text-indent屬性，屬性值為負(fù)的很大的值，文字會走到盒子外部，直接再設(shè)置溢出隱藏屬性，將溢出文字隱藏

場景二：padding區(qū)域背景圖

• 制作方法：
  在一個盒子中有背景圖部分，而且有文字內(nèi)容，文字會讓開背景圖區(qū)域進(jìn)行加載，背景區(qū)域應(yīng)該使用padding擠出位置
  四個方向padding都可能用于添加背景圖
  例如 padding-left區(qū)域背景：
  .news li {
  padding-left: 25px;
  background: url(images/s2.png) no-repeat left center;
  }

場景三：精靈圖技術(shù)

• 當(dāng)用戶訪問一個網(wǎng)站時，需要向服務(wù)器發(fā)送請求，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶
• 然而，一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁中的圖像過多時，服務(wù)器就會頻繁地接受和發(fā)送請求，這將大大降低頁面的加載速度
  為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了CSS精靈技術(shù)(也稱CSS Sprites、CSS 雪碧)
  css精靈
• CSS精靈是一種處理網(wǎng)頁背景圖像的方式。
  它將-個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁，這樣，當(dāng)用戶訪問該頁面時，只需向服務(wù)發(fā)送一次請求，網(wǎng)頁中的背景圖
  像即可全部展示出來
  css精靈的技術(shù)依據(jù)
• ①將網(wǎng)頁中需要用到的小尺寸背景圖制作成一張背 景透明的png圖片
• ②利用背景定位技術(shù)，將精靈圖的每個小圖片加載到對應(yīng)的標(biāo)簽上
  制作精靈圖的注意事項(xiàng)
• 1.精靈圖上放的都是小的裝飾性質(zhì)的背景圖片，插入圖片不能往上放
• 2.精靈圖的寬度取決于最寬的那個背景圖片的標(biāo)簽寬度
• 3.精靈圖可以橫向擺放也可以縱向擺放，但是每個圖片之間必須留夠足夠的空白，保證背景圖片加載到一個標(biāo)簽內(nèi)部時，不能出現(xiàn)多余內(nèi)容
• 4.在精靈圖的最底端，盡量留一點(diǎn)空白，方便以后添加其他精靈圖
• 精靈圖在線工具可以快速查找

css3新增背景屬性 - 背景半透明

• css3支持背景半透明的寫法，顏色值增加了一種ragb模式
• rgba模式:在rgb基礎(chǔ).上增加了一個不透明度的設(shè)置，不透明度alpha取值范圍在0-1之間，0表示完全透明，1表示完全不透明，0.5 表示半透明

.box { width: 100px; height: 100px; background-color: ragb(255,0,0,1); }

• 半透明其他應(yīng)用
  同樣，可以給文字和邊框透明，都是ragb的格式來寫
  背景縮放 background-size
• 通過background-size設(shè)置背景圖片的尺寸，就像我們設(shè)置<img>的尺寸一樣，在移動Web開發(fā)中做屏幕適配應(yīng)用非常廣泛

屬性值	說明

• 多背景
• CSS3中規(guī)定，一個盒子上，可以添加多個背景圖片
• background-image的屬性值書寫時，以逗號分隔多背景的URL路徑地址
• 注意:背景加載時，先寫的背景壓蓋后寫的背景圖片

background-image: url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);

定位屬性

屬性名	屬性值

• 作用：設(shè)置定位的元素，他需要根據(jù)某一個參考元素發(fā)生位置的偏移
• 偏移量屬性
  
• 定位的元素要想發(fā)生位置的移動，必須搭配偏移量屬性進(jìn)行設(shè)置
• 水平方向: left、 right
• 垂直方向: top、bottom
• 屬性值:常用px為單位的數(shù)值，或者百分比

相對定位 relative

• 相對定位的性質(zhì)
  
• 性質(zhì):相對定位的元素不脫離標(biāo)簽的原始狀態(tài)(標(biāo)準(zhǔn)流、 浮動)，不會讓出原來占有的位置
• 元素顯示效果上，原位留坑，形影分離

• 注意事項(xiàng)
  
• 注意1:偏移量屬性的值是區(qū)分正負(fù)的
• 正數(shù)：表示偏移方向與屬性名相反
• 負(fù)數(shù)： 表示偏移方向與屬性名相同
• 注意②:同一個方向，不能設(shè)置兩個偏移量屬性，如果水平方向同時設(shè)置了left 和right屬性，只會加載left屬性。垂直方向只加載top屬性
• 建議：書寫時從水平方向和垂直方向各挑一個屬性進(jìn)行組合
• 注意③:由于相對定位的參考元素是自身，left 的正值等價于right 的負(fù)值，top 的正值等價于bottom的負(fù)值
• 為了方便記憶，可以只選擇left、top組合

position: relative; right: -50px; bottom: -50px; 等價于 position: relative; left: 50px; top: 50px;

絕對定位

• 屬性值: absolute, 絕對的意思
• 參考元素:參考的是距離最近的有定位的祖先元素，如果祖先都沒有定位，參考<body>
• 必須搭配偏移量屬性才會發(fā)生位置移動
• 性質(zhì)：絕對定位的元素脫離標(biāo)準(zhǔn)流，會讓出標(biāo)準(zhǔn)流位置，可以設(shè)置寬高，也可以隨時定義位置，絕對定位的元素不設(shè)置寬高只能被內(nèi)容撐開
• 注意1: 絕對定位的參考元素是不固定的，不同的參考元素以及不同的偏移量組合，會導(dǎo)致絕對定位元素的參考點(diǎn)不同，具體位移效果不同
• 注意2: 在絕對定位中，由于參考點(diǎn)不同，left正值不再等價于right的負(fù)值
• <body>為參考元素的參考點(diǎn)
  
• 以為參考元素時，參考點(diǎn)的確定與偏移量方向有關(guān)。第一，如果有top參與的定位，參考點(diǎn)就是<body>頁面的左上頂點(diǎn)和右上頂點(diǎn)。自
  身的對比點(diǎn)是盒子的所有盒模型屬性最外面的左上角或右上角
• 第二，如果有bottom參與的絕對定位，參考點(diǎn)是<body>頁面首屏的左下頂點(diǎn)或右下頂點(diǎn)。對比點(diǎn)是盒子的所有盒模型屬性最外面的左下角或右下角
• 實(shí)際應(yīng)用中，如果以<body>為參考元素，不同分辨率的瀏覽器中，絕對定位的元素位置是不同的，所以較少使用<body>作為參考元素

• 祖先級為參考元素
  
• 如果祖先級中有定位的元素，就不會去參考
• 參考元素： 參考的是祖先元素中任意定位的，在html結(jié)構(gòu)中距離目標(biāo)最近的祖先

• 根據(jù)絕對定位的參考元素的定位類型不同，有三種定位組合方式:子絕父相、子絕父絕、子絕父固，由于相對定位的祖先級位置更穩(wěn)定，大多使用子絕父相的情況

固定定位

• 屬性值: fixed, 固定的意思
• 參考元素:瀏覽器窗口
• 參考點(diǎn):瀏覽器窗口的四個頂點(diǎn)。跟偏移量組合方向有關(guān)
• 由于瀏覽器窗口的四個頂點(diǎn)位置不會發(fā)生變化，會導(dǎo)致固定定位的元素會始終顯示在定位位置
• 性質(zhì)：固定定位的元素脫離標(biāo)準(zhǔn)流，讓出標(biāo)準(zhǔn)流位置，可以設(shè)置寬高，根據(jù)偏移量屬性可以任意設(shè)置在瀏覽器窗口的位置，固定定位的元素會始終顯示在瀏覽器窗口上

定位應(yīng)用、壓蓋、居中

positionL: absolute;left: 50%;width: 100px;margin-left: -50px;

• 注意：不論子盒子的寬度是否比參考元素更寬，都能使用以上方法進(jìn)行居中設(shè)置
  擴(kuò)展應(yīng)用
• ①解決標(biāo)準(zhǔn)流中，寬的子盒子在窄的父盒子中的居中，可以設(shè)置大的子盒子相對定位，利用相對定位居中的方法進(jìn)行居中

.box p{ position: relative; left: 50%; width: 800px; height: 100px; margin-left: -400px; background-color: #000;}

• ②浮的元素居中，在不改變原始浮動狀態(tài)情況下，可以利用相對定位居中方法

定位壓蓋順序 z-index

• 默認(rèn)壓蓋順序
  
• 定位的元素不區(qū)分定位類型，都會去壓蓋標(biāo)準(zhǔn)流或者浮動的元素
• 如果都是定位元素，在html中后寫的定位壓蓋先寫的定位

• 自定義壓蓋順序注意事項(xiàng)
  
• ①屬性值大的會壓蓋屬性值小的，設(shè)置z-index屬性的會壓蓋沒有設(shè)置的
• ②如果屬性值相同，比較HTML書寫順序，后寫的壓蓋先寫的
• ③z-index屬性只能設(shè)置給定位的元素才會生效，如果給沒有定位的元素設(shè)置，不會生效
• ④父子盒模型中，如果父子盒子都進(jìn)行了定位，與其他的父子級有壓蓋的部分:父級盒子:如果不設(shè)置z-index,后寫的壓蓋先寫的;如果設(shè)置了z-index,值大的壓蓋值小
  的

靜態(tài)輪播圖

鼠標(biāo)變銷售的狀態(tài)： cursorc: pointer