CSS--最最最基礎操做

時間  2019-11-13
標籤 css 最最 基礎 欄目 CSS 简体版
原文   原文鏈接

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。css

h1 {color:red; font-size:14px;}html

css的四種引入方式 

1.行內式

 行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用。python

<p style="background-color: rebeccapurple">hello yuan</p>

2.嵌入式

   嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：api

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3 連接式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下： 瀏覽器

<style type="text/css">
 
          @import"mystyle.css"; 此處要注意.css文件的路徑
 
</style>　

注意：ide

      導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--<style>-->
           <!--p{-->
               <!--color: white;-->
               <!--background-color: royalblue;-->
           <!--}-->
    <!--</style>-->

    <!--<link rel="stylesheet" href="test_css.css">-->

    <!--<style>-->
        <!--@import "test_css.css";-->
    <!--</style>-->

</head>
<body>

<!--<p style="color: red;background-color: green">hello yuan</p>-->

<p>hello p</p>
<div>DIV</div>

</body>
</html>
例子

 

css選擇器

基本選擇器

組合選擇器

E,F   多元素選擇器，同時匹配全部E元素或F元素，E和F之間用逗號分隔      :div,p { color:#f00; }
 
E F   後代元素選擇器，匹配全部屬於E元素後代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝
 
E > F   子元素選擇器，匹配全部E元素的子元素F            :div > p { color:#f00; }
  
E + F   毗鄰元素選擇器，匹配全部緊隨E元素以後的同級元素F  :div + p { color:#f00; } 
 
E ~ F   普通兄弟選擇器（以破折號分隔）                 :.div1 ~ p{font-size: 30px; }

注意，關於標籤嵌套：字體

通常，塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。須要注意的是，p標籤不能包含塊級標籤。ui

屬性選擇器

E[att]          匹配全部具備att屬性的E元素，不考慮它的值。（注意：E在此處能夠省略。
                好比「[cheacked]」。如下同。）   p[title] { color:#f00; }
 
 
E[att=val]      匹配全部att屬性等於「val」的E元素   div[class=」error」] { color:#f00; }
 
 
E[att~=val]     匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素
                td[class~=」name」] { color:#f00; }
 
E[attr^=val]    匹配屬性值以指定值開頭的每一個元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配屬性值以指定值結尾的每一個元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配屬性值中包含指定值的每一個元素    div[class*="test"]{background:#ffff00;}

僞類

anchor僞類：專用於控制連接的顯示效果

'''
        a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。

        a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
        
        a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
        
        a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
        
        僞類選擇器 : 僞類指的是標籤的不一樣狀態:
        
                   a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
        
        a:link {color: #FF0000} /* 未訪問的連接 */
        
        a:visited {color: #00FF00} /* 已訪問的連接 */
        
        a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
        
        a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }

'''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: inline-block;
            color: darkred;
        }
        div:hover{
            color: yellow;
        }
        div:visited{
            color: aqua;
        }
    </style>
</head>
<body>

<div ><a href="">ppppp</a>
    <a href="">00000</a></div>

</body>
</html>
例子

before after僞類 

 :before    p:before       在每一個<p>元素以前插入內容     
 :after     p:after        在每一個<p>元素以後插入內容     

例：p:before{content:"hello";color:red;display: block;}

選擇器的優先級　

css的繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。url

 此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

css的優先級

所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。

樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：


1 內聯樣式表的權值最高               style=""－－－－－－－－－－－－1000；

2 統計選擇符中的ID屬性個數。       #id －－－－－－－－－－－－－－100

3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10

4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1

按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。

一、文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。
   
　　二、有!important聲明的規則高於一切。

　　三、若是!important聲明衝突，則比較優先權。

　　四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。

　　五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。
View Code

css屬性操做

css text

文本顏色：color

顏色屬性被用來設置文字的顏色。

顏色是經過CSS最常常的指定：紅綠藍

  • 十六進制值 - 如: ＃FF0000
  • 一個RGB值 - 如: RGB(255,0,0)
  • 顏色的名稱 - 如:  red

p { color: rebeccapurple;  }

水平對齊方式

text-align 屬性規定元素中的文本的水平對齊方式。

  • left      把文本排列到左邊。默認值：由瀏覽器決定。
  • right    把文本排列到右邊。
  • center 把文本排列到中間。
  • justify 實現兩端對齊文本效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
        h2 {text-align:center;}
        p.publish_time {text-align:right;}
        p.content {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 水平居中</h1>
<p class="publish_time">2017 年 5 月 17 號</p>
<p class="content">
    有個落拓不得志的中年人每隔三兩天就到教堂祈禱，並且他的禱告詞幾乎每次都相同。第一次他到教堂時，
    跪在聖壇前，虔誠地低語：「上帝啊，請念在我多年來敬畏您的份上。讓我中一次彩票吧！阿門。」
    幾天後，他又垂頭喪氣回到教堂，一樣跪着祈禱：「上帝啊，爲什麼不讓我中彩票？我願意更謙卑地來
    服侍你，求您讓我中一次彩票吧！阿門。」又過了幾天，他再次出如今教堂，一樣重複他的祈禱。如此周而
    復始，不間斷地祈求着。到了最後一次，他跪着：「個人上帝，爲什麼您不垂聽個人祈求？讓我中一次彩票吧！
    只要一次，讓我解決全部困難，我願終身奉獻，專心侍奉您……」就在這時，聖壇上發出一陣宏偉莊嚴的聲
    音：「我一直垂聽你的禱告。但是最起碼？你也該先去買一張彩票吧!」</p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 &quot;justify&quot; 是如何工做的。</p>
</body>

</html>
View Code

文本其它屬性

/*


font-size: 10px;

line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效


text-decoration:none       text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除連接的下劃線

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px;      首行縮進150px

letter-spacing: 10px;  字母間距

word-spacing: 20px;  單詞間距

text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫


*/

 

背景屬性

屬性介紹

  • background-color
  • background-image
  • background-repeat
  • background-position
background-color: cornflowerblue
 
background-image: url('1.jpg');
 
background-repeat: no-repeat;(repeat:平鋪滿)
 
background-position: right top（20px 20px）;

簡寫

 background:#ffffff url('1.png') no-repeat right top; 

邊框屬性

屬性介紹

  • border-width
  • border-style (required)
  • border-color

 border-style: solid;

border-color: chartreuse;

border-width: 20px; 

簡寫

 簡寫：border: 30px rebeccapurple solid; 

邊框-單獨設置各邊

border-top-style:dotted;
border-right-style:solid; 
border-bottom-style:dotted;
border-left-style:none;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #2459a2;

            /*border: 3px solid red;*/
            border-width: 5px;
            border-style: dashed;
            border-color: red;
            border-right: none;
        }
    </style>
</head>
<body>

<div>
    DIV
</div>

</body>
</html>
例子

 

列表屬性

list-style-type         設置列表項標誌的類型。 圓點，空心之類的
list-style-image        將圖象設置爲列表項標誌。
list-style-position     設置列表中列表項標誌的位置。
list-style              簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中

ist-style-type屬性指定列表項標記的類型：

ul { list-style-type: square(); }

使用圖像來替換列表項的標記:

 ul { list-style-image: url(''); } 

取消樣式：

 list-style: none; 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        ul{
            /*list-style-type: square;*/
            list-style: none;
            /*list-style-image:feng.jpg ;*/
        }
    </style>
</head>
<body>


<!--ul>li.item*3-->

<ul>
    <li class="item">111</li>
    <li class="item">333</li>
    <li class="item">222</li>
</ul>

</body>
</html>
例子

 

dispaly屬性

  • none
  • block
  • inline
  • inline-block

none(隱藏某標籤)

 p{display:none;} 

注意與visibility:hidden的區別：

visibility:hidden能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

block(內聯標籤設置爲塊級標籤)

span {display:block;}

注意：一個內聯元素設置爲display:block是不容許有它內部的嵌套塊元素。

inline(塊級標籤設置爲內聯標籤)

li {display:inline;}

inline-block

display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: forestgreen;
        }

        .son{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .father:hover .son{
            display: none;
        }

        .d1{
            width: 100px;
            height: 100px;
            background-color: peru;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*display: none;*/
            visibility: hidden;
        }
         .d3{
             width: 100px;
            height: 100px;
            background-color: palevioletred;
        }

    </style>
</head>
<body>


<!--<div class="father">-->
    <!--hello-->
    <!--<div class="son"></div>-->
<!--</div>-->

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>


</body>
</html>
例子

外邊距(margine)和內邊距(padding)

盒子模型

 

  • margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
  • padding:           用於控制內容與邊框之間的距離；   
  • Border(邊框):     圍繞在內邊距和內容外的邊框。
  • Content(內容):   盒子的內容，顯示文本和圖像。

margine(外邊距)

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

簡寫屬性

margin:10px 20px 20px 10px；

        上邊距爲10px
        右邊距爲20px
        下邊距爲20px
        左邊距爲10px

margin:10px 20px 10px;

        上邊距爲10px
        左右邊距爲20px
        下邊距爲10px

margin:10px 20px;

        上下邊距爲10px
        左右邊距爲20px

margin:25px;

        全部的4個邊距都是25px
View Code

居中應用

 margin: 0 auto;
*{
    margin: 0
}

 

padding(內邊距)

單獨使用填充屬性能夠改變上下左右的填充。縮寫填充屬性也可使用，一旦改變一切都改變。

padding 是對內元素，用來控制內部元素的位置

 

padding 取值：

  • 四邊距 padding
  • 上邊距 padding-top
  • 下邊距 padding-bottom
  • 左邊距 padding-left
  • 右邊距 padding-right.
padding 10px 20px 30px 40px;
padding取值解釋：

提供一個，用於四邊；
提供兩個，第一個用於上－下，第二個用於左－右；
若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；
提供四個參數值，將按上－右－下－左的順序做用於四邊

 

元素浮動-float

float 的取值：left right none（默認值）

 

若是想讓3個div並排顯示，就須要設置他們的float屬性，如設置爲float:left

 

 

overflow 文字溢出處理屬性

  • overflow 水平和垂直均設置
  • overflow-x 設置水平方向
  • overflow-y 設置垂直方向

設置水平滾動

overflow-x:scroll

 

設置垂直方向滾動條

overflow-y:scroll

 

定位屬性 position

 

  • position：fixed 將某個元素固定在頁面的某個位置
  • position：absolute 絕對定位
  • position：relative   相對定位
定位方式一般與定位座標一塊兒使用
定位座標：要定位的元素偏離目標位置多遠的距離
常見取值：Top，left，right，bottom

1,、fixed 屬性

　　將某個元素固定在頁面的某個位置

特色：

　　相對於瀏覽器的窗口來進行定位的

　　固定到窗口的某個位置上，不隨內容二滾動

　　若是不設置定位座標，就在原來的位置，不然反之

案例

　　比較右下角的返回主頁之類的按鈕，

二、relative 屬性

　　相對本身原來的位置定位

特色：

　　相對定位是相對於，自身的左上角爲座標點

 

三、absolute 屬性

　　絕對定位

特色：

　　相對於祖先元素的定位方式（relative）來進行定位

　　找祖先元素是否有定位，若是沒有定位，找到<body>，就相對body來定位

　　若是找到祖先元素有定位，就相對祖先元素來定位本身

 

z-index 

　　如 z-index = 10

　　設置對象的層疊順序

特色

　　較大的number 值會覆蓋在較小的number值得對象之上

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程