CSS基礎知識

時間 2019-11-13

標籤 css 基礎知識欄目 CSS 简体版

原文原文鏈接

1.CSS的編寫格式

鍵值對形式的，冒號左邊是屬性名，右邊屬性名稱css

2.CSS的3種書寫形式

//1.行內樣式
    <div> <!-- span也是容器，可是小容器-->
        <span>123</span>
        <span style="color: red; background-color: blue">紅藍色</span>
    </div>

//2.內頁樣式
   <style type="text/css">
        span{
            color: green;
        }
   </style>
   
//3.外部樣式
先新建一個空的file，後綴爲css
//test.css：
span{
    color: green;
}

    <!--- rel表示關係，stylesheet樣式表 href表示文件名-->
    <link rel="stylesheet" href="test.css">

3.標籤選擇器

1>.標籤選擇器html

2>.類標籤選擇器chrome

3>.id標籤選擇器瀏覽器

4>.羣組選擇器字體

5>.選擇器組合spa

6>.後代選擇器firefox

7>.子標籤選擇器code

8>.相鄰兄弟選擇器orm

9>.屬性選擇器htm

10>.僞類

        1.標籤選擇器
        p{
            color: red;
        }

        2.class標籤選擇器  前面加點. 能夠批量
        .first{
            color:red;
        }
   
        3.id標籤選擇器 前面加#.只能用1個id標籤
        #second{
            color: blue;
        }

        4.羣組選擇器
        .first,#second,h1{
            color: green;
        }

        5.選擇器組合 div格式下的first類標籤
        div.first{

        }
        div#second{

        }

        6.後代選擇器 空格 div的全部子級
        div span{

        }

        7.子標籤選擇器 下一個子級
        .first>span{
             border:1px
             solid red;   注意的是border後沒有；
         }
         請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，
         或者你能夠理解爲做用於子元素的第一代後代。然後代選擇器是做用於全部子後代元素。
         後代選擇器經過空格來進行選擇，而子選擇器是經過「>」進行選擇。
         總結：>做用於元素的第一代後代，空格做用於元素的全部後代。 

        8.相鄰兄弟選擇器 div相鄰的標籤
        div + h1{

        }

        9.屬性選擇器 name是屬性
        div[name]{
        }
        div[name][age]{

        }
        div[name="jack"]{
        } 

        10.通用選擇器  
        * {color:red;}
        
        11.僞類選擇器
        它容許給html不存在的標籤（標籤的某種狀態）設置樣式，
        好比說咱們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色：
        a:hover{color:red;}

4.類和ID選擇器的區別

id標籤只能夠一個，class標籤能夠多個
可使用類選擇器詞列表方法爲一個元素同時設置多個樣式

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學期時，咱們班上了一節公開課...</p>

#id不能夠

4.標籤優先級

        /*通配符  優先級是0*/
        *{

        }

        /* 標籤選擇器  優先級是1*/
        div{
        }

        /* 類標籤選擇器 優先級是10*/
        .first{
        }

        /*選擇器組合 優先級是11*/
        div.first{
        }

        /* id標籤選擇器 優先級是100*/
        #second{
        }

        /* 羣組選擇器 優先級是100+1+1*/
        .first,#second,h1{
        }
        
        /* important 優先級最大*/
        * {
            color: yellow !important;
        }

5.屬性

6.文字排版

1.字體
body{font-family:"Microsoft Yahei";}

2.字號、顏色
body{font-size:12px;color:#666}
body{font-size:20px;color:red;}

3.文字的樣式:粗體、斜體、下劃線、刪除線
p span{font-weight:bold;}粗體：body 斜體：italic
span{text-decoration:underline;}下劃線:underline 刪除線：line-through

4.縮進
經常使用語段落前2個空
p{text-indent:2em;}

5.行間距
p{line-height:1.5em;} 1.5倍

6.字間距
letter-spacing:50px; 字母與字母之間的間距
word-spacing:50px;   單詞與單詞之間的間距

7.對齊
text-align:center;text-align:left;text-align:right;

7.元素分類

1.分類
在CSS中，html中的標籤元素大致被分爲三種不一樣的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

經常使用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

經常使用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

經常使用的內聯塊狀元素有：

<img>、<input>

2.元素轉換
內聯元素轉換爲塊狀元素，從而使a元素具備塊狀元素特色。
a{display:block;}
將塊狀元素div轉換爲內聯元素，從而使 div 元素具備內聯元素特色。
div{ display:inline;}


3.塊狀元素
一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）
二、元素的高度、寬度、行高以及頂和底邊距均可設置。
三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

4.內聯元素
一、和其餘元素都在一行上；
二、元素的高度、寬度及頂部和底部邊距不可設置；
三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

5內聯塊狀元素（inline-block）
就是同時具有內聯元素、塊狀元素的特色，

8.盒模型

1.邊框 
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
縮寫：
div{border:2px  solid  red;}

單獨邊框
div{border-bottom:1px solid red;}

1）、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）。

2）、border-color（邊框顏色）中的顏色可設置爲十六進制顏色

2.盒模型長寬度指的是填充長寬度


3.元素與其它元素之間的距離可使用邊界（margin）來設置

9.脫離標準流的方法有

float屬性(浮動模型)

        div{
            background-color: red;
            width: 100px;
            text-align: center;
        }
        .first {
            float: right;
        }
        .second{
            float: right;
        }
    </style>
</head>
<body>

<div class="first">123</div>
<div class="second">456</div>

2.position屬性（層模型）

絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)

    <style type="text/css">
     1.相對定位
     而後相對於之前的位置移動，移動的方向和幅度由left、right、top、bottom屬性肯定，偏移前的位置保留不動。
     ps:相對於之前的位置
        div{
            background-color: red;
            width: 150px;
            height: 150px;
            margin-top: 100px;
            margin-left: 100px;
            position: relative; /*相對的*/

        }
    
     2.絕對定位
        使用left、right、top、bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行絕對定位。
        若是沒有父包含塊，默認爲body
        span{
            background-color: blue;
            position: absolute;/*絕對的*/
            left: 50px;
            top: 50px;
        }
        
     3.固定定位
     與absolute定位類型相似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）自己。
     因爲視圖自己是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化
       #div1{
          width:200px;
          height:200px;
          border:2px red solid;
          position:fixed;
          left:100px;
          top:50px;
      }
