MOOC Web前端筆記（二）：CSS樣式

来源:https://www.cnblogs.com/z-y-k/archive/2019/10/15/11676935.html
-Advertisement-
Play Games

CSS樣式 CSS概述 CSS Cascading Style Shees層疊樣式表 HTML定義網頁的內容，CSS定義內容的樣式。 內容和樣式相互分離，便於修改樣式。 CSS語法 註意：1.最後一條聲明可以沒有分號，但是為了以後修改方便，一般也加上分號。 2.為了使用樣式更加容易閱讀，可以將每條代 ...


CSS樣式

CSS概述

CSS--Cascading Style Shees層疊樣式表
HTML定義網頁的內容，CSS定義內容的樣式。
內容和樣式相互分離，便於修改樣式。

CSS語法

p{
    font-size:12px;/*字型大小*/
    color:bule;  /*文字顏色*/
    font-weight:bold;  /*加粗*/
}

註意：1.最後一條聲明可以沒有分號，但是為了以後修改方便，一般也加上分號。
2.為了使用樣式更加容易閱讀，可以將每條代碼寫在一個新行內。

CSS添加方法

CSS添加方法--行內

直接把屬性放在標簽內部。
<p style="color:red;">

CSS添加方法--內嵌樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
    p{
        color:red;
    }
    </style>
</head>
<body>
    <p>此時我是紅色的</p>
</body>
</html>

註意：即使有公共CSS代碼，也是每個頁面都要定義的。
適合文件很少，CSS代碼也不多的情況。
如果一個網站有很多頁面，每個文件都會變大，後期維護難度也大。

CSS添加方法--單獨文件

外部式樣式表文件style.css

p{
    color:red;
}

網頁文件：1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <p>此時我是紅色的</p>
</body>
</html>

subtime擴展方法：link:csss
單獨文件優點：
頁面結構HTML代碼與樣式CSS代碼完全分離
維護方便
如果需要改變網站風格，只需要修改公共CSS文件。
可以在同一個HTML文檔中引用多個外部樣式表。

CSS添加方法--優先順序

多重樣式可以層疊，可以覆蓋。
樣式的優先順序按照“就近原則”。
行內樣式>內嵌樣式>鏈接樣式>瀏覽器預設樣式。

CSS選擇器

CSS選擇器類型：

標簽選擇器

以標簽為名字，如：
CSS:

<style type="text/css">
body{
    background:center;
    font-size:12px;
}
h1{font:"黑體";font-size:20px;}  
p{color:red;font-size:16px;}  
hr{width:200px}  
</style>

HTML：

<body>
    <h1>標題</h1>
    <hr>
    <p>正文的段落</p>
</body>

類別選擇器

以類別為名字
如：
CSS：

<style type="text/css">
    p{font-size:12px;}
    .one{font:"黑體";font-size:20px;}  
    .two{color:red;font-size:16px;}  
</style>

HTML：

<body>
    <p class="one">類別1</p>
    <p class="two">類別2</p>
    <p>正文的段落</p>
</body>

ID選擇器

以ID為名字：
如：
CSS：

<style type="text/css">
    #one{font-size:12px;}
    #two{font:"黑體";font-size:20px;}  
</style>

HTML：

<body>
    <p id="one">類別1</p>
    <p id="two">類別2</p>
</body>

ID與class 的區別：一個ID在當前文件中只可以被引用一次。

嵌套聲明

span標簽的嵌套聲明：
CSS：

<style type="text/css">
    p span{font-size:12px;}
</style>

HTML：

<body>
    <p><span>正文的段落<span></p>
</body>

集體聲明

選擇器用，隔開可以聲明進行集體聲明
CSS：

<style type="text/css">
    h1,p{font-size:12px;}
</style>

HTML：

<body>
    <h1>標題</h1>
    <p>正文的段落</p>
</body>

全局聲明

用*代表全局聲明
CSS：

<style type="text/css">
    *{text-align:center;}
</style>

HTML：

<body>
    <h1>歡迎</h1>
    <p>正文的段落</p>
</body>

混合

多個class選擇器混用，用空格分開
<div class="one yellow left">oneyellowleft</div>
id和class混用
<div id="my" class="one yellow left">myoneyellowleft
id選擇器不可以多個同時使用

CSS樣式(1)文字樣式

CSS樣式的常用單位

1.px：像素
2.em：1em-一個字元，2em-2個字元，自動適應用戶所使用的字體。
3.%：百分比
百分比的相對值遵循DOM樹的繼承：
TIM截圖20191015104206.png

顏色

1.直接用顏色名字，如：red、blue、green 詳見W3Cschool
2.rgb(x,x,x) RGB值，每個顏色分量取值0-255，如紅色rgb(255,0,0).
3.rgb(x%,x%,x%) RGB百分比值，如：紅色rgb(100%,0%,0%)
4.rgba(x,x,x,x) RGB值，透明度 a值：0.0(完全透明)與1.0(完全不透明)，如，紅色半透明rgba(255,0,0,0.5,)
5#rrggbb 十六進位數，如紅色：#ff0000或#f00(去掉重覆位)

文本可設置樣式

