整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          16.CSS中使用顏色

          16.CSS中使用顏色

          用顏色

          • 在計算機中,傳統的模型之一為RGB模型,所有顏色都是通過紅色、藍色、綠色三種顏色進行組合;我們通過數值去表示

          • 例如:
            • 紅色(255.0.0)、藍色(0.0.255)、綠色(0.255.0)
            • 白色(255.255.255)、黑色(0.0.0)
            • 洋紅色(255.0.255)、青色(0.255.255)、黃色(255.255.0)


          CSS中rgb的表示方法

          • CSS中,我們可以使用rgb方法或者十六進制方法去表示顏色
          • 例如
          • rgb(0,255,255)
            #表示青色

            rgb24417963
            #橙色

          • 除此之外,我們還可以設置透明度,稱之為alpha
          • 例如
          rgba(0,255,255,0.3)
          #看上去稍微淡一點的青色


          十六進制表示法

          • 我們將使用0-FF的比例來代表顏色,最常用

          例如

          #00ffff
          表示青色,FF和255都一樣,只是FF是用十六進制表示


          注:在寫VS代碼中,我們經常會使用顏色板去查找顏色且在實際生活中,我們經常會使用十六進制去表示顏色,但是如果我們需要使用到透明度,我們還是會使用rgba函數


          注意:在RGB模型中,三種顏色所占的比例一致時,就是灰色。所以灰色有很多種不同的灰色


          回到之前的代碼中

          • 我們將標題1設置一個顏色
          h1 {
          font-size: 26px;
          text-transform: uppercase;
          font-style: italic;
          color:#1098ad
          }
          

          • 但是我們需要列表都是一個顏色,用一個列表選擇器代替上面的寫法
          h1,
          h2,
          h3 {
          color: #1098ad;
          }


          • 除此之外,我們現在將所有的段落字體設置為好看的灰色
          h1,
          h2,
          h3,
          h4,
          p,
          li {
          font-family: sans-serif;
          color: #444;
          }
          h1,
          h2,
          h3 {
          color: #1098ad;
          }

          注意:h123的顏色還是#1098ad,CSS中如果一個元素多次被定義顏色,使用最后的那個;


          • 為了突出我們的頁眉部分,我們將頁眉部分添加好看的灰色底色
          ###HTML代碼
          <header class="main-header">
              <h1>代碼介紹</h1>
              <nav>
                <a href="./blog.html">BLOG</a>
                <a href="#">挑戰</a>
                <a href="#">彈性盒子</a>
                <a href="#">CSS</a>
              </nav>
            </header>
             
             
            ###CSS代碼
            .main-header {
          background-color: #f7f7f7;
          }
          


          • 除此之外,我們將下方的模塊添加一個好看的邊框

          ###HTML代碼
          <aside>
              <h4>相關文章</h4>
              <ul class="related">
                <li>
                  <img
                     src="img/related-1.jpg"
                     alt="related-1"
                     width="75px"
                     height="75px"
                  /><a href="#">如何去學習網頁開發</a>
                  <p class="related-author">作者:喬納斯·施梅德特曼</p>
                </li>
                <li>
                  <img
                     src="img/related-2.jpg"
                     alt="related-2"
                     width="75px"
                     height="75px"
                  />
                  <a href="#">CSS 的未知力量</a>
                  <p class="related-author">作者:吉姆.狄龍</p>
                </li>
                <li>
                  <img
                     src="img/related-3.jpg"
                     alt="related-3"
                     width="75px"
                     height="75px"
                  />
                  <a href="#">為什么 JavaScript 很棒</a>
                  <p class="related-author">作者:瑪蒂爾達</p>
                </li>
              </ul>
            </aside>
          
          ###CSS代碼
          aside {
           background-color: #f7f7f7;
           border: 5px solid #1098ad;
          }
          
          ###border: 邊框5px粗 實心 邊框顏色

          • 但是我們只希望頂部和底部有邊框,很簡單,如下

          reamweaver的CSS面板分類

          type(類型)

          background(背景)

          block(區塊)

          box(方框) 或盒子意思

          border(邊框)

          list(列表)

          positioning(定位)

          extensions(擴展)

          共八個部分

          1. type(類型)

          type面板主要是對文字的字體,大小,顏色,效果等基本樣式進行設置。

          注意:屬性名帶*號的是指樣式效果不能在編輯文檔時顯示,要用瀏覽器打開才能看到效果。

          (1)font-family:設置字體系列。什么叫字體系列呢?是指對文字設定幾個字體,當遇到第一個字體不能顯示的文字時會自動用系列中的第二個

          字體或后面的字體顯示。

          注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個系列比較好看。如果不用這些字體系列,你就需要自己編輯字體系列,

          也可以直接手動在下拉框里寫字體名,字體之間用逗號隔開。中文網頁默認字體是宋體, 一般就空著不要選取任何字體。

          默認值: not specified(取決于瀏覽器,系統默認的字體, 如: 微軟雅黑)


          注意:

          1.如果有漢字, 那么我們要加引號

          2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開

          3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

          為了避免在CSS中使用 font 或 font-family 設置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。

          /* 示例:使用Unicode字體編碼設置字體為"微軟雅黑" */
          font-family: "\5FAE\8F6F\96C5\9ED1";


          (2)font-size:定義文字的大小。你可以通過選取數字和度量單位來選擇具體的字體大小,或者你也可以選擇一個相對的字體大小。

          最好使用pixels作為單位,這樣不會在瀏覽器中文本變形。一般字體用比較標準的12px或14px, 默認值為16px。

          注意:CSS中長度的單位分絕對長度單位和相對長度單位:

          絕對長度單位有:

          pt:磅(point)

          mm、cn、in、pc:(毫米、厘米、英寸、活字)根據顯示的實際尺寸來確定長度。

          此類單位不隨顯示器的分辨率改變而改變。

          相對長度單位有:

          px:(像素)根據顯示器的分辨率來確定長度。

          em:當前文本的尺寸。例如:{font-size:2em}是指文字大小為原來的2倍。

          比如自身font-size: 30px; 那么此時1em=30px;

          ex:當前字母"x"的高度,一般為字體尺寸的一半。

          %:是以當前文本的百分比定義尺寸。例如:{ font-size:300%}是指文字大小為原來的3倍。

          small、large:表示比當前小一個級別或大一個級別的尺寸。

          默認值:medium(標準大小)


          (3)font-style:定義字體樣式為normal、italic、oblique。默認設置為normal。

          注意: italic 斜體 oblique 歪斜體 italic和oblique實際效果是一樣的。

          默認值:normal


          (4)line-height:設置文本所在行的行高。默認為normal。可以是行內元素、行內塊元素, 通常與height設置的高度值相同, 可以做到垂直居中的作用。

          你也可以自己鍵入一個精確的數值并選取一個計量單位。

          比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。

          最常用的方法: line-height:1.5em; /*行間距,相對數值,1.5倍行距,*/ 可有效的避免文字發生重疊

          默認值: normal


          (5)text-decoration:在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。

          這些效果可以同時存在,將效果前的復選框選定即可。

          注意:鏈接的默認設置是underline,我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

          默認值: none


          (6)font-weight:給字體指定粗體字的磅值。

          normal 默認值。定義標準的字符。

          bold 定義粗體字符。

          bolder 定義更粗的字符。

          lighter 定義更細的字符。

          100

          200

          300

          400

          500

          600

          700

          800

          900

          inherit 規定應該從父元素繼承字體的粗細。

          定義由粗到細的字符。400 等同于 normal, 而 700 等同于 bold。

          默認值: normal


          (7)font-variant:允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區域內所有字母大寫。

          normal表示正常的字體, 為默認值;

          默認值: normal


          (8)text-transform:將選區中每個單詞的第一個字母轉為大寫, 或者令單詞全部大寫或全部小寫。

          參數:capitalize(單詞首字母大寫)、uppercase(轉換成大寫)、lowercase(轉換成小寫)、none(不轉換)。

          默認值:none


          (9)color:定義文字顏色。包括對表單輸入的文字顏色。

          CSS中顏色的值有三種表示方法:

          #RRGGBB格式,是由紅綠藍三種顏色的值組合,每種顏色的值為"00 – FF"的兩位十六進制正整數。

          例如:#FF0000表示紅色,#FFFF00表示黃色。

          rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如:rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

          用顏色名稱。CSS可以使用已經定義好的顏色名稱。例如:red表示紅色, yellow表示黃色。

          顏色值的縮寫:

          p{color:#000000} 可以縮寫為:p{color:#000}

          p{color:#336699} 可以縮寫為:p{color:#369}

          默認值: not specified


          color: transparent; 透明色


          rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1)


          注意: 如果文字的顏色通過單獨的類選擇去設置沒有改變顏色, 則應該通過組合選擇器(.header .top .topR .blue)去設置, 改變它的優先級。




          2. background(背景)

          background面板主要是對元素的背景進行設置,包括背景顏色、背景圖象、背景圖象的控制。

          一般是對body(頁面)、table(表格)、div(區域)的設置。

          (1)background-color:設置元素的背景色。包括對input表單輸入框的背景顏色;

          默認值: transparent(背景顏色為透明)


          rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1) 一般用于背景色


          (2)background-image:設置元素的背景圖像。

          默認值:none

          CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了

          background-image:url(a.jpg),url(b.jpg);


          base64使用

          background-image: url("data:image/png;base64,iVBORw0KGgo=...");


          (3)background-repeat:確定背景圖像是否以及如何重復。

          repeat 默認值。背景圖像將在垂直方向和水平方向重復。

          repeat-x 背景圖像將在水平方向重復。

          repeat-y 背景圖像將在垂直方向重復。

          no-repeat 背景圖像將僅顯示一次。

          inherit 規定應該從父元素繼承background-repeat屬性的設置。

          注意:如果定義的元素的body,可以控制頁面背景是否重復。

          默認值: repeat


          (4)background-attachment:固定背景圖像或者跟隨內容滾動。

          參數fixed表示固定背景(不隨屏幕滾動而滾動,決定背景圖像是否要固定在原來的位置), scroll表示跟隨內容滾動的背景。

          注意:如果定義的元素的body, 可以使頁面背景固定。

          默認值: scroll


          (5)background-position(X):指定背景圖像的水平位置。

          可以指定為left(左邊), center(居中),right(右邊);

          也可以指定數值,如20px是指背景距離左邊20象素。

          background-position(Y):指定背景圖像的垂直位置。

          可以指定為top(頂部), center(居中), bottom(底部);也可以指定數值。

          background-position屬性值:

          left top

          center top

          right top

          left center

          center center

          right center

          left bottom

          center bottom

          right bottom

          如果您僅規定了一個關鍵詞,那么第二個值將是"center"。

          注意:采用英文單詞的水平位置和垂直位置的屬性值可以調換

          x% y% 第一個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值,另一個值將是 50%。

          xpos ypos 第一個值是水平位置,第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

          如果您僅規定了一個值,另一個值將是50%。

          您可以混合使用 % 和 position 值。

          默認值:0% 0%

          者 | 小胡

          責編 | 郭芮

          說到圖片處理,我們經常會想到PhotoShop這類的圖像處理工具。作為前端開發者,我們經常會需要處理一些特效,例如根據不同的狀態,讓圖標顯示不同的顏色。或者是hover的時候,對圖片的對比度,陰影進行處理。”

          不過你以為上面的圖片都是經過PS軟件處理出來的?不不不,純粹是用CSS寫出來的,很神奇吧。

          強大的 CSS:filter

          CSS濾鏡(filter)能夠提供模糊、銳化或元素變色等圖形特效,過濾器則通常用于調整圖片、背景和邊界的渲染。

          CSS標準里包含了一些已實現預定義效果的函數:

          filter: none 
           | blur() 
           | brightness() 
           | contrast() 
           | drop-shadow() 
           | grayscale() 
           | hue-rotate() 
           | invert() 
           | opacity() 
           | saturate() 
           | sepia() 
           | url();
          
          <!--html-->
          <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原圖">
          

          filter: none

          沒有任何效果,默認filter就為none。

          filter:blur( ) 高斯模糊

          給圖像一個高斯模糊效果,length值越大,圖像越模糊。我們來嘗試一下:

          img {
           filter:blur(2px);;
          }
          

          brightness(%) 線性乘法

          可以讓圖片看起來更亮或者更暗:

          img {
           filter:brightness(70%);
          }
          

          contrast(%) 對比度

          調整圖像的對比度:

          img {
           filter:contrast(50%);
          }
          

          設置陰影效果(h-shadow v-shadow blur spread color)

          陰影是合成在圖像下面、有模糊度的,可以以特定顏色畫出的遮罩圖的偏移版本。函數接受<shadow>(在CSS3背景中定義)類型的值,除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似,不同之處在于,通過濾鏡,一些瀏覽器為了更好的性能會提供硬件加速。

          利用這個方案,我們可以改變圖標的顏色,比如黑色圖標變成藍色圖標:

          img {
           filter: drop-shadow(705px 0 0 #ccc);
          }
          

          在這里,我們將圖片投影形成一個同等大小的灰色區域:

          hue-rotate(deg) 色相旋轉

          img {
           filter:hue-rotate(70deg);
          }
          

          看,我的小姐姐變成了阿凡達!

          invert(%) 反轉

          這個函數的作用是反轉輸入圖像,有點像曝光的效果:

          img {
           filter:invert(100%)
          }
          

          grayscale(%) 將圖像轉換為灰度圖像

          這個效果可以將圖片做舊,有一種時代滄桑感。喜歡古風的人一定會喜歡上這個效果的:

          img {
           filter:grayscale(80%);
          }
          

          除了古風還有一種用法是有的時候需要將全站變成灰色,如大屠殺紀念日的時候:

          可以這樣設置:

          *{
           filter: grayscale(100%);
           -webkit-filter: grayscale(100%);
           -moz-filter: grayscale(100%);
           -ms-filter: grayscale(100%);
           -o-filter: grayscale(100%);
          }
          

          sepia(%) 將圖像轉換為深褐色

          下面給我的小姐姐一個暖暖的色調:

          img {
           filter:sepia(50%)
          }
          

          大家是不是發現我并沒有把url()方法寫到這上面來?

          沒錯,因為我想把這個內容放到最后來說,filter:url()就是CSS濾鏡改變圖片的終極方法。CSS:filter可以導入一個svg濾鏡,作為它自己的濾鏡。

          終極變色解決方案! filter:url()

          為什么說filter:url()是圖片變色的終極解決方案?請容我慢慢道來。

          我們先科普一下PS的工作原理,我們都知道網頁是有三原色的R(紅) G(綠) B(藍),常見的RGBA還包括一個opicity值,而opcity值是根據alpha通道計算出來的。也就是說,我們見到的網頁的每一個像素點都是由紅藍綠再加alpha四個通道組成,每一個通道我們稱之為色板,PS中8位板的意思就是2的八次方256,意思就是每一個通道的取值范圍都是(0-255)。

          如果我們可以改變每個通道的值是不是就能完美的得到我們想要的任意顏色了呢?原理上,我們可以像PS那樣利用svg濾鏡得到任何我們想要的圖像,不僅僅是變色,我們甚至可以憑空生成一幅圖像。

          svg feColorMatrix大法好

          <svg height="0" xmlns="http://www.w3.org/2000/svg">
           <defs>
           <filter id="change">
           <feColorMatrix type="matrix" values="
           0 0 0 0 0.55
           0 0 0 0 0.23 
           0 0 0 0 0 
           0 0 0 0 1" />
           </filter>
           </defs>
          </svg>
          <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
          
          img {
           filter:url(#change);
          }
          

          通過單通道我們可以將圖片變成單一的顏色:

          <svg height="0" xmlns="http://www.w3.org/2000/svg">
           <defs>
           <filter id="change">
           <feColorMatrix values="3 -1 -1 0 0
           -1 3 -1 0 0
           -1 -1 3 0 0
           0 0 0 1 0" />
           </filter>
           </defs>
          </svg>
          

          通過雙通道我們可到一些非常炫酷的PS效果:

          當然,在這里只是舉個例子,通過配置矩陣中的值,我們可以配置每一個像素點的值按照我們定義的規則顯示。

          我們在這里詳細講一下feColorMatrix 矩陣的計算方式:

          其中Rin Gin Bin a(alpha) 為原始圖片中每個像素點的rgba值,通過矩陣計算,得到的Rout Gout Bout Aout就是最終顯示出來的rgba值。

          將圖片轉為單色,以棕色rgba(140,59,0,1)為例

          根據上面的公式,我們可以簡化一些計算,同一行中,只設置一個通道的值,其他通道為0。不難得出矩陣:

          0 0 0 0 目標值R
          0 0 0 0 目標值G
          0 0 0 0 目標值B
          0 0 0 0 1
          

          根據規則,只需要計算,255/想要顯示的顏色對應通道=目標值,我們想要的棕色rgba(140,59,0,1) 換算成色板 rgba 為 140 59 0 255,可以算出目標值0 0 0 0 0.55。

          0 0 0 0 0.55
          0 0 0 0 0.23
          0 0 0 0 0 
          0 0 0 0 1
          

          多通道設置出來的炫酷效果

          就如同之前我們看到的雙通道形成的炫酷圖片一般。

          要把圖片的飽和度提高,首先當然是想想飽和度的成因,就是紅的越紅,藍的越藍,綠的越綠。由這個成因出發,我們的矩陣就可以寫成下面的樣子,看到矩陣當中出現了3 和-1,一定會很那悶這是怎么來的,原理其實很容易理解,讓我們假設某一個像素的RGB 分別是(200/255),(100/255),(50/255),呈現的應該是有點暗沉的橘色,經過矩陣的換算:

          R 變成了200/255x3-100/255-50/255=1.76;

          G 變成200/255x(-1)+100/255*3-50/ 255=0.2;

          B 變成200x(-1)+100x(-1)+50x3=-0.59。

          因此RGB轉換后就是:200x1.76,100x0.2,50x-0.5。

          <svg height="0" xmlns="http://www.w3.org/2000/svg">
           <defs>
           <filter id="change">
           <feColorMatrix values="3 -1 -1 0 0
           -1 3 -1 0 0
           -1 -1 3 0 0
           0 0 0 1 0" />
           </filter>
           </defs>
          </svg>
          

          其他方案

          除了feColorMatrix svg濾鏡還有很多的方法可以定義濾鏡,它們同樣可以作用到圖片上。由于篇幅限制,這里就不詳細展開了。

          總結

          CSS3提供了filter這個屬性,使得通過前端技術實現更多炫酷的特效成為了可能;依賴于svg的濾鏡,我們可以實現復雜的濾鏡效果。

          但是要注意:

          • CSS:filter與IE上的filter并不是相同的概念;
          • CSS:filter在不同的瀏覽器上兼容性不一樣,在使用的時候需要注意瀏覽器的兼容。

          文章難免會有疏漏,歡迎大家指正批評。

          作者:小胡,曉教育前端,開源愛好者。

          聲明:本文為作者投稿,版權歸其個人所有。


          主站蜘蛛池模板: 视频一区在线播放| 国产一区二区草草影院| 日韩综合无码一区二区| 精品视频无码一区二区三区| 亚洲国产高清在线一区二区三区 | 久久精品国产一区| 精品一区二区三区电影| 精品无码国产AV一区二区三区 | 国产精品揄拍一区二区久久| 亚洲人成网站18禁止一区 | 日韩免费一区二区三区| 国产av天堂一区二区三区| 午夜视频久久久久一区 | 亚洲中文字幕久久久一区| 日本亚洲成高清一区二区三区| 国产乱码伦精品一区二区三区麻豆| 日本一区二区三区在线看 | 无码人妻久久久一区二区三区 | 亚洲一区二区中文| 奇米精品一区二区三区在| 国产福利电影一区二区三区久久老子无码午夜伦不 | 成人免费av一区二区三区| 色一情一乱一伦一区二区三区日本| 国产在线一区视频| 日本一区午夜爱爱| 久久99精品免费一区二区| 国产一区二区视频在线观看| 香蕉视频一区二区| 久久久久一区二区三区| 蜜桃臀无码内射一区二区三区| 精品性影院一区二区三区内射| 无码少妇一区二区性色AV | 日韩精品一区二区三区在线观看| 国产a久久精品一区二区三区| 无码人妻一区二区三区在线水卜樱| 亚洲AV成人精品日韩一区18p| 国产在线观看一区精品| 人妻无码一区二区三区AV| 精品欧洲av无码一区二区| 无码aⅴ精品一区二区三区| 亚洲高清偷拍一区二区三区|