</head>
<body>
</style>
<div>
    <span>123</span>
</div>

    4.相對於其它元素進行定位
     使用position:absolute能夠實現被設置元素相對於瀏覽器（body）設置定位之後，
     你們有沒有想過可不能夠相對於其它元素進行定位呢？能夠的只要父相子絕

    #box3{
       width:200px;
       height:200px;
       position:relative;       
   }
   #box4{
      width:99%;
      position:absolute;	
      bottom:0px;
   }

    <h1>下面是任務部分</h1>
    <div id="box3">
    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
    <div id="box4">當我仍是三年級的學生時是一個害羞的小女生。</div>
    </div>

10.代碼縮寫

1.盒模型代碼簡寫
1）順時針，上 右 下 左
margin:10px 10px 10px 10px;
2）都相同時候能夠縮寫：
margin:10px
3）若是top和bottom值相同、left和 right的值相同：
margin:10px 20px;
4）若是left和right的值相同
margin:10px 20px 30px 20px;
可縮寫爲：margin:10px 20px 30px;

2.顏色值縮寫
關於顏色的css樣式也是能夠縮寫的，當你設置的顏色是16進制的色彩值時，若是每兩位的值相同，能夠縮寫一半。
p{color: #336699;} 縮寫：p{color: #369;}

3.字體縮寫
字體css樣式代碼也有他本身的縮寫方式，下面是給網頁設置字體的代碼：
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}
縮寫：
body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
}
一、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其餘的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用默認值。
二、在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。

11.顏色值

一、英文命令顏色
p{color:red;}
二、RGB顏色
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
三、十六進制顏色
p{color:#00ffff;}

12.長度值

一、像素

二、em
就是本元素給定字體的 font-size 值，若是元素的 font-size 爲 14px ，那麼 1em = 14px；
p{font-size:12px;text-indent:2em;}
但當給 font-size 設置單位爲 em 時，此時計算的標準以 p 的父元素的 font-size 爲基礎。
p{font-size:14px}
span{font-size:0.8em;}

三、百分比
設置行高（行間距）爲字體的130%（12 * 1.3 = 15.6px
p{font-size:12px;line-height:130%}

13.各類居中

1.水平居中設置-行內元素
若是被設置元素爲文本、圖片等行內元素時，水平居中是經過給父元素設置 text-align:center 來實現的

2.塊狀居中設置
1）定寬塊狀元素：塊狀元素的寬度width爲固定值
div{
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}
2）不定寬度的塊狀元素：
 a.加入 table 標籤
 b.設置 display: inline 方法：與第一種相似，顯示類型設爲 行內元素，進行不定寬元素的屬性設置
 c.設置 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的

3.垂直居中
1）父元素高度肯定的單行文本
設置父元素的 height 和 line-height 高度一致來實現的。
2)父元素高度肯定的多行文本
 a.使用插入table(包括tbody、tr、td)標籤，同時設置 vertical-align：middle。
   還能夠設置display：table-cell強制改變父元素的渲染方式，並顯示的設置vertical-align:middle令子元素垂直居中
ps: td 標籤默認狀況下就默認設置了 vertical-align 爲 middle，因此咱們不須要顯式地設置了。
   <table><tbody><tr><td class="wrap">
     <div>
      <p>看我是否能夠居中。</p>
      <p>看我是否能夠居中。</p>
      <p>看我是否能夠居中。</p>
      <p>看我是否能夠居中。</p>
      <p>看我是否能夠居中。</p>
    </div>
  </td></tr></tbody></table>
 b.在 chrome、firefox 及 IE8 以上的瀏覽器下能夠設置塊級元素的 display 爲 table-cell（設置爲表格單元顯示）
，激活 vertical-align 屬性，
  <style>
     .container{
        height:300px;
        background:#ccc;
        display:table-cell;
        vertical-align:middle;
       }
     </style>
 c.元素（不論以前是什麼類型元素，display:none 除外）設置如下 2 個句之一：
 1. position : absolute 
 2. float : left 或 float:right 
    .container a{
       position:absolute;
	   width:50%;
       margin:200px 50%;
   }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。