1.color 文本顏色 如：red #f00 rgb(255,0,0)
2.letter-spacing 字元間距 2px -3px 1em (如果像素為負數，則字元重疊)
3.line-height 行高 14px 1.5em 120% （em相對於字型大小大小，我們一般利用行高進行垂直居中，把行高設為與元素高度相等，即可做到垂直居中）
4.text-align 對齊 center left right justify(兩端對齊)
5.text-decoration 裝飾線 none(一般用來去掉預設超鏈接的下劃線) overline(上面有線) underline(下麵有線) line-through(中間有線，刪除線)
6.text-indent 首行縮進 2em

字體可設置樣式

1.font 在一個聲明中設置所有的字體屬性 如：font:bold 18px '幼圓'
2.font-family 字體系列 如：font-family:"HiraginoSans GB","Micrsoft YaHei"（設置多個字體，第一個沒有就用第二個，以此類推，如果字體名字中有空格，需要加引號，否則可以不加）
3.font-size 字型大小 如：14px 5pt(榜值) 120%
4.font-style 斜體 如：italic
5.font-weight 粗體 如：bold
當使用font一次性聲明字體樣式時有一定的順序
font:斜體 粗體 字型大小/行高 字體
如：font:italic bold 16px/1.5em '宋體'；

CSS樣式(2)背景與超鏈接

背景可設置樣式

1.background-color:見上一節(註意：對於背景顏色和圖片，如果標簽內元素為空，需要先指定其標簽的長寬才能顯示出顏色或者圖片)
2.background-image:url("logo.jpg")（背景圖片會覆蓋背景顏色）
3.background-repeat(表示背景圖片的填充方式): repeat(雙向填充),repeat-x(橫向填充),repeat-y(縱向填充),no-repeat(只顯示一次)
4.background:顏色 圖片 repeat

鏈接的四種狀態

1.a:link - 普通的、未被訪問的鏈接
2.a:visited - 用戶已訪問的鏈接
3.a:hover - 滑鼠指針位於鏈接的上方懸停(必須位於a:link和a:visited之後)
4.a:active - 鏈接被點擊的時刻(必須位於a:hover 之後)
我們把這類選擇器名稱為：偽類選擇器。

CSS樣式(3)列表、表格樣式

列表可設置樣式

list-style 所有用於列表的屬性，設置於一個聲明中。
list-style-image 為列表項標誌設置圖像 詳見上一節背景圖片。
list-style-position 標誌的位置 inside,outside（一個在裡面，一個在外面）。
list-style-type 標誌類型：太多了，看圖吧。
TIM截圖20191015115355.png

表格可設置樣式

width,height 屬性：寬、高。
border 屬性：邊框寬度，（在後面盒子模型中和詳細說，這裡簡單說）。
border-collpase：表格合併

nth-child(odd|even)：奇偶選擇器

一般用來設置表格隔行顏色不一樣，方便用戶瀏覽。如下圖：
TIM截圖20191015122111.png
例如：tr:nth-child(odd|even)（註意括弧里可以帶數字，直接說明是第幾個元組，亦可以用odd和even說明奇偶性）
{
background-color:#EAF2D3;
}
註意：奇偶是從第一行表頭開始數的。


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

-Advertisement-
Play Games
更多相關文章
  • Vue-cli父子組件之間傳參
    一.父傳子( 父組件 子組件 二.子傳父 子組件 父組件 ...
  • Web高性能動畫及渲染原理（1）CSS動畫和JS動畫
    示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] 一. CSS動畫 和 JS動畫 Web動畫的本質是元素 狀態改變造成的樣式變更 ，CS ...
  • null和undefined的異同
    不知道你們有沒有發現，null和undefined竟然有這樣的關係~ ...
  • 搭建vue開發環境
    Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關註視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。 那麼在windows系 ...
  • js處理非同步的幾種方式
    一、回調函數 優點：簡單，方便，易用 缺點：易造成回調函數地獄，回調函數中嵌套多個回調函數，因為多個非同步操作造成強耦合，代碼亂做一團，無法管理。 二、事件監聽 優點：與回調函數相比，事件監聽實現了代碼的解耦，方便代碼管理 缺點：使用不方便，每次都要手動地綁定和觸發事件 三、Promise 優點：將回 ...
  • React 項目引入 Dva
    背景 現在手上在做的 React 項目因為年代久遠，用的 "Redux" ，寫代碼的體驗不太好，所以想升級一下引入 dva。以往使用 dva 都是使用 "dva cli" 直接生成 dva 項目，或者在使用 "ant design pro" 的時候使用 umi 直接生成 react + antd + ...
  • 關於javascript的事件執行機制理解
    理解javascript事件執行機制 眾所周知，js是一個單線程的語言，這意味著同一時間只能做一件事，但是我們又說js是非同步的。首先，單線程並不是沒有優點。作為瀏覽器腳本語言，JavaScript 的主要用途是與用戶互動，以及操作 DOM。這決定了它只能是單線程，否則會帶來很複雜的同步問題。比如，假 ...
  • js實現淺拷貝和深拷貝
    簡單的描述了淺拷貝和深拷貝的區別後，分別進行實現且所有方法都已進行試驗。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類