css學習筆記

web學習.次日

1，div，css初始及特色介紹
div：division區塊，分割，在頁面中用來劃分區塊
css：層疊樣式表，用來控制網頁樣式（至關於表格的做用）
加快頁面加載速度，便於維護管理
2，css行內樣式和嵌入樣式
<!-- 行內樣式-->
<h1 style="color: gray; font-size:50px ;">學習使我快樂！</h1>
style後color用來改漢字的顏色，font-size用來設置文字的大小
p{我愛學習}*8——table鍵，快捷方式，會生成八個P標籤
<!-- 嵌入樣式 -->
<style type="text/css"> 這個style是寫在head標籤裏的
p{
color: green;
font-size: 30px;
}
</style>
3，css引入樣式和導入樣式
新建一個css文件，直接在css文件裏寫，主義css文件不須要加style文件
此時css文件和html文件相互獨立，在html文件head標籤里加上link，使兩個文件相連
<!-- 外部引入css樣式文件 -->
<link rel="stylesheet" type="text/css" href="demo.css"/>
/* css之間的文件導入 */
再建立一個css文件，使用html文件導入css文件1，css文件1導入css文件2
寫在html裏的內容
<link rel="stylesheet" type="text/css" href="demo.css"/>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
寫在css文件1裏的內容
@import url("demo2.css");
4，標籤選擇器，id選擇器，class選擇器
選擇元素的方法
快捷方式p{謙虛$}*8--table 會有序號出現<p>謙虛1</p> <p>謙虛2</p>
標籤選擇器，直接在head文件中設置標籤屬性，選中你想要的標籤（p）
<!-- 標籤選擇器 -->
選擇標籤爲P的元素
<style type="text/css">
p{
color: blue;
font-size: 13px;
}
</style>
/* id選擇器 */
選擇id爲three的元素
在body裏寫上id的數，在head裏寫上#數，id要保證惟一性，一個頁面中不能出現兩個同樣的id
<p id="three">謙虛3</p>
<style type="text/css">
#three{
color: green;
font-size: 30px;
}
</style>
/* class選擇器，類選擇器*/
選擇class值爲hd的元素
在body裏寫上想要修改的標籤類，類能夠有不少個，在head文件裏寫.類名（hd)
<p class="hd">謙虛4</p>
<p class="hd">謙虛6</p>
<style type="text/css">
.hd{
color: green;
font-size: 30px;
}
</style>
5，子選擇器，交叉選擇器，羣組選擇器，通用選擇器
/* 交叉選擇器 */
用兩個條件來限制選擇結果 .表明類
例如：選擇名爲P，class爲hd
<style type="text/css">
p.hd{
color: green;
font-size: 30px;
}
</style>
<!-- 子代選擇器/父選擇器/包含選擇器/後代選擇器 -->
選擇p標籤裏的span標籤進行設置 p span 空格在選擇器中表示父子乾洗
<p class="hd"><span>你好</span>謙虛4 </p>
<style type="text/css">
p span{
color: green;
font-size: 30px;
}
</style>
<!-- 羣組選擇器 -->
把想要選擇的元素集合起來
選擇標籤名span 或者class值是hd或者id值爲three的元素，知足一個就會被選出
<!-- 羣組選擇器 -->
<style type="text/css">
span,.hd,#three{
color: pink;
font-size: 15px;
}
</style>
<!-- 通用選擇器 -->
選擇頁面中全部的元素
<style type="text/css">
*{
color: green;
font-size: 30px;
}
</style>
<!-- 複合型選擇器 -->
<style type="text/css">
#top .left .title a .link span{
color: blue;
font-size: 10px;
}
</style>
對應的代碼文件爲
<div id="top">
<div class="left">
<h4 class="title">
<a href=""class="link">
<span>學習</span>
</a>
</h4>
</div>
</div>
6，僞類選擇器
選擇同一個元素不一樣的狀態
<style type="text/css">
/* 被選中過的a標籤的狀態 */
a:visited{
color: purple;
}
/* 選中的是鼠標懸停狀態下的a標籤 */
a:hover{
color: blue;
font-size: 20px;
}
/* 鼠標正在點擊狀態下的a標籤的狀態 */
a:active{
color: red;
}
</style>
7，css繼承性和疊加性
疊加性：不一樣選擇器給同一個元素疊加的不一樣樣式，會同時生效
<h1 id="titlt">學習令人進步</h1>
h1{
font-size: 20px;
}
#titlt{
color: black;
}
<!-- 子元素會繼承父級元素中的文字相關樣式，（文字大小，字體，顏色，傾斜，劃線，加粗...) -->
8，選擇器的優先級
繼承的樣式<瀏覽器給的默認模式<通用選擇器<標籤選擇器<類選擇器<id選擇器<子代選擇器<行內樣式
選擇的越精準優先級越高
9，行級元素，塊級元素，行內塊級元素
塊級元素：能設置寬高，本身要霸佔一行，不和其餘元素默認排在一行
常見的塊級標籤：div p h1-h6 ul ol li dl dt dd
行級元素：不能設置寬高，能夠和其餘行級元素排列在一行
常見的行級元素：a span strong u em
行內塊級元素：能設置寬高，能夠待在同一行
常見的行級元素：img 表單
10，文字字體與文字大小設置
文字字體：谷歌瀏覽器默認微軟雅黑
設置字體使用font-family
<style type="text/css">
h1{
/* 回退機制 */
font-family:宋體,幼圓,黑體 ;
}
</style>
字體大小：通常來說，瀏覽器默認的文字大小爲16px
字體大小設置使用font-size
p{
width: 60px;
border: 3px solid pink;
/* 1em就至關於瀏覽器默認大小的16像素 */
font-size: 1.5em;
}
11，文字水平位置和文字行高
文字水平位置設置使用text-align
text-align: center;文字居中
文字行高設置使用：line-height
line-height: 35px;
line-height: 2em;/* em是參照於當前文字的實際字體大小 */
用來調整兩行之間的行間距
12，首行縮進，文字斜體，文字粗細，文字劃線，字符間距
首行縮進：使用text-indent
文字粗細：使用font-weight
font-weight: bold;加粗
font-weight: normal;正常顯示
沒有單位，取值100~900 正常粗細通常400，加粗通常爲700
文字傾斜：使用font-style
font-style:italic;傾斜
font-style:nomal;正常顯示
文字劃線：使用text-decoration
text-decoration:overline ;上劃線
text-decoration: underline;下劃線
text-decoration: line-through;刪除線
text-decoration: none;去除文本修飾風格
字符間距：letter-spacing
letter-spacing: 5px;經常使用單位像素px
13，Photoshop測量尺寸的方法
使用矩形選框工具截取一個矩形點擊窗口--信息（修改標尺單位爲像素）
14，span標籤的用法
套用在p標籤裏使用，調用時 格式 p span
15，盒子模型，內邊距
盒子模型：css基礎之一，把頁面中全部的元素都理解爲一個四四方方的元素（類比快遞盒子）
width屬性只是設置內容的寬度，若是有內邊距會將盒子撐大
內邊距：有上下左右四個方向
padding-top: 20px; 內容頂部矩上邊框
padding-left: 20px; 內容左邊距左邊框
16，padding屬性詳解
若是padding屬性只有一個參數，表示四個方向都是這麼大的內邊距
當padding有兩個參數時，第一個參數表示上下內邊距，第二個參數表示左右內邊距
當padding有三個參數時，第一個表示上方向，第二個參數表示左右方向，第三個參數表示下方向
當padding有四個參數時，第一個上，第二個右，第三個下，第四個左
17，外邊距詳解
盒子和盒子之間的距離，也有上下左右四個方向
margin-right: 100px; 右邊加上100px的距離
左右外邊距會疊加，上下外邊距取最大值
margin後跟一，二，三，四個元素和內邊距同理
18，全局reset元素寬高特色 ，塊級元素水平居中
全局reset（全局代碼重置）
*{內外邊距設置爲0（0px）
padding: 0;
margin: 0;
}
塊級元素默認寬度爲100%（和父級元素同樣寬）
行級元素的寬度根據內容的寬度須要來決定，內容多寬，行級元素多寬
不管行級元素塊級元素，高度根據須要來佔用
塊級元素居中：margin：0 auto；//讓塊級元素居中
19，display屬性詳解
塊級元素轉成行級元素
display: inline ; 只是轉換寬高屬性
行級元素轉換爲塊級元素
display: block;
轉成行內塊級元素
display:inline-block
讓元素隱藏
display: none;
20,overflow屬性詳解
在建立的div區域里加入文字過多時，文字會溢出
overflow: hidden;溢出隱藏
overflow: scroll;滾動條,無論需不須要都會加上
overflow: auto;須要的時候自動加上滾動條
21，boder邊框詳解
border控制上右下左四個方向
border-color: green;邊框顏色樣式
border-width: 5px;邊框粗細
border-style: solid;邊框樣式
也能夠單獨控制某一個方向的邊框
border-top: 3px dashed red;控制頂部邊框粗細爲3px，虛線，紅色
22，float浮動屬性
可讓塊級元素排列在同一行，且不影響寬高屬性
float: left;跑到盒子所在位置的最左邊，從上一行的右邊出現
float: right;跑到盒子所在位置的最右邊，從上一行的左邊出現
23，浮動元素和正常元素的排列特色
若是浮動元素的上一行是正常元素，那麼浮動元素是跑不上去的
正常元素在排列本身位置的時候，會忽略它前面的浮動元素
24，文字環繞效果
利用浮動來設置圖片在文字周圍的位置
25，父級元素寬度對浮動元素的影響
若是浮動元素的父級元素寬度不足以放下這幾個浮動元素，那麼會從最後一個元素依次被擠到下一行
沿着前面一個元素的下邊緣
若是父級元素的子元素都是浮動元素，那麼這些子元素是撐不開父級元素的高度的
解決方法：給父級元素加一個overflow:hidden;屬性
26， 相對定位和絕對定位
主要實現塊裏面細節性的操做，脫離文檔流，自由定義位置
相對定位： position: relative;
徹底脫離文檔流，在文檔流中的位置還會被保留，相對於原來的位置進行位置變化，右下爲正方向，左上爲負方向
絕對定位： position:absolute;
徹底脫離文檔流，元素在文檔流中的位置再也不被保留，元素參照與離他最近的 有定位屬性的父級元素進行定位
27，z-index層級
只有有定位屬性的元素纔有層級；若是不給元素加層級，默認層級值爲0；若是層級值同樣，後來者居上。
層級值越高，就在上面。使用z-index調整層級的大小。
只有親兄弟才能比層級（找兄弟元素，而不是直接找正在設置的元素）
28，背景設置
背景顏色：background-color: 直接寫顏色單詞，使用十六進制表示顏色，三基色RGB（red green blue）
background-color:red; background-color:rgb(225,244,244);
背景圖片：使用background-image: url();
background-image: url(prince.jpg);
設置背景圖平鋪
background-repeat:repeat-x; 橫向重複平鋪
background-repeat: repeat-y; 縱向重複平鋪
設置背景圖位置：background-position:
background-position: 100 px 50px;
綜合寫法：
參數順序，背景顏色 背景圖 平鋪方式 水平方向位置 垂直方向位置
若是不須要設置哪一個參數，直接不寫
29，背景精靈
在一個有限大小的元素內，只顯示一張大背景圖的一部份內容
別名:css雪碧、css sprite
30，background-attachment背景圖固定
通常用於整個body，在單個的div中無效
body{
background-attachment: fixed;
}
31，visibility cursor 透明度 css命名規範
透明度 0徹底透明 1 徹底不透明 0.6 百分之60的不透明
opacity：0.6
解決IE瀏覽器的不支持問題：filter：alpha(opacity=60);
visibility 元素隱藏
visibility :hidden;只讓內容隱藏，元素的位置還在
display: none;元素位置也被改變
list-style:none ; 取消li標籤默認小圓點,寫在li 裏
鼠標樣式：
cursor:hand 手型
poniter也是手型，不過能夠在多種瀏覽器下使用
crosshair 十字型
text 移動到文本上的那種效果
wait 等待的那種效果
default 默認效果
help 問號
css命名規範：
惟一性，結構性的使用id選擇器
其餘的使用class選擇器
使用小寫字母，名字要有意義，有父子包含關係時，應經過命名出現
能夠存在下劃線，要有合理的註釋