CSS學習

2024-04-27 15:06:13

字體：大中小

來源：轉載

供稿：網友

一、CSS是什么

CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表。屬性和屬性值用冒號隔開，以分號結尾。

二、CSS四種引入方式

1.行內式

行內式是在標簽的style屬性中設定CSS樣式

2.嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head>標簽的 <style></style> 標簽對中

<head> <style type="text/css"> ...在此處寫CSS樣式 </style> </head>

3.導入式

將一個獨立的.css文件引入HTML文件中，導入式使用@import 引入外部CSS文件，<style>標記也是寫在 <head> 標記中。導入式會在整個網頁裝載完后再裝載CSS文件

<head> ... <style type="text/css"> @import "My.css"; 此處注意.css文件的路徑 </style></head>

4.鏈接式

將一個獨立的.css文件引入到HTML文件中，使用 <link> 標記寫在 <head> 標記中。鏈接式會以網頁文件主體裝載前裝載CSS文件。

樣式應用順序：

1、行內樣式優先級最高2、針對相同的樣式屬性，不同的樣式屬性將以合并的方式呈現3、相同的樣式并且相同屬性，呈現方式在 head 標簽中的順序決定，后面會覆蓋前面屬性。4、行內樣式>內部樣式>外部樣式>瀏覽器默認樣式

這里寫圖片描述

三、選擇器：

基本選擇器：

1.通用元素選擇器

* 表示應用到所有標簽*{color:yellow};

2.標簽選擇器

匹配所有使用div標簽的元素（可以匹配所有標簽）div{color:yellow};

3.類選擇器

匹配所有class屬性中包含info的元素語法：類名{樣式}(類名不能以數字開頭，類名要區分大小寫).Mycolor{color:yellow}<h3 class="Mycolor">nick</h3>

4.ID選擇器

使用id屬性來調用樣式，在一個網頁中id的值都是唯一的（是W3C規范而不是規則，所有不會報錯）語法：#id名{樣式}（ID名不能以數字開頭）#Mycolor{color:yellow}<h3 id="Mycolor">nick</h3>

組合選擇器:

1.多元素選擇器

同時匹配h3,h4標簽，之間用逗號分隔h3,h4{color:yellow}<h3>Nick</h3><h4>Jenny</h4>

2.后代元素選擇器

匹配所有div標簽里嵌套的P標簽，之間用空格分隔(沒有包含的層數限制，子子孫孫)div p {color:yellow};<p>nick</p> <div> <p> nick </p> </div>

3.子元素選擇器

匹配所有div標簽里嵌套的P標簽，之間用 > 分隔(只能是子元素，孫元素不算)div > p {color:yellow}<div> <h4><p>div>p</p></h4> <p>div>p</p></div>

4.毗鄰元素選擇器

匹配所有緊隨div標簽之后的同級標簽P，之間用+分隔（只能匹配一個,是之后，之前的沒有效果）div + p {color:yellow};<div>Nick<div><p>nick</p

屬性選擇器：

1.[title]/P[title]設置所有具有title屬性的標簽元素設置所有具有title屬性的P標簽元素[title]{ color:yellow;}p[title]{ color:yellow;}<div title>nick</div><p title>nick</p>2.[title=Nick]設置所有title屬性等于”Nick”的標簽元素[title="Nick"]{ color:yellow;}<p title="Nick">Nick</p>3.[title~=Nick]設置所有title屬性具有多個空格分隔的值、其中一個值等于”Nick”的標簽元素 [title~="Nick"] { color: yellow; }<p title="Nick Jenny">Nick</p><p title="Jenny Nick">Nick</p>4.[title |= Nick]設置所有title屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以”Nick”開頭的標簽元素。例：lang屬性：”en”、”en-us”、”en-gb”等等[title|="Nick"] { color: yellow; }<p title="Nick-Jenny">Nick</p>5.[title^=Nick]設置屬性值以指定值開頭的每個標簽元素[title^="Nick"] { color: yellow; }<p title="NickJenny">Nick</p>6.[title $= Nick]設置屬性值以指定值結尾的每個標簽元素[title$="Nick"] { color: yellow; }<p title="JennyNick">Nick</p>7.[title *= Nick]設置屬性值中包含指定值的每個元素[title*="Nick"] { color: yellow; }<p title="SNickJenny">Nick</p>

偽類選擇器

1.link、hover、active、visited

