CSS小記

時間  2021-01-30
標籤 css html 瀏覽器 ide 佈局 字體 url code orm htm 欄目 CSS 简体版
原文   原文鏈接

CSS小記

1.CSS簡介

CSS（Cascading Style Sheet）層疊樣式表；決定了如何顯示HTML元素；由W3C創造css

1. 特色

  1. 樣式一般儲存在樣式表中
  2. 外部樣式表一般存儲在 css文件中
  3. 多個樣式定義可層疊爲一

2. 引入方式

  1. 行內式：即標籤中用style標籤設定css樣式（不推薦）html

  2. 內嵌式：在成對的head標籤中嵌入style標籤（對於多個網頁，若修改樣式麻煩）瀏覽器

  3. 導入式ide

    將一個獨立的.css文件引入html文件中，導入式使用css規則引入外部css文件佈局

    <head>
	<style type="text/css">
		@import"mystyle.css";
	</style>
</head>

    缺點：導入式會在整個網頁裝載完後再裝載css文件；這就形成了一個問題字體

    ​ 若網頁比較大則會出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式url

  4. 連接式code

    此方式 也是將一個.css文件引入到html文件中，但它與導入式不一樣的是使用html規則引入外部css文件orm

    <head>
	<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>

    優點：在網頁文件主體裝載前裝載完成，顯示出的網頁一開始就是帶樣式效果的htm

3. 層疊次序（優先級）

問：當同一個 HTML 元素被不止一個樣式定義時，會使用哪一個樣式呢？

答：通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字4擁有最高優先級

  1. 瀏覽器缺省設置
  2. 外部樣式表
  3. 內部樣式表(位於head標籤內部）
  4. 內聯樣式（在html文檔的元素標籤內部）

2. CSS語法

1. 基礎語法

  1. 簡介

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

    選擇器一般是您須要改變樣式的html元素

    每一條聲明由一個屬性和一個值組成

  • 注意:

    1. 若值爲若干單詞，則要給值添加引號

      p {font-family:"sans serif"}

    2. css 對大小寫不敏感；注意空格以便編輯

      body {
	color: #0000;
	margin: 0;
	padding: 0;
}

2. 高級語法

1. 選擇器分組

h1,h2,h3,h4,h5,h6{   /*用逗號隔開*/
	color:green;
}

2.繼承

子元素從父元素繼承屬性

body {
    font-family:Verdana,sans-serif;
}
/*body裏面的全部子元素都使用 Verdana字體*/

若要擺脫繼承，能夠獨立建立一個針對某標籤的特殊規則

body {
    font-family:Verdana,sans-serif;
}
p {
   font-family:Times,"Times New Roman",serif; 
}

3. 選擇器分類

1. id 選擇器
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #red {color: red;}
            #green {color: green;}
        </style>
    </head>
    <body>
        <p id="red">這個段落是紅色</p>
        <p id="green">這個段落是綠色</p>
    </body>
</html>
2. class 選擇器
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            .center {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1 class="center">
        	This heading will be center-aligned
        </h1>
        
        <p class="center">
        	This paragraph will also be center-aligned
        </p>
    </body>
</html>

class選擇器和派生選擇器

.fancy td {
    color: #f60;
    background: #666
}
/*在上述列子中，類名爲fancy的更大的元素內部的表格單元都會以灰色背景顯示橙色文字
	（名爲fancy的更大元素多是一個表格或div）*/

元素也能夠基於它們的類而被選擇

td.fancy{
    color: #f60;
    background: #666; 
}
<!--在上述列子中，類名爲fancy的表格單元將是帶有灰色背景的橙色文字
	僅僅做用於td元素下的.fancy類-->
3. 派生選擇器

經過依據元素在其位置的上下文關係來定義樣式，使標記更加簡潔

<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            li strong {
                font-style: italic;
                font-weight: normal;
            }
        </style>
    </head>
    <body>
        <p>
            <strong>
            	我是粗體字
            </strong>
        </p>
        <ol>
            <li>
                <strong>
                	我是斜體字，這是由於我是在li列表中
                </strong>
            </li>
            <li>
            	我是正常字體
            </li>
        </ol>
    </body>
</html>

id選擇器和派生選擇器

在現代佈局種，id選擇器經常用於創建派生選擇器

<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #sidebar p {
                font-style: italic;
                text-align: right;
                marign-top: 0.5em;
                color:red;
            }
        </style>
    </head>
    <body>
        <p id="sidebar">這個段落是紅色</p>
        <p id="green">這個段落是綠色</p>
    </body>
</html>
4. 屬性選擇器

對帶有指定屬性的html元素設置樣式

[title] {
	color: red;
}

屬性和值選擇器（單個值）

[title="W3School"] {
    border: 5px solid blue;
}

屬性和值選擇器（多個值）

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
[title~=hello]       /*適用於由空格分隔的屬性值*/
{
color:red;
} 
</style>
</head>

<body>
<h1>能夠應用樣式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />

<h1>沒法應用樣式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
[lang|=en]				/*適用於由連字符分隔的屬性值*/
{
color:red;
}
</style>
</head>

<body>
<h1>能夠應用樣式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />

<h1>沒法應用樣式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>

經常使用場景：設置表單的樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>
</body>
</html>
5. 後代選擇器

後代選擇器亦包含選擇器；能夠選擇做爲某元素後代的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 em {color:red;}     /* 元素em爲h1的後代；兩元素的層次間隔是無限的 */
</style>
</head>

<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
6. 子元素選擇器

若是您不但願選擇任意的後代元素，而是但願縮小範圍，只選擇某個元素的子元素，用此選擇器

子結合符( > )

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}  
/*這個規則會把第一個h1下面的兩個strong元素內容變紅色，其它則不受影響*/
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
7. 相鄰兄弟選擇器

若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，可用此選擇器

相鄰兄弟結合符（ + ）

注意：用一個結合符只能選擇兩個相鄰兄弟中第二個元素

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
/*上面這個選擇器只會把列表中的第二個和第三個列表項變爲粗體;第一個列表項不受影響*/
</style>
</head>

<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
</body>
</html>

結合其它結合符例子

html>body table + ul{
    margin-top: 20px;
}
/*解釋：選擇緊接在table元素後的全部兄弟ul元素，該table元素包含在一個body元素中，body元素自己也是html元素的子元素*/

4. 僞類

css僞類 （ pseudo-classes）用於 向某些選擇器添加特殊 的效果

  1. 語法

    selector/selector.class : pseudo-class{
	property: value;
}

  2. 錨僞類

    連接的不一樣狀態分別以不一樣的方式顯示（對大小寫不敏感）

    a:link {color: #FF0000}			/*未訪問的狀態*/
a:visited {color: #00FF00}		/* 已訪問的狀態*/
a:hover {color: #FF00FF}		/*鼠標移動到連接上的狀態*/
a:active {color:#0000FF}		/*選定的連接*/

/*注意順序，必須按照上面的順序，不然無效*/

  3. 僞類與css類配合使用

    a.red : visited{
    color:#FF0000;
}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

/*假如上面的列子中的連接被訪問過，那麼它將顯示爲紅色*/

5. 僞元素

僞元素（pseudo-element）用於向某些選擇器設置特殊效果

  1. 語法

    selector/selector.class : pseudo-element{
	property: value;
}

  2. after僞元素

    能夠在元素的內容後面插入新內容

    <!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
h1:before {
    content:url(/i/w3school_logo_white.gif)
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>註釋：</b>若是已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支持 content 屬性。
</body>
</html>

    效果：

  3. 反之before僞元素是插在元素內容前面

3. 經常使用CSS

後續跟進……

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