css基礎內容

番茄西紅柿發布于2019-04-23 13:16 / 2046人閱讀

摘要：注意設置并不是將內邊距設置為，而是在原來的基礎上，增加，若想減小內邊距，可以使用設置負值來完成。

css基礎內容

CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一

一.css的引入方式

1.直接在html標簽元素內嵌入css樣式

<div style="font-size:14px; color:#FF0000;">行內引入div>

2.在html頭部head部分內style聲明插入代碼

<style>
        p{
            background-color: #FF0000;
        }
    style>

3.使用@import引用外部CSS文件

<style type="text/css">
          @import"css文件路徑"; 
style>

這種方式會先加載html文檔，再引入css渲染，可能會出現先打開沒有樣式的顯示之后才有了樣式渲染。

4.使用link來調用外部的css文件

<link href="css文件路徑" rel="stylesheet" type="text/css"/>

二.css選擇器

1.基礎選擇器

基本選擇器	說明
*	匹配任何元素
E	標簽選擇器，匹配所有使用E標簽的元素
.class名	class選擇器，匹配所有class屬性為此class名的元素
#id名	id選擇器，匹配所有id屬性等于此id名的元素

2.組合選擇器

組合選擇器	說明
E,F	同時匹配所有E元素或F元素
E F	后代選擇器，匹配所有E標簽下的F元素
E>F	子選擇器，匹配所有E下一級的F元素
E+F	相鄰兄弟選擇器，匹配所有緊隨E元素之后的同級元素F
E~F	匹配E元素后面的所有兄弟元素中的第一個F元素

3.屬性選擇器

屬性選擇器	說明
E[att]	選中具有attr屬性的E元素
E[attr=val]	選中具有attr屬性，并且屬性值為val的E元素
E[attr^=val]	選中具有attr屬性，并且屬性值以val開始的E元素
E[attr$=val]	選中具有attr屬性，并且屬性值以val結束的E元素
E[attr*=val]	選中具有attr屬性，并且屬性值包含val的E元素
E[attr~=val]	選中具有attr屬性，并且屬性值包含val的E元素，該屬性值必須以空格隔開

4.偽類

錨偽類	說明
a:link	未訪問的鏈接
a:visited	已訪問的鏈接
a:hover	鼠標移動到鏈接上
a:active	選定的鏈接

a:hover 必須被置于 a:link 和 a:visited
a:active 必須被置于 a:hover 之后

E:before 在元素之前插入內容
E:after 在元素之后插入內容
舉例：

p:before{content:"sfencs";color:red}//在p標簽之前插入sfencs
p:after{ content:"sfencs"；color:red}//在p標簽之后插入sfencs

三.css屬性

1.字體

//設置字體大小
font-size: 20px
font-size: 50%
font-size: larger

//設置字體顏色
color:blue
color:#FF0000
color:rgb(255,0,0)
color:rgba(255,0,0,0.5)//最后一項是透明度

//設置字體樣式
font-family:Microsoft YaHei

//設置字體粗細
font-weight: lighter//bolder/lighter
font-weight: 500//100-900
font-weight: bold//normal/bold

//字體傾斜
font-style: oblique

2.背景

background-color:blue//背景顏色
background-image: url(圖片路徑)
background-repeat: no-repeat//圖像平鋪模式：repeat垂直方向和水平方向重復/repeat-x水平方向重復/repeat-y垂直方向重復/no-repeat不重復

3.文本

text-align: center//文本對齊方式：left/center/right
line-height: 200px//行高
vertical-align:middle//設置元素的垂直對齊方式：top把元素的頂端與行中最高元素的頂端對齊/bottom把元素的頂端與行中最低的元素的頂端對齊........
text-indent: 150px//首行縮進
letter-spacing: 10px//字符間隙
word-spacing: 20px//單詞間隙
text-transform:uppercase//控制文本大小寫：capitalize單詞大寫字母開頭/uppercase全部大寫/lowercase全部小寫

4.邊框

border-style: solid邊框樣式
border-color: black邊框顏色
border-width: 20px邊框寬度

5.列表

list-style-type:circle//設置列表項標記的類型
list-style-position:inside//設置在何處放置列表項標記
list-style-image: url(圖像路徑)//使用圖像來替換列表項的標記

6.display

display:none//不顯示
display:block//顯示為塊級元素
display:inline//顯示為內聯元素，元素前后沒有換行符
display:inline-block//行內塊級元素

7.外邊距和內邊距

這里借用w3school的一張圖

通過調整margin，padding來調整元素內容之間的舉例，元素與元素之間的舉例。
注意1：設置padding-left:10px;并不是將內邊距設置為10px，而是在原來的基礎上，增加10px，若想減小內邊距，可以使用設置負值來完成。
注意2：body標簽在html標簽之中，所以body與html之間會有外邊距，這就是瀏覽器網頁兩邊會有白邊的原因，可以通過改變body的margin來解決。
注意3：邊界塌陷問題，父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content 中的其中一個，然后按此div 進行margin
　　　解決方法：1.給父div設置透明邊框2.給父div設置padding3.給父div設置over-flow:hidden

8.float浮動

float使得元素脫離文檔流，使得元素向左或向右浮動，直到遇到邊框

float:right//是元素向右浮動
float:left//使元素向左浮動

如果兩個挨著的元素同時向右浮動，那么左邊的元素也會緊隨著右邊的元素，而不會到達邊框
如果一行內放不下多個浮動元素，那么多余的浮動元素會到達下一行。
如果不想一個元素的兩邊有浮動元素，可以使用clear屬性，

clear:none
clear:left
clear:right
clear:both

浮動雖然有益處，但也會帶來副作用，即由于浮動脫離了文檔流，導致父級div不能夠被撐開，導致浮動溢出
解決方法：1.設置父級div高度2.在父級div的末尾加上

3.給父級div加上

:after { 
content: ".";                
display: block;            
clear: both;                  
visibility: hidden;           
line-height: 0;              
height: 0;                   
font-size:0;                 
}

9.position

positipn:static//默認值。沒有定位，元素出現在正常的流中
position:relative//生成相對定位的元素，相對于其正常位置進行定位，可以使用top，right，bottom，left等屬性進行調整
position:fixed//生成絕對定位的元素，相對于瀏覽器窗口進行定位
position:absolute//生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位,可以使用top，right，bottom，left等屬性進行調整

GPU云服務器云服務器 css基礎基礎css css基礎教程基礎選擇器css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1653.html

關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

mj 2019-08-28 18:13 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

Yu_Huang 2019-08-01 14:48 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

mingzhong 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

DangoSky 2019-08-02 14:12 評論0 收藏0
前端入門1-基礎概念

摘要：基礎基礎是一種標記語言，不是編程語言，需要明確這點。元素標簽內容基礎基礎負責文本樣式的呈現，既然將和分離開，各自只負責各自的職責，那么肯定需要某種方式將兩者連接在一起。本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家發布聲明本系列文章內容全部梳理自以下四個來源：《HTML5權威指南》《JavaScript權威指南》 MDN web docs Github:smyh...

codecraft 2019-04-23 13:15 評論0 收藏0