a:link(未訪問的鏈接狀態)：用于定義常規的鏈接狀態a:hover(鼠標放在鏈接上的狀態)：用于產生視覺效果a:active(在鏈接上按下鼠標時的狀態)。a:visited(已訪問過的鏈接狀態)，可以看出已經訪問過的鏈接a:link{color:black}a:hover{color:yellow}a:active{color:blue}a:visited{color:red}<a href="#">Nick</a>

2.before、after

p:before在每個P元素的內容之前插入內容p:after在每個P元素的內容之后插入內容p{ color:yellow;}p:before{ content:"before.....";}p:after{ content:"after....";}<p>Nick</p>

四、屬性

1.顏色屬性

color

HEX(十六進制色：color:#FFFF00–>縮寫：#FF0)RGB(紅綠色，使用方式:color:rgb(255,255,0)或者color:rgb(100%,100%,0))RGBA（紅綠藍透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）HSL（CSS3有效,H表示色調，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）HSLA（和HSL相似，A表示Alpha透明度，取值0~1之間。）

transparent

全透明，使用方式：color: transparent;

opacity

元素的透明度，語法：opacity:0.5 屬性值在0.0到1.0范圍內，0表示透明，1,表示不透明。 filter濾鏡屬性（只適用于早起的IE瀏覽器，語法：filter:alpha(opacity:20);）

2.字體屬性

font-style:用于規定斜體文本normal 文本正常顯示italic 文本斜體顯示oblique 文本傾斜顯示font-weight:設置文本的粗細normal(默認)bold(加粗)bolder(相當于`` 和`` 標簽)lighter(常規)100~900 整百(400=normal,700=bold)font-size:設置字體的大小默認值：medium``可選參數值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large``相對于父標簽中字體的尺寸進行調節。可選參數值：smaller、 larger``百分比指定文字大小。``用長度值指定文字大小，不允許負值。font-family:字體名稱使用逗號隔開多種字體（優先級從前向后，如果系統中沒有找到當前字體，則往后面尋找）font:簡寫屬性語法:font:字體大小/行高字體;(字體要在最后)

3.文本屬性

white-space:設置元素中空白的處理方式 normal:默認處理方式 PRe:保留空格，當文字超出邊界時不換行 nowrap:不保留空格，強制在同一行內顯示所有文本，直到文本結束或者碰到br標簽 pre-wrap:保留空格，當文字碰到邊界時換行 pre-line:不保留空格，保留文字的換行，當文字碰到邊界時換行。direction:規定文本的方向 ltr默認，文本方向從左到右 rtl 文本方向從右向左text-align:文本的水平對齊方式 left center rightline-height:文本行高 normal 默認 vertical-align:文本所在行高的垂直對齊方式 baseline 默認 sub 垂直對齊文本的下標，和`_{`標簽一樣的效果} super 垂直對齊文本的上標，和`^{`標簽一樣的效果} top 對象的頂端與所在容器的頂端對齊 text-top 對象的頂端與所在行文字頂端對齊 middle 元素對象基于基線垂直對齊 bottom 對象的底端與所在行的文字底部對齊 text-bottom 對象的底端與所在行文字的底端對齊text-index: 文本縮進 letter-spacing: 添加字母之間的空白 Word-spacing: 添加每個單詞之間的空白text-transform: 屬性控制文本的大小寫 capitalize 文本中的每個單詞以大寫字母開頭。 uppercase 定義僅有大寫字母。 lowercase 定義僅有小寫字母。text-overflow:文本溢出樣式 clip 修剪文本 elipsis 顯示省略符號…來代表被修剪的文本 string 使用給定的字符串來代表被修剪的文本

代碼示例：

4.背景屬性

background-color: 背景顏色background-image: 設置圖像為背景url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 圖片地址background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果background-position 設置背景圖像的位置坐標background-position: center center; 圖片置中，x軸center，y軸center1px -195px 截取圖片某部分，分別代表坐標x，y軸background-repeat 設置背景圖像不重復平鋪 no-repeat 設置圖像不重復，常用 round 自動縮放直到適應并填充整個容器 space 以相同的間距平鋪且填充滿整個容器background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動background 簡寫background: url("o_ns.png") no-repeat 0 -196px;background: url("o_ns.png") no-repeat center bottom 15px;background: url("o_ns.png") no-repeat left 30px bottom 15px;

5.列表屬性

list-style-type: 列表項標志的類型 none 去除標志 decimal-leading-zero; 01. 02. 03. …….square; 方框circle; 空心圓upper-alph; & disc; 實心圓

list-style-image; 將圖像設置為列表項標志list-style-position: 列表項標志的位置 inside outsidelist-style: 縮寫

