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