1. css概念
CSS(Cascading Style Sheets) 層疊樣式表（結構，表現，行為）中的表現
2. CSS引入方式*
2.1.行內樣式
在開始標簽上加style屬性，樣式值是style的屬性值
直接使用標記的style屬性
<div style=" width:100px; height:100px; background-color:#F00;”>hi</div>
2.2 內嵌式
所有的樣式都寫在<style></style>內，<style></style>一般放在<head></head>內
2.3 外鏈式
所有的樣式均寫到一個單獨的文件內（該文件后綴名.css）,通過
<link rel="stylesheet" href="文件.css" type=”text/css”>
來連接到html文件里。link標簽一般放到head標簽內部
2.4 導入式（了解）
使用@import指令可以將css文件中的css樣式導入到不同的地方
? ? a. 導入式的結果和直接書寫是同樣的效果
? ? b.導入式可以共享樣式代碼
? ? c.可以在內嵌式里使用導入，也可在css文件中使用
? ? d.導入樣式的使用方法
? ?? ?@import url(“sheet1.css”);
? ?? ?@import“sheet1.css”;
3. 樣式優先級：（就近原則）
原則：誰離標簽近，誰的優先級高
CSS語法規則
選擇器{
樣式屬性名 : 屬性值 ;
...
}
4. CSS 選擇器
基礎選擇器
- 1.標簽（元素）選擇器
標簽名{ } ----------p{ } a{ } - 2.類選擇器
.類名{ }------------ .class{ } - 3.id選擇器
id值{ } ------------#id{ } - 4.通配符選擇器(選擇所有)
*{ }
復合選擇器
- 5.后代選擇器（包含選擇器）
選擇符a 選擇符b {規則} -----a b{ } - 6.直接后代（子元素）選擇器
選擇器 a > 選擇器b（選擇器b必須是選擇器a的子）
.box>span - 7.分組選擇器(逗號分開)
div,span,p{ } - 相鄰兄弟選擇器（+）
<style type="text/css">
.main h1+p{
background-color: #7FFFD4;
}
</style>
<div class="main">
<p>1</p>
<h1>2</h1>
<p>3</p> //選中
<h1>4</h1>
<p>5</p> //選中
<p>6</p>
</div>
- 9.偽類選擇器
a:link{color: #000000;} 訪問前
a:visited{color: #0000FF;} 訪問后狀態
a:hover{ color: #00FF00;} 鼠標懸停狀態
a:active{color: #8A2BE2;} 鼠標激活狀態
5. 選擇器優先級：
權重：
著重! important;(10000)>內聯樣式（1000）>id（100）> class （10）>標簽（元素選擇器）（1）> 通配符（0.5）
! important;
易忘的css屬性
div {
cursor: pointer;
}
6. css長度單位
px和em
- px,像素
??根據顯示器分辨率的不同，像素的大小也是不同的 - em,以當前字符的高度為基準
??如果當前字體的高度為12px，那么1em就是12px
??注意：一般以font-size為準，如果沒有定義font-size，則以瀏覽器默認大小（16px）為準 - cm/mm/pt/pc
??主要用在非顯示器輸出上，如打印
??如果網頁在顯示器上顯示，則這些單位將轉換為一定的像素顯示，即長度也是依靠顯示器分辨率的
7. css中顏色的表示
網頁中顏色采用RGB模式顯示（顯示器）
1.RGB顏色在CSS中的表達方式
A．直接使用顏色的英文單詞，如red
注意：很多瀏覽器不支持顏色的單詞表示
1. 使用三色的數值，如rgb(120,222,100)
注意：數值在0~255之間
使用三色的百分比，如rgb(10%,20%,100%)
red rgb(255,0,0) ?? blue rgb(0,0,255) ??black(0,0,0)
green rgb(0,255,0)?? white rgb(255,255,255)
2. 使用三色數值的十六進制，如#0000ff
注意：推薦使用這種方式，十六進制值前加#
rgb red #ff0000 #f00 ?? blue #0000ff #00f ??black #000000 #000
8. css中字體樣式 ( font )
1. font-family
指定字體
可以為文字指定多個字體，不同字體間用“，”隔開
字體名字中間有空格的，要用雙引號引起來
2. font-size
字體大小
多用px/em單位
3. font-style
字體傾斜效果
normal不傾斜、oblique和italic****傾斜
Italic是使用文字的斜體，Oblique是讓沒有斜體屬性的文字強制傾斜！
4. font-weight
字體粗細
大多瀏覽器可以實現：正常和加粗效果
9. 文本屬性
1. text-indent
段落內容首行縮進（懸掛縮進）
2.字詞間距
- 英文文本
letter-spacing 字母和字母間距 : normal / 數值
word-spacing 單詞和單詞間距 - 中文文本
letter-spacing 字和字之間的間距
3. text-align
文本的水平位置
- left，左對齊（默認值）
- right,右對齊
- center,居中對齊
- justify,兩端對齊
- justify對于主要用于英文
只能對多行中的非最后一行進行兩端對齊
4. vertical-align
baseline/top/text-top/middle/bottom/.. 垂直對齊方式
該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。
- text-transform
5.英文字母大小寫轉換
- uppercase 全大寫
- lowercase 全小寫
- capitalize 首字母大寫
6.text-decoration(下劃線/中劃線上劃線)
文本的裝飾效果
- none 無修飾
- underline 下劃線
- line-through 中劃線/刪除線
- overline 上劃線
7. overflow:
內容溢出處理
overflow: visible（默認）/ 溢出部分 可見
hidden（超出部分隱藏）/
scroll（出現滾動條）/
auto（瀏覽器自動處理）
text-overflow：clip（不顯示省略標記，簡單裁切） | ellipsis（文本溢出顯示省略標記）文本溢出處理
white-space： normal / pre（空白被保留）/nowrap（不換行）/pre-wrap(只對中文起作用，強制換行)....
word-break:break-all(只對英文起作用，以字母作為依據，強制換行)/break-word(只對英文起作用，以單詞作為依據，強制換行)
元素空白的處理
overflow-x:hidden;
overflow-y:scroll;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
1.單行超出隱藏
div {
overflow:hidden; //超出的文本隱藏
text-overflow:ellipsis; //用省略號顯示
white-space:nowrap; //不換行
}
2.多行超出隱藏
div{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; //將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 從上到下垂直排列子元素
-webkit-line-clamp:2; //顯示的行數
}
3.表格中單行超出隱藏
table{width:100%;table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */}
td{
width:100%;
word-break:keep-all; // 不換行
white-space:nowrap; // 不換行
overflow:hidden;
text-overflow:ellipsis;
}
4.css多行文本省略號，字母，數字不能變為省略號
在多行文本省略號的基礎上添加 word-wrap:break-word;
( 通知瀏覽器不按單詞處理元素)
b.兼容各種瀏覽器的方法
（1）利用偽類(IE6/IE7不支持)
<style>
.content {
display: inline-block;
width: 400px;
height: 56px;
line-height: 28px;
margin: 50px 0 0 50px;
border: 1px solid red
overflow: hidden;
}
.ellipsis::after{
content: "...";
display: inline;
}
</style>
</head>
<body>
<div class="app">
<span class="content">你問我為何時常沉默，有的人無話可說，有的話無人可說.你問我為何時常沉默，有的人無話可說，有的話無人可說.
</span>
<span class="ellipsis"></span>
</div>
</body>
（2）利用定位和padding-right
<style>
.content {
width: 400px;
height: 56px;
line-height: 28px;
margin: 50px 0 0 50px;
border: 1px solid red;
overflow: hidden;
padding-right: 12px; /* 留出省略號位置 */
position: relative;
}
.ellipsis{
position: absolute;
right:10px;
bottom: 0;
}
</style>
</head>
<body>
<div class="content">你問我為何時常沉默，有的人無話可說，有的話無人可說.你問我為何時常沉默，有的人無話可說，有的話無人可說.
<span class="ellipsis">...</span>
</div>
滾動條設置
/* 滾動條整體寬度 */
::-webkit-scrollbar {
width: 30px; /*對垂直流動條有效*/
height: 20px; /*對水平流動條有效*/
}
/* 滾動條背景樣式 */
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
background-color: red;
border-radius: 8px;
}
/*定義滑塊顏色、內陰影及圓角*/
::-webkit-scrollbar-thumb{
border-radius: 7px;
webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E8E8E8;
}
/*定義兩端按鈕的樣式*/
::-webkit-scrollbar-button {
height: 5px;
width: 10px;
background-color:cyan;
}
/*定義右下角匯合處的樣式*/
::-webkit-scrollbar-corner {
/* border-radius: 50%; */
background:khaki;
}
10. 偽類
- :link 未訪問狀態
- :visited 訪問后狀態
- :hover 鼠標懸停狀態
- :active 鼠標激活狀態
原則：
LoVe HAte 愛恨原則
11. display & visibility
display
CSS使用display設置的標簽的顯示方式
- block ------- “塊”元素（獨占一行，可設置寬高）
- inline -------- “行內”元素（多個元素占一行，不能設置寬高）
- inline-block ------ 行內塊元素（多個元素占一行，可以設置寬高）
- none ------ 隱藏(空間釋放)
<div>主要用于HTML文檔中獨立的“大塊”內容
<span>主要用于HTML文檔中需要特別定義的內容
visibility
visibility:hidden（元素不可見，但空間依然被占用）
visibility:visible（元素可見）
12. 盒子模型
a. border
邊框的三個方面(webkit、firefox和ie)
- border-width 邊框寬度
- border-color 邊框顏色
- border-style 邊框樣式
???? none 無邊框
???? solid 實線
???? dotted 點狀線
???? dashed 虛線
???? double 雙實線
縮寫：
border ： border-width值 border-style值 border-color值 ;
border-top
border-bottom
border-left
border-right
分開單獨設置:
border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;
使用綜合屬性
border-left:1px #00F solid;
注意：三個值沒有先后順序，中間用空格隔開
b. padding（內邊距）
邊框和內容之間的空白寬度
縮寫:
padding : 值 ;------ 四個內邊距一樣
padding : 值1 值2 ; -----值1代表上、下內邊距，值2代表左、右內邊距
padding ：值1 值2 值3 ；--值1代表上內邊距，值2代表左右內邊距，值3代表下內邊距
padding : 值1 值2 值3 值4 ； 值1代表上內邊距，值2代表右內邊距，值3代表下內邊距，值4代表左內邊距，按照順時針方向，上右下左。
注意：這個部分只有空白，不能設置外觀樣式，顏色等，只能設置空白的寬度
padding的綜合設置
例：padding:2px;(四個內邊距都為2px)
padding的單邊設置
例：padding-left:2px;(左邊的邊框和內容之間的距離為2px)
c. margin（外邊距）
縮寫： 同padding
margin ： 值；
margin ： 值1 值2；
margin : 值1 值2 值3；
margin : 值1 值2 值3 值4；
margin:0 auto; 塊元素水平居中標簽和它相鄰的標簽之間的空白寬度
外邊距的設置是相疊加的
margin的綜合設置
例：margin:10px;(和四邊臨近的標簽的距離都為10px)
margin的單邊設置
例：margin-left:10px;(標簽距左邊10px)
特別
<body>標簽的margin代表內容與瀏覽器邊框的距離
兩個行內元素的margin-right和margin-left，采用“和”
兩個塊元素的marign-top和margin-bottom，采用“最大值”
13. background
a. background-color
定義標簽的背景顏色
b. background-image
定義背景圖片,可定義多背景
background-image: url(images/bg-hotlink.png);
background:red url(xx.png) no-repeat -200px 300px;
backgroung-color:red;
background-image: url(xxx.png);
background-repeat:no-repeat;
background-position:-200px 300px;
c. background-repeat
定義背景圖片的顯示方式
repeat，圖片重復
repeat-x，圖片橫向重復
repeat-y，圖片縱向重復
no-repeat，圖片不重復
d. background-position
定義背景圖片的位置
直接使用兩個定位單詞，例:background-position: right top;
使用x、y坐標，例:background-position: 20px 30px;
e. background-size
定義背景圖片的大小
background-size: length | percentage | cover | contain;
cover:把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。（可能會裁剪圖片）
contain:把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。(可能會出現空白)
f. background-origin
定義背景圖片的渲染位置
背景圖片可以放置于 content-box、padding-box 或 border-box 區域。
g. background-attachment
定義背景圖片是否固定或者隨著頁面的其余部分滾動
background-attachment：fixed（固定）| scroll（默認）
14. 文檔流
標準文檔流”
Normal Document Stream
瀏覽器解析HTML代碼的基本方式，根據標簽的不同“display”來確定標簽的定位和顯示方式
15. Folat（浮動）
float：造成標簽“浮動”，影響“文檔流”的空間
float:left;“左浮動”
float:right;”右浮動”
none 默認 不浮動
folat浮動之后display自動變為block
對span元素添加一個float:left，span元素已經“塊”化。
16. position(定位)
除了基于“文檔流”的定位，CSS還定義了標簽的其他定位方式，CSS使用position屬性指定標簽的定位方式
position的值
static 默認值，即使用基于“文檔流”的定位
relative 相對定位，即在“文檔流”的基礎上，結合left和top屬性，相對定位
absolute 絕對定位，即脫離“文檔流”，并基于它的“包含框”，使用left和top屬性來定位
fixed 固定定位，即特殊的絕對定位，即它的“包含框”為瀏覽器
a. position:relative;
relative 相對定位：相對于原來正常文檔流的自己定位
注意
??相對與原來的位置，使用left,right進行偏移
??原來的位置對于后繼元素的定位(float)依然有效
??對于使用float的元素，realative也同樣起作用
b. position:absolute;
absolute 絕對定位
注意：
??絕對定位脫離了”文檔流“，
??使用絕對定位時，注意找準”包含框“，即包含該標簽，并且距它最近的父，position不等于static的標簽
??如果沒有，那么將以瀏覽器左上角為準來定位
特點:
??只定義position:absolute;沒設置left和top，標簽位置仍安“文檔流”定位，但已經“脫離文檔流”
b. position:fixed;
fixed（固定定位）
fixed 固定定位
始終相對于瀏覽器定位
17. 清除浮動
??浮動的元素會脫離正常文檔流，釋放空間不占用高度而浮于文檔上方，使其父元素高度坍塌。常見情況有，下面的元素向頂部移動以及浮動導致父元素高度為零，這時就需要清除浮動。
清除浮動的4種方法：
- 給父元素手動添加 height
- 給父元素加overflow：hidden（ 原理是voerflow會觸發BFC(塊級格式化上下文),BFC渲染頁面的規則中，浮動元素也占用高度）
- 在所有有浮動的元素后加一個空元素，給此空元素加樣式
clear:both / left / right / none
clear:left 清除左浮動
clear:right 清除右浮動
clear:both 清除左右浮動
clear:none 不浮動
- 給父元素加偽元素 ::after(給需要清除浮動的父元素，添加類名clearfix，在css中添加偽類)
.clearfix::after{ display:block； content:""; clear:both ; }
clear清除浮動
例：
<style>
.box{
width:300px;
height: 200px;
background-color: #ccc;
}
.box::before{
display: block;
content:"哈哈哈哈";
}
.box::after{
display:block;
content:"呵呵呵";
}
偽元素清除浮動
.box{
width:1000px;
margin:0 auto;
background-color: #ccc;
/*orerflow:hidden;*/
}
.box .left{
float: left;
width:300px;
height: 200px;
background-color: #f00;
}
.box .box2{
float: left;
width:500px;
height: 100px;
background-color: #00f;
}
.clearfix::after{
display: block;
content:"";
clear:both;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="box2"></div>
</div>
</body>
18. 列表樣式
list-style
list-style-type 列表樣式類型
- none 無列表樣式
- disc 實心圓
- circle 空心圓
- square 實心方塊
- decimal 數字
list-style-image
列表樣式圖片
??url("圖片路徑")
??list-style-position
列表樣式位置
??outside 樣式在外側
??inside 樣式在內部
縮寫
??list-style:none
opacity 不透明度
rgba（0,0,0,0.5）【只透明背景】
opacity【文字圖片都透明】
取值范圍 0-1
兼容ie8以下版本
filter:alpha(opacity=數值) 數值取值范圍0-100
.box{
/*display: none;*/
/*opacity: 0;*/
/*visibility: visible;*/
visibility: hidden;
width: 500px;
height: 300px;
background-color: rgb(255,0,0);
}
.box:hover{
/*background-color: rgba(255,0,0,.4);*/
opacity: 0.4;
filter:alpha(opacity=40);
}
/*img{
opacity:0.4;
}*/
列表樣式
- list-style-type: disc;實心圓
- list-style-type: circle; 空心圓
- list-style-type: none; 無樣式
- list-style-type: square; 實心方塊
- list-style-type: decimal; 阿拉伯數字
- list-style-image:url("images/chui.png"); 列表樣式圖片
- list-style-position: inside;
- list-style:none;
盒子模型
W3C 盒子模型：
W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。 IE 盒子模型的范圍也包括 margin、border、padding、content
IE 盒子模型：
和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
box-sizing的使用
如果想要切換盒模型也很簡單，這里需要借助css3的box-sizing屬性
box-sizing: content-box --------是W3C標準盒子模型
box-sizing: border-box ---------是IE盒子模型
inherit：繼承父元素的box-sizingbox-sizing的默認屬性是content-box
彈幕標簽marquee
marquee的作用是創建一個滾動的文本字幕
語法：<marquee>...</marquee>； 在標記“…”之間添加要進行滾動的內容。
重要屬性：
1.滾動方向direction（包括4個值：up、 down、 left和 right）
語法：<marquee direction="滾動方向">...</marquee>
2.滾動方式behavior（scroll:循環滾動，默認效果； slide:只滾動一次就停止； alternate:來回交替進行滾動）
語法：<marquee behavior="滾動方式">...</marquee>
3.滾動速度scrollamount（滾動速度是設置每次滾動時移動的長度，以像素為單位）
語法：<marquee scrollamount="5">...</marquee>
4.滾動延遲scrolldelay（設置滾動的時間間隔，單位是毫秒）
語法：<marquee scrolldelay="100">...</marquee>
5.滾動循環loop（默認值是-1，滾動會不斷的循環下去）
語法：<marquee loop="2">...</marquee>
6.滾動范圍width、height
7.滾動背景顏色bgcolor
8.空白空間hspace、vspace
<html>
<head>
<style type="text/css">
#dynamic_text
{
width:740px;
height:32px;
margin:20px auto 10px auto;
border:1px solid gray;
float:left;
}
</style>
</head>
<body>
<div id="dynamic_text">
<marquee align="left" behavior="scroll" bgcolor="white" direction="left" hspace="0" vspace="0" weith="800" height="27" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
<p style="color:#1F202B;font-size:12px;font-family:宋體;">國務院教育督導委員會辦公室主任、教育部教育督導局局長何秀超，教育部基礎教育一司司長呂玉剛，湖南省人民政府副省長、秘書長向力力，中南大學黨委書記高文兵、校長張堯學，教育部和湖南省相關部門負責人參加督查。</p>
</marquee>
</div>
</body>
</html>