五、布局

1.邊框

border-style: 邊框樣式

solid 默認，實線double 雙線dotted 點狀線條dashed 虛線

border-color: 邊框顏色

border-width: 邊框寬度

border-radius: 圓角

一個參數：四個角都應用二個參數：第一個參數應用于左上、右下，第二個參數應用于左下、右上三個參數：第一個參數應用于左上，第二個參數應用于左下、右上，第三個參數應用于右下四個參數：左上、右上、右下、左下（順時針）

border: 簡寫

border: 2px yellow solid;

box-shadow: 邊框陰影

第一個參數是左右位置第二個參數是上下位置第三個參數是虛化效果第四個參數顏色box-shadow: 10px 10px 5px #888

代碼示例：

這里寫圖片描述

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="UTF-8"> <title>Title</title> <style> .radius1 { display: inline-block; width: 100px; height: 100px; background-color: yellow; border-radius: 20px; } .radius2 { display: inline-block; width: 100px; height: 100px; background-color: red; border-radius: 20px 35px; } .radius3 { display: inline-block; width: 100px; height: 100px; background-color: blue; border-radius: 20px 35px 50px; } .radius4 { display: inline-block; width: 100px; height: 100px; background-color: green; border-radius: 20px 35px 50px 60px; } </style></head><body> <div> <span class="radius1"></span> <span class="radius2"></span> <span class="radius3"></span> <span class="radius4"></span> </div></body></html>

這里寫圖片描述

