資訊專(zhuān)欄INFORMATION COLUMN
摘要：宋體注意使用某種特定的字體系列宋體完全取決于用戶(hù)機(jī)器上該字體系列是否可用這個(gè)屬性沒(méi)有指示任何字體下載。但是記住，最終選擇上的是最后的那個(gè)后代元素。
層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
在head標(biāo)簽里面，寫(xiě)入一下標(biāo)簽：
<html> <head> <style type="text/css"> css代碼 style> head> <body>body> html>
CSS 代碼規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
選擇器{屬性:屬性值;屬性:屬性值;···},我們稱(chēng)這種形式叫做鍵(key)值(value)對(duì)形式。
| /*css注釋內(nèi)容*/ |
|
文本屬性 |
文本屬性值 |
意義 |
|
color |
英文,16進(jìn)制,rgb |
文本顏色 |
|
text-align |
left,center,right |
對(duì)齊元素中的文本 |
|
text-indent |
px,em |
縮進(jìn)元素中文本的首行 |
|
line-height |
px |
設(shè)置行高 |
|
font-size |
px |
字體大小 |
|
font-weight |
100-900,bold,normal,lighter |
文本的粗細(xì) |
|
font-style |
normal,italic,oblique,inherit |
字體的風(fēng)格。 |
|
font-family |
字體 |
字體 |
color 屬性規(guī)定文本的顏色。
①英文字母：red,green,blue,yellow,orange,pink,gray···
②16進(jìn)制：
③rgb：r-red,g-green,b-blue
16進(jìn)制和rgb我們不需要記憶會(huì)通過(guò)ps或者識(shí)色工具取色就可以了。
text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。
實(shí)現(xiàn)text-align屬性特效元素必須具備寬度。
最后一個(gè)水平對(duì)齊屬性是 justify，它會(huì)帶來(lái)自己的一些問(wèn)題。慎重使用。
font-weight 屬性設(shè)置文本的粗細(xì)。
c盤(pán)->windows->fonts文件夾
font-family 規(guī)定元素的字體系列。
font-family 可以把多個(gè)字體名稱(chēng)作為一個(gè)“回退”系統(tǒng)來(lái)保存。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。也就是說(shuō)，font-family 屬性的值是用于某個(gè)元素的字體族名稱(chēng)或/及類(lèi)族名稱(chēng)的一個(gè)優(yōu)先表。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值。
有兩種類(lèi)型的字體系列名稱(chēng)：
指定的系列名稱(chēng)：具體字體的名稱(chēng)，比如："times"、"courier"、"arial"。
通常字體系列名稱(chēng)：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗號(hào)分割每個(gè)值，并始終提供一個(gè)類(lèi)族名稱(chēng)作為最后的選擇。
注意：使用某種特定的字體系列（Geneva）完全取決于用戶(hù)機(jī)器上該字體系列是否可用；這個(gè)屬性沒(méi)有指示任何字體下載。因此，強(qiáng)烈推薦使用一個(gè)通用字體系列名作為后路。
可以按順序設(shè)置如下屬性：
font-style （使用斜體、傾斜或正常字體）
font-variant （設(shè)置小型大寫(xiě)字母的字體顯示文本）
font-weight （設(shè)置文本的粗細(xì)）
font-size/line-height （設(shè)置字體的尺寸和行高）
font-family （規(guī)定元素的字體系列）
可以不設(shè)置其中的某個(gè)值，比如 font:100% verdana; 也是允許的。未設(shè)置的屬性會(huì)使用其默認(rèn)值。
如：
body{ font: italic small-caps bold 14px/24px "microsoft yahei";}
字體：斜體 小型大寫(xiě)字母 粗體 14號(hào)大小/24像素行高 微軟雅黑
可以不需要每個(gè)都寫(xiě)，但是順序還是要的
標(biāo)簽 元素 標(biāo)記都是一回事。
|
|
塊元素 |
行內(nèi)元素 |
行內(nèi)塊元素 |
|
標(biāo)簽 |
div h1-h6 ul ol p |
span a b i |
img |
|
特性 |
①多帶帶占用一整行 |
①不多帶帶占用一整行 |
①不占用一整行 |
|
默認(rèn)寬度100% ②可以設(shè)置寬高 |
②不可以設(shè)置寬高 |
②可以設(shè)置寬高 |
使用以下CSS屬性可以將任意的標(biāo)簽元素（塊級(jí)、行內(nèi)、行內(nèi)塊）轉(zhuǎn)換為任何的顯示模式。
|
display:block; 轉(zhuǎn)換為塊級(jí)元素 display:inline; 轉(zhuǎn)換為行內(nèi)元素 display:inline-block; 轉(zhuǎn)換為行內(nèi)塊元素 |
隱藏顯示元素
|
display:none;->display:block/inline/inlin-block; |
|
visibility: hidden;->visible |
二者區(qū)別：
1.display:none是徹底消失，不在文檔流中占位，瀏覽器也不會(huì)解析該元素；visibility:hidden是視覺(jué)上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會(huì)解析該元素；
2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時(shí)visibility，頁(yè)面產(chǎn)生回流（當(dāng)頁(yè)面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁(yè)面重新構(gòu)建，此時(shí)就是回流。所有頁(yè)面第一次加載時(shí)需要產(chǎn)生一次回流），而visibility切換是否顯示時(shí)則不會(huì)引起回流。(后面我們闡述)
標(biāo)簽選擇器是標(biāo)簽名稱(chēng)命名的，讓頁(yè)面中所有的指定標(biāo)簽都具備一個(gè)樣式，不管有多少個(gè)，不管嵌套多深，一定會(huì)被選中。
|
標(biāo)簽名{屬性名:屬性值;} h2{color:red;} |
<div> 文字1 <div> 文字2 <div> 文字3 <div> 文字4 <h2>h2標(biāo)簽h2> div> div> div> div>
因?yàn)闃?biāo)簽選擇器會(huì)選中所有的標(biāo)簽，實(shí)際工作中，不會(huì)多帶帶用標(biāo)簽選擇器，因?yàn)闀?huì)影響其他同名的標(biāo)簽。
使用方法：
|
1、用“.”來(lái)定義類(lèi)選擇器 2、在需要調(diào)用的標(biāo)簽上添加class屬性即可（class="類(lèi)選擇器名稱(chēng)"） |
示例：
|
定義：.box{color:red;} 調(diào)用： |
一個(gè)標(biāo)簽可以添加多個(gè)類(lèi)選擇器，用空格隔開(kāi)。
正確寫(xiě)法：
用原子類(lèi)最方便的，所謂的原子類(lèi)，就是一些簡(jiǎn)單的屬性做成一個(gè)類(lèi)，然后執(zhí)行選擇所需的樣式即可。
各取所需：
|
|
類(lèi)選擇器是工作中最常用的，原因：
|
1、頁(yè)面上可以有無(wú)數(shù)個(gè)標(biāo)簽，用一樣的類(lèi)樣式 2、一個(gè)標(biāo)簽可以同時(shí)使用多個(gè)類(lèi)樣式 |
要求以“#”開(kāi)頭，后面緊跟id選擇器的名字，名稱(chēng)自定義，要遵循命名規(guī)范
|
#id名稱(chēng){color:red;} |
實(shí)例：
|
定義：#box{} 調(diào)用： |
id選擇器好比人的身份證，同一個(gè)id名，只能使用一次，不能重復(fù)。
實(shí)際工作中寫(xiě)CSS，id選擇器是個(gè)不太常用的選擇器，因?yàn)椋?/span>
|
1、id太珍貴，一次只能給一個(gè)元素添加樣式 2、寫(xiě)樣式的時(shí)候，大部分可以用類(lèi)選擇器，極少用id，而且id選擇器權(quán)重太高 3、JavaScript通過(guò)id來(lái)獲取元素 |
總結(jié)：id選擇器其實(shí)是留給JS用的。
“*”指的是所有。
作用：選中網(wǎng)頁(yè)所有的標(biāo)簽。
經(jīng)驗(yàn)：由于通配符選擇器可以選中所有標(biāo)簽，權(quán)重最低，工作中不使用，一般用來(lái)做測(cè)試，寫(xiě)demo。
|
*{color:red;} 代表當(dāng)前網(wǎng)頁(yè)中所有標(biāo)簽都變紅 |
權(quán)重： id選擇器>class選擇器>標(biāo)簽選擇器>通配符選擇器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
color:red;
}
h1{
color: green;
}
#h1{
color: orange;
}
.h1{
color: blue;
}
/*
id選擇器>class選擇器>標(biāo)簽選擇器>通配符選擇器
*/
style>
head>
<body>
<h1 id="h1" class="h1">基本選擇器的優(yōu)先級(jí)關(guān)系h1>
body>
html>
描述：前面學(xué)習(xí)的都是基礎(chǔ)選擇器，復(fù)合選擇器就是將基礎(chǔ)選擇器綜合在一起使用。
作用：將頁(yè)面中相同樣式放到一起寫(xiě)CSS屬性，集體聲明樣式，簡(jiǎn)化代碼。
逗號(hào)“，”表示合并關(guān)系
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Documenttitle> <style type="text/css"> h1,h2,h3,.box,p,span,li{ color:red; font-size:30px; } style> head> <body> <h1>文字1h1> <h2>文字2h2> <h3>文字3h3> <div class="box">div標(biāo)簽div> <p>p標(biāo)簽p> <span>span標(biāo)簽span> <ul> <li>1li> <li>2li> <li>3li> <li>4li> ul> body> html>
有些教材稱(chēng)為“指定選擇器”
即滿(mǎn)足條件1，也要滿(mǎn)足條件2
兩種或以上選擇器同時(shí)存在一個(gè)標(biāo)簽上。
寫(xiě)法：選擇器之間直接連接，沒(méi)有任何符號(hào)
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Documenttitle> <style type="text/css"> p.red{color:red;} #box.box{ color:blue; } style> head> <body> <p class="red">p1p> <p class="red">p2p> <p>p3p> <div class="red">div1div> <div class="box" id="box">div2div> <div class="box">div3div> <div class="box" id="box">div4div> body> html>
交集選擇器使用的是基礎(chǔ)選擇器，可以是都是類(lèi)選擇器，也可以是標(biāo)簽和類(lèi)混寫(xiě)，也可以是id。
有些教材稱(chēng)為“包含選擇器”，“派生選擇器”
描述：后代選擇器用來(lái)選擇元素的后代，用“空格”隔開(kāi)。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，就存在后代關(guān)系。
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Documenttitle> <style type="text/css"> div p{color:red;} .box1 p{color:blue;font-weight:bold;} .bigBox ul li a{color:red;} .father .son{color:red;} style> head> <body> <p>外面的p標(biāo)簽p> <div class="box1"> <p>p1p> <p>p2p> <p>p3p> div> <div class="box2"> <p>p1p> <p>p2p> <p>p3p> div> <div class="bigBox"> <ul> <li><a href="##">li01a>li> <li><a href="##">li02a>li> <li><a href="##">li03a>li> <li><a href="##">li04a>li> ul> div> <div class="father"> <a href="##" class="son">文字1a> div> <div class="father"> <a href="##">文字2a> div> body> html>
注意：后代選擇器，選擇的是后代的元素，不一定是兒子，還是孫子、曾孫子、重孫子...都行。但是記住，最終選擇上的是最后的那個(gè)后代元素。
內(nèi)嵌式優(yōu)點(diǎn)：加載速度快，因?yàn)椴挥迷俣嘁粋€(gè)HTTP請(qǐng)求，結(jié)構(gòu)和樣式半分離。
將CSS嵌入到HTML頁(yè)面head標(biāo)簽對(duì)中：
|
|
寫(xiě)法：在標(biāo)簽身上添加style屬性
|
div1
|
注意：行內(nèi)式?jīng)]有實(shí)現(xiàn)結(jié)構(gòu)和樣式分離，不推薦使用，一般后臺(tái)程序員比較習(xí)慣使用這種方式。
1、新建一個(gè).css擴(kuò)展名的文件，直接在文件內(nèi)部寫(xiě)CSS（注意：不要寫(xiě)上
導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁(yè)裝載完后再裝載CSS文件，因此這就導(dǎo)致了一個(gè)問(wèn)題，如果網(wǎng)頁(yè)比較大則會(huì)兒出現(xiàn)先顯示無(wú)樣式的頁(yè)面，閃爍一下之后，再出現(xiàn)網(wǎng)頁(yè)的樣式。這是導(dǎo)入式固有的一個(gè)缺陷。
font-style 屬性可定義字體的風(fēng)格。該屬性設(shè)置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個(gè)多帶帶的字體。
p{ font-style: normal; font-style: italic; font-style: oblique; }
font-weight 屬性設(shè)置文本的粗細(xì)。該屬性用于設(shè)置顯示元素的文本中所用的字體加粗。數(shù)字值 400 相當(dāng)于 關(guān)鍵字 normal，700 等價(jià)于 bold。
p{ font-weight: 100;/*lighter*/ font-weight: 400;/*normal*/ font-weight: 700;/*bold*/ }
font-size 屬性可設(shè)置字體的尺寸。該屬性設(shè)置元素的字體大小。注意，實(shí)際上它設(shè)置的是字體中字符框的高度；實(shí)際的字符字形可能比這些框高或矮（通常會(huì)矮）。
我們通常使用如下代碼：
|
p{ font-size: 15px; } |
注意：在PC端默認(rèn)字體大小是16px,最小字體大小是12px.
font-family 屬性是用于某個(gè)元素的字體族名稱(chēng)或/及類(lèi)族名稱(chēng)的一個(gè)優(yōu)先表。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值。
注釋?zhuān)菏褂枚禾?hào)分割每個(gè)值，并始終提供一個(gè)類(lèi)族名稱(chēng)作為最后的選擇。
font-family: 我想要的1,我想要的2,我想要的3,···保底字體。
那么我們電腦中的字體在哪里？
|
C:WindowsFonts |
注意：①我們多寫(xiě)幾個(gè)字體 作為備用字體②注意版權(quán)問(wèn)題(微軟雅黑收費(fèi)了)③我們建議把中文字體改寫(xiě)為unicode編碼
上述單一屬性我們可以通過(guò)font這個(gè)復(fù)合屬性一起寫(xiě)出來(lái)：
語(yǔ)法：
|
font-style，font-variant ， font-weight，font-size/line-height，font-family |
上述屬性值不一定都要寫(xiě)，但是如何你要寫(xiě)必須按
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1100.html
摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會(huì)繼承父元素的樣式在寫(xiě)樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)或者單獨(dú)設(shè)置其屬性相對(duì)定位絕對(duì)定位的用法。 css技術(shù)分享之二級(jí)、三級(jí)下拉菜單的制作： 首先看一下網(wǎng)頁(yè)中的三級(jí)下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...
摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會(huì)繼承父元素的樣式在寫(xiě)樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)或者單獨(dú)設(shè)置其屬性相對(duì)定位絕對(duì)定位的用法。 css技術(shù)分享之二級(jí)、三級(jí)下拉菜單的制作： 首先看一下網(wǎng)頁(yè)中的三級(jí)下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...
摘要：前端三層內(nèi)容層結(jié)構(gòu)層樣式層表現(xiàn)層行為層層語(yǔ)言含義結(jié)構(gòu)層由或之類(lèi)的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。行為層負(fù)責(zé)回答內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)這一問(wèn)題。這是語(yǔ)言和主宰的領(lǐng)域。前端三層：內(nèi)容層(結(jié)構(gòu)層)HTML、樣式層(表現(xiàn)層)CSS、行為層JavaScript層語(yǔ)言含義結(jié)構(gòu)層HTML由 HTML 或 XHTML之類(lèi)的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述，但這些標(biāo)...
摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見(jiàn)的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見(jiàn)其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫(xiě)的專(zhuān)題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過(guò)定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來(lái)實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來(lái)自單個(gè)樣式規(guī)...
摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見(jiàn)的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見(jiàn)其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫(xiě)的專(zhuān)題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過(guò)定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來(lái)實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來(lái)自單個(gè)樣式規(guī)...
閱讀 847·2023-04-25 19:43
閱讀 4115·2021-11-30 14:52
閱讀 3930·2021-11-30 14:52
閱讀 4027·2021-11-29 11:00
閱讀 3922·2021-11-29 11:00
閱讀 4039·2021-11-29 11:00
閱讀 3770·2021-11-29 11:00
閱讀 6608·2021-11-29 11:00
