CSS3基礎知識

時間 2019-12-26

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

原文原文鏈接

CSS3基礎 1 樣式表的使用 1.內聯樣式表。隻影響單個元素，經常使用於標籤。
<p style="color: aqua;font-size: 20px">This is CSS.</p>

2.內部樣式表。對本頁面元素起做用，通常寫在<head></head>中，用<style></style>定義。
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
       body{
              font-family: "宋體";
       }
       </style>
</head>

3.鏈接外部樣式表。創建一個外部CSS文件用link元素引入到HTML中。
<link rel="stylesheet" type="text/css" href="CSS/realtest.css">

總結：
CSS內聯：就是把CSS放在HTML Head裏使用Style包圍。<style type="text/css"></style>
CSS外聯：就是把CSS放到一個單獨的文件裏，而後在HTML經過調用。<link rel="stylesheet" type="text/css" href="">。
咱們知道HTTP請求是比較昂貴的，CSS內聯的話確定會更快，由於把CSS放到HTML文件裏，這意味着減小了一次HTTP請求。而外聯的話就是一次HTTP請求，可是能夠緩存，當瀏覽器加載過這個文件時，第二次請求的時候是第緩存裏讀取的，因此第二次請求時是很快的，外聯的CSS還能夠重用代碼。那究竟是使用內聯仍是外聯呢？這就要看需求，若是一個頁面不須要緩存時，也就是這個頁面不太訪問，或者訪問很少的時候，好比註冊頁面，通常狀況下人家只會進入一次，不可能第次進入這個網站你都去註冊，那就另當別論了，這個頁面不須要緩存，把CSS放在Head裏時能夠縮短加載時間，提升用戶體驗。對於常常訪問的頁面，外聯確定是不二的選擇。
在一些大的網站，如：Google，Yahoo也能夠看到把CSS寫在Head裏。對於結構表現行爲分離的原則，咱們對於CSS入在Head裏是能夠接受的，只要不是寫在元素上面。
Copyright@Kingwell Leng

2 定義選擇器選擇器分兩個種類，第一種爲DOM選擇器，包含類型選擇器、類選擇器和選擇元素一部分和ID選擇器，第二種包含僞選擇器。

1.按照類型選擇元素。        以標籤爲單位來設置相同的顯示樣式，不須要定義前綴符。
<style>
       p{
              font-family: "宋體";color: red;
       }
       a{color: #ADADAD;}
       </style>

2.按照類型選擇標籤。        以標籤樣式類型選擇爲選擇條件，類型爲class，「.」爲前綴，能夠對多個標籤應用樣式，也能夠派生樣式。
<head>
<style type=」text/css」>
       .anyname{
              font-family: "宋體";
              color: #ADADAD;
              width: 100px;
              height: auto;
              border: 1px solid blue;
       }
       </style>
</head>
<body>
       <p>This is CSS.</p>
       <div class="anyname">
              <p>This is CSS!</p>
       </div>
</body>

3.按照ID選擇元素        相似與類型選擇器，以「#」爲前綴，在標籤中加入id屬性引用樣式。
<head>
<style type="text/css">
       #box{
              font-family: "宋體";
              color: #ADADAD;
              width: 100px;
              height: auto;
              border: 1px solid blue;
       }
       </style>
</head>
<body>
       <p>This is CSS.</p>
       <div id="box">
              <p>This is CSS!</p>
       </div>
</body>

4.選擇元素的一部分        單獨選擇元素從而不影響其餘元素，有子元素選擇器和多重元素選擇器。
1)子元素選擇器
h1>strong{color:red;}
或者：h1 strong{color:red;}
注：只對第一層有效
2)多重元素選擇器
       優勢在於避免過多的id、class屬性設置，直接對所需元素進行定義。
#anyname p li a{float:right; color:#ADADAD;}
3)選擇部分元素
       實現多個元素或標籤設置爲同同樣式。
<style type="text/css">
html {color:black;}
p {color:blue;}
h2 {color:silver;}
</style>
      php

僞類選擇器 CSS中已經定義好的選擇器，不能夠重命名。

1)標籤中的集中選擇器

       a:link表示未訪問的連接
a:visited表示已訪問的連接
a:hover表示鼠標懸停的連接
a:active表示選定的連接（被按下時）
注：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。
在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。
如：a:link{color:#ADADAD;text-decoration:none;}/none表示將默認下劃線去掉/

2)CSS中四個僞元素選擇器
       First-line       對所選標籤元素的第一行應用樣式   p:first-line{color:red;}
       First-letter     對所選標籤元素的文字首字母應用樣式   p:first-letter{color:bule;}
       Before           在某個元素前插入一些內容      li:before{content:」^^^」;}
