CSS3基礎知識

来源:http://www.cnblogs.com/tianyanzhi/archive/2017/11/15/7839654.html
-Advertisement-
Play Games

CSS3基礎 1 樣式表的使用 1.內聯樣式表。 隻影響單個元素，常用於標簽。 <p style="color: aqua;font-size: 20px">This is CSS.</p> 2.內部樣式表。 對本頁面元素起作用，一般寫在<head></head>中，用<style></style> ...


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>

      

5. 偽類選擇器

       CSS中已經定義好的選擇器，不可以重命名。

1)<a>標簽中的集中選擇器

      

       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(釐米)

 

2. 文本樣式屬性

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;}

 

2. 背景圖片

       格式如下：

              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居中*/

2. 元素邊框

       可以定義邊框粗細。

border: 50px #ADADAD;/*定義粗細，顏色*/

              border-style: solid dotted double dashed;/*上下左右邊框單獨設置樣式*/

border-style屬性：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

 

3. 元素內邊界

       內容與邊框的空隙，與外邊界屬性類似。

              padding: 40px;

設置一個的時候表示上下左右距離一樣，也可以用分別設置上下左右邊界距離。

              padding: 40px 30px 20px 60px;

 

4. 內容的寬度、高度設置

       在設置邊框的時候可以一同定義內容的寬高度。

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;

       }

 

 

5. 列表樣式

常見的列表屬性值

       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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Sublime Text3—Project(項目管理)
    Project 可以理解為項目、工程或者站點，以下稱項目。使用項目管理的好處是：不用將所有文件都放到同一個根目錄，可以將相關但不同路徑的文件組成一個Project，每個項目都是獨立的，文件的狀態等都會被保存，因此只需一個視窗便可以在多個項目中隨意切換。 ...
  • DOM簡介及節點、屬性、查找節點的方法
    DOM(Document Object Modle) 操作文檔的編程介面DOM定義了表示和修改文檔的方法，不能修改css樣式表，在js中使用DOM方法改變元素的css樣式，實質上是在元素上添加行間樣式。DOM對象就是宿主對象，用來操作HTML和xml功能對象的集合。 xml——>xhtml——>ht ...
  • ES之值類型以及堆和棧
    ES的數據類型： 原始類型(值存在棧記憶體中): Number、String Boolean、undefined、null charAt(index)返回該index所在的位元組，charCodeAt(index)返回該index所在位元組的Unicode值。 undefined和null不能和數字進行比 ...
  • 前後端分手大師——MVVM 模式
    之前對 MVVM 模式一直只是模模糊糊的認識，正所謂沒有實踐就沒有發言權，通過這兩年對 Vue 框架的深入學習和項目實踐，終於有了撥開雲霧見月明的感覺。在此記錄一下，算是拋磚了。 ...
  • koa-route模塊
    const Koa = require('koa'); const route = require('koa-route'); const app = new Koa(); const about = ctx => { ctx.response.body = 'Hello World111'; };... ...
  • 邏輯思維和編程的關係
    無數遍的被問到一個問題，沒有邏輯思維是不是學不了編程？“邏輯思維”這個詞，很多人會對它敬而遠之。因為大多人，也包括我在內，我們這些並沒有天生才智的人來說，似乎總認為這是自己不擅長的領域。 ...
  • 圖片載入完成再執行事件
    應用場景：一些圖片較多的頁面，一些需要加上進度條或者百分比讀取等載入效果的頁面，一般移動端頁面用得比較多 ...
  • JavaScript中常見的10個BUG及其修複方法
    如今網站幾乎100%使用JavaScript。JavaScript看上去是一門十分簡單的語言，然而事實並不如此。它有很多容易被弄錯的細節，一不註意就導致BUG。 1. 錯誤的對this進行引用 在閉包或則回調中，this關鍵字的作用域很容易弄錯。舉個例子： Game.prototype.restar ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類