6.6 CSS歸納

時間 2019-11-08

標籤 6.6 css 歸納欄目 CSS 简体版

原文原文鏈接

CSS:美化頁面層疊樣式表修改標籤樣式css

1、分類：內聯內嵌外部引用html

（1）內聯: 寫在標籤裏面，以屬性的形式表現屬性名爲styleweb

（2）內嵌：寫在head標籤裏面，以標籤的形式表現標籤名stylespa

（3）外部引用：寫在head標籤裏面以標籤的形式表現標籤名 link指針

2.選擇器格式：code

選擇器｛htm

樣式屬性值：樣式值；blog

樣式屬性值：樣式值；教程

｝utf-8

選擇器：找元素經過各類方式例如：標籤名 id屬性值

標籤選擇器：經過標籤名找標籤

id選擇器：經過id屬性值找元素關鍵符號 #id值

實例:

css中

#style2{

font-size: 30px;

skyblue;

}

html中

1.class選擇器：經過class屬性值找元素關鍵符號 .class值

一個標籤能夠有多個class值加空格就是兩個

2.後代選擇器：選擇器1 選擇器2{}

3.子類選擇器：選擇器1>選擇器2{}

4.並列選擇器：選擇器1，選擇器2……{}

5.僞類選擇器：選擇器：僞類 hover

6.通用選擇器：*{ padding：0px 內邊距

Margin：0px 外邊距}

/*使用通用選擇器對外邊距和內邊距清零*/

在元素中類選擇器是能夠多個一塊兒使用的，若是在多個類選擇器中，贊成屬性樣式重複定義，那麼，之後面那個選擇器爲準。

：<span class="style1 style2 style3">內容</span>

優先級概念權值權值越高優先級越高

行內優先級最高 1000

Id 100

Class 10

標籤 1

* 0

綜合實例：

@CHARSET "UTF-8";  
/*類選擇器*/  
.style1 {  
    font-weight: bold;  
    font-size: 20px;  
    background-color: pink;  
    color: blue;  
}  
  
.style3 {  
    font-style: italic;  
    text-decoration: underline;  
    color: green;  
}  
  
/*ID選擇器*/  
#style2 {  
    font-weight: 30px;  
    background-color: silver;  
    color: black;  
}  
  
/* 父子選擇器 */  
#style2 span {  
    font-style: italic;  
    color: red;  
}  
  
#style2 span span {  
    font-weight: bold;  
    color: green;  
}  
  
/*標籤選擇器*/  
body {  
    color: yellow;  
}  
  
/* 通配符選擇器 */  
* {  
    margin: 5px 0px 0px 0px;  
    padding: 0px;  
}  
  
/*超連接的4種狀態*/  
/*  
    a:link - 普通的、未被訪問的連接  
    a:visited - 用戶已訪問的連接  
    a:hover - 鼠標指針位於連接的上方  
    a:active - 連接被點擊的時刻  
 */  
a:LINK {  
    color: black;  
    text-decoration: none;  
}  
  
a:VISITED {  
    color: silver;  
    text-decoration: overline;  
}  
<pre name="code" class="css">a:HOVER {  
    text-decoration: underline;  
}

CSS 屬性定義背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

<a>標籤屬性

運行代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link rel="stylesheet" href="">
<style>
    div{
            width: 100px; 
            height: 100px; 
            background: blue;
    }
    #mar{
        background: yellow;
    }    
    div div{
        width: 30px;
        height: 20px;
        background: #AC0BA6;
    }
    body{
        background: #F0FB34;    
    }
</style>
    
</head>

<body>
      <div id="mar">1
      <div>1-1</div>
      </div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
</body>
</html>

運行結果:

背景色的實現：

<!DOCTYPE html>
<html>
    <head>
              <meta charset="utf-8"> 
              <title>菜鳥教程(runoob.com)</title> 
   <style>
        body
               {
              background-color:#b0c4de;
      }
   </style>
</head>
<body>
<h1>個人 CSS web 頁!</h1>
<p>你好世界！這是來自 runoob 菜鳥教程的實例。</p>
</body>
</html>

運行結果：

登錄頁面實現：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超人登錄</title>
</head>

<body>

 <table border="1" align="center" cellpadding="8" cellspacing="0">
      <h1 align="center">登錄</h1>
     <tr>
         <td>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             帳號：<input type="text" style="width: 200px;height: 40px" ><br><br>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            密碼：<input type="text" style="width: 200px;height: 40px"><br><br>
             確認密碼：<input type="text" style="width: 200px;height: 40px"><br><br>
              &nbsp;&nbsp;&nbsp;&nbsp;
              驗證碼：<input type="text" style="width: 200px;height: 40px" value="輸入驗證碼">
                <input type="button" value="獲取驗證碼"><br><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<a href="首頁.html" target="_blank"> <input type="button" name="登錄" value="登錄">
            </a>
        </td>
     </tr>
 </table>
</body>
</html>

運行結果：

首頁實現：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超人</title>
    <style type="text/css">
        td{ width: 100px;height: 50px}
    </style>
</head>

<body>
<table border="1" align="center">
    <tr>
        <td>編號</td>
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
        <td>操做</td>
    </tr>
    <tr>
        <td>007</td>
        <td>大黃蜂</td>
        <td>男</td>
        <td>未知</td>
        <td><a href="簡歷.html#我的簡歷3">查看信息</a></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

運行結果：

Ending......

1. HTML、CSS與JavaScript的歸納
2. CSS 知識點歸納
3. css table佈局歸納
4. ***HTML +CSS 總結與歸納
5. 6.6 CSS概括
6. mysql歸納
7. spark-hadoop歸納
8. git 歸納
9. C總結歸納
10. XMLHttpRequest 使用歸納
更多相關文章...
• Scala 遞歸函數 - Scala教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 算法總結-歸併排序
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

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