After              在某個元素後插入一些內容      li:after{content:」(僅用於測試)」;}

3 文本與排版樣式的使用 1. 長度、百分單位        像素（px）與百分比是經常使用的長度單位。
在沒有CSS規則限制下，長度關係：1em(相對單位)==16px(像素)==0.17in(英寸)==12pt(點)==1pc(派卡)==4.2mm(毫米)==0.42cm(釐米)
css

文本樣式屬性 1) text-shadow 文字陰影。

       div {
              text-shadow: 10px 10px 10px orange,/x偏移量，y偏移量，模糊半徑，顏色/
                                   40px 40px 40px yellow,
                                   20px 20px 23px #ADADAD;/設置多個文字陰影/
              font-size: 50px;
              font-weight: bold;/{normal|bold|bolder|lighter|inherit}/
              font-family: "宋體";
              color: navy;
       }

2) word-wrap 文本的控制換行。用於指定區域如div顯示不完一行文字的時候爲了避免超出區域範圍而使用的強制換行。
       Word-wrap; normal | break-word
       *normal 只能在兩個單詞之間折斷，break-word容許詞內換行

3) webfont與font-face CSS3中webfont功能使網頁上能顯示服務器端的字體。
       使用方法：直接在<style></style>中插入如下代碼
@font-face{
              font-famliy:WebFont;
              src: url('Font_Sans_R_45b.otf')format("opentype");/應用服務器端字體/
              font-weight: normal;
       }

4) font-size-adjust 能夠保持字體在大小部發生變化的狀況下改變字體的類型。
font-size-adjust: 0.46;

5) text-ouline與text-stroke 輪廓控制屬性。
Text-outline: 2px 4px red;   /寬度，模糊半徑，顏色/

       Text-stroke   描邊控制
-webkit-text-stroke:3px #ADADAD;         /寬度，顏色/

4 背景和顏色的使用 1. 背景顏色        網頁背景顏色設置：Background-color: transparent | color /透明或者設置顏色/
       HSLA：/色調(0-360,0&360==red,120==green,240==bule)，飽和度(100%)，亮度(100%)，透明度(0~1)/
              div.a{background:hsla(120,35%,50%,0.2);height: 20px;}
html

背景圖片格式以下：

              Body{background-img:url(../picture.jpg);}
關於background還有一些屬性如-cilp、origin、size等控制背景圖片位置等屬性

5 盒子概念與使用 1. 元素外邊界。        外邊界定義了矩形對象與其餘矩形對象的距離，即模塊與模塊之間的空隙。
margin-bottom: 10px;/下邊界/
              margin-left: 20px;/左邊界/
padding: 40px 30px 20px 60px;/上下左右邊界/
              margin: 0 auto;/auto居中/web

元素邊框能夠定義邊框粗細。

border: 50px #ADADAD;/定義粗細，顏色/
border-style: solid dotted double dashed;/上下左右邊框單獨設置樣式/
border-style屬性：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
瀏覽器

元素內邊界內容與邊框的空隙，與外邊界屬性相似。

padding: 40px;
設置一個的時候表示上下左右距離同樣，也能夠用分別設置上下左右邊界距離。
padding: 40px 30px 20px 60px;
緩存

內容的寬度、高度設置在設置邊框的時候能夠一同定義內容的寬高度。

div.a{
              background:hsla(120,35%,50%,0.2);height: 20px;width:200px;
              margin-bottom: 10px;/外邊界定義/
              margin-left: 20px;
              margin: 0 auto;
              padding: 40px 30px 20px 60px;/內邊界定義/
              height: 100px;/寬高度定義/
              width: 100px;
              border: 50px #ADADAD;/邊框定義/
              border-style: solid dotted double dashed;
       }

服務器

列表樣式常見的列表屬性值

       list-style-type /設定引導列表的符號類型/
       list-style-image /選擇圖像做爲項目的引導符號/
       list-style-position /決定列表項目縮進/
       常見的列表符號屬性
              Circle                   設定類型
              Square                 圖像
              Decimal                阿拉伯數字
              Lower-roman       小寫羅馬數字
              Wpper-roman      大寫羅馬數字
              Lower-alpha         小寫字母
              Wpper-alpha       大寫字母
              None                    不現實項目符號
              Disc                      實心圓
       在style中使用列表樣式
              List-style-type:decimal;

注：
//-ms表明ie內核識別碼
//-moz表明火狐內核識別碼
//-webkit表明谷歌內核識別碼
//-o表明歐朋【opera】內核識別碼
//統標識語句句寫符合w3c標準
2017-11-15
轉載於猿2048:➤《CSS3基礎知識》測試

相關標籤/搜索

每日一句

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