邊框實現各種三角符號

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>邊框實現各種三角符號</title><style type="text/css"> .triangle-one { display: inline-block; border-top: 50px red solid; border-right: 50px green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-two { display: inline-block; border-top: 0 red solid; border-right: 50px green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-stree { display: inline-block; border-top: 50px red solid; border-right: 0 green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-four { display: inline-block; border-top: 50px red solid; border-right: 0 green solid; border-bottom: 0 yellow solid; border-left: 50px blue solid; } .triangle-five { display: inline-block; border: 50px transparent solid; border-top: 50px red solid; } .triangle-six { display: inline-block; border: 50px transparent solid; border-bottom: 50px yellow solid; } .triangle-seven { display: inline-block; border: 50px transparent solid; border-top: 60px red solid; border-right: 0; } .triangle-eight { display: inline-block; border: 50px transparent solid; border-left: 30px yellow solid; border-bottom: 0; } </style></head><body> <div class="triangle-one"></div> <div class="triangle-two"></div> <div class="triangle-stree"></div> <div class="triangle-four"></div> <div class="triangle-five"></div> <div class="triangle-six"></div> <div class="triangle-seven"></div> <div class="triangle-eight"></div></body></html>

這里寫圖片描述

盒子模型：

一個標準的盒子模型

padding: 用于控制內容與邊框之間的距離margin: 用于控制元素與元素之間的距離padding、margin 表示上右下左都應用padding-top、margin-top 上padding-right、margin-right 右padding-bottom、margin-bottom 下padding-left、margin-left 左一個參數，應用于四邊兩個參數，第一個用于上、下，第二個用于左、右三個參數，第一個用上，第二個用于左、右，第二個用于下

瀏覽器窗口最外層邊框縫隙

邊框在默認情況下會定位于瀏覽器窗口的左上交，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本省也是一個盒子，外層還有html，在默認情況下，body距離html會有若干個像素的margin，所以body中的盒子不會緊貼瀏覽器窗口的邊框了。解決方法：body{ margin: 0;}

display

none 不顯示block 顯示為塊級元素inline 顯示為內聯元素inline-block 行內塊元素（會保持元素的高寬）list-item 顯示為列表元素

visibility

visible 元素可見hidden 元素不可見collapse 當在表格元素中使用時，此值可刪除一行或一列，不會影響表格的布局

float 浮動

讓一行顯示兩個塊級標簽，會脫離文檔流none left 左浮動right 右浮動clear 清除浮動none 默認值。允許兩邊都可以有浮動對象left 不允許左邊有浮動對象right 不允許右邊有浮動對象both 不允許兩邊有浮動對象

clip 剪裁圖像

rect 剪裁定位元素

auto 默認值，無剪切上-右-下-左（順時針）的順序提供四個偏移值區域外的部分是透明的必須指定position: absolute；例: clip:rect(0px,60px,200px,0px);

overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容

visible 默認值，內容不會被修剪，會呈現在元素框之外hidden 內容會被修剪，并且其余內容是不可見的scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容

position 規定元素的定位類型

static 默認值，沒有定位，遵從正常的文檔流relative 相對定位元素，相對于其正常位置進行定位，遵從正常的文檔流absolute 絕對定位元素，脫離正常文檔流fixed 絕對定位元素，固定在瀏覽器某處通過以下四種屬性進行定位lefttoprightbottomz-index

z-index 元素層疊順序z-index 僅在定位元素上有效（例：position: absolute;）可以指定負數屬性值(例：-1)

這里寫圖片描述

outline 邊框輪廓

outline-width 輪廓寬度outline-color 輪廓顏色outline-style 輪廓樣式

zoom 縮放比例

這里寫圖片描述

cursor 鼠標的類型形狀

(鼠標放在以下單詞下，There will be a miracle) url: 自定義光標

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <style> body { cursor: url("mouse.png"), auto; /*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/ } </style></head><body> <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div></body></html>auto 默認default 默認e-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizeCrosshairPointerMovetextwaithelpnot-allowed

transform、transition 動畫效果

transform 轉換，變形origin定義旋轉基點(left top center right bottom坐標值) transform-origin: 50px 50px; transform-origin: left;rotate 旋轉 transform:rotate(50deg)旋轉角度可以為負數，需要定義origin。skew 扭曲 transform: skew(50deg,50deg)分別為相對x軸傾斜，相對y軸傾斜scale 縮放 transform:scale(2,3) 橫向放大2倍，縱向放大3倍; transform: scale(2)橫豎都放大2倍translate 移動 transform: translate(50px,50px)分別為相對x軸移動，相對y軸移動<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">div { border: 1px solid black; height: 30px; width: 30px; background-color: yellow; /*transform-origin: 50px 50px;*/ transform-origin: left; transform: rotate(50deg); /*transform: skew(50deg,50deg);*/ /*transform: translate(50px,50px);*/ /*transform: scale(2);*/}</style></head><body> <div></div></body></html>

Transition 平滑過渡

transition-property: 變換的屬性（none(沒有屬性改變)、all(所有屬性改變)、具體屬性）transition-duration: 變換持續時間transition-timing-function: 變換的速率(ease:(逐漸變慢)、linear(勻速)、ease-in(加速)、ease-out(減速)、ease-in-out:(加速然后減速)、cubic-bezier(自定義時間曲線))transition-delay: 變換延遲時間transition: 縮寫

property 指定屬性對應類型

#property 指定屬性對應類型1、color：通過紅、綠、藍和透明組件變換（每個數值單獨吹），如：background-color，border-color，color，outline-color等CSS屬性；2、length：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；3、percentage：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；4、integer 離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換為整數時發生，如：outline-offset，z-index等屬性；5、number真實的（浮點型）數值，如：zoom，opacity，font-weight等屬性；6、transform list。7、rectangle：通過x、 y、 width和height（轉為數值）變換，如：crop；8、visibility：離散步驟，在0到1數字范圍之內，0表示“隱藏”，1表示完全“顯示”,如：visibility；9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；10、gradient：通過每次停止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數值以便執行動畫，如：background-image；11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；12、space-separated list of above：如果列表有相同的項目數值，則列表每一項按照上面的規則進行變化，否則無變化；13、a shorthand property：如果縮寫的所有部分都可以實現動畫，則會像所有單個屬性變化一樣變化。

transition 支持的屬性

#支持執行transition效果的屬性Property Name Typebackground-color as colorbackground-position as repeatable list of simple list of length, percentage, or calcborder-bottom-color as colorborder-bottom-width as lengthborder-left-color as colorborder-left-width as lengthborder-right-color as colorborder-right-width as lengthborder-spacing as simple list of lengthborder-top-color as colorborder-top-width as lengthbottom as length, percentage, or calcclip as rectanglecolor as colorfont-size as lengthfont-weight as font weightheight as length, percentage, or calcleft as length, percentage, or calcletter-spacing as lengthline-height as either number or lengthmargin-bottom as lengthmargin-left as lengthmargin-right as lengthmargin-top as lengthmax-height as length, percentage, or calcmax-width as length, percentage, or calcmin-height as length, percentage, or calcmin-width as length, percentage, or calcopacity as numberoutline-color as coloroutline-width as lengthpadding-bottom as lengthpadding-left as lengthpadding-right as lengthpadding-top as lengthright as length, percentage, or calctext-indent as length, percentage, or calctext-shadow as shadow listtop as length, percentage, or calcvertical-align as lengthvisibility as visibilitywidth as length, percentage, or calcword-spacing as lengthz-index as integertransition 支持的屬性