前端筆記-day03

文章目錄

    • 01-初始CSS
    • 02-CSS引入方式
    • 03-標簽選擇器
    • 04-類選擇器
    • 05-id選擇器
    • 06-通配符選擇器
    • 07-畫盒子
    • 08-字體大小
    • 09-文字粗細
    • 10-字體傾斜
    • 11-行高
    • 12-行高垂直居中
    • 13-字體族
    • 14-font復合屬性
    • 15-文本縮進
    • 16-文本對齊方式
    • 17-圖片對齊方式
    • 18-文本修飾線
    • 19-文字顏色
    • 20-調試工具
    • 21-綜合案例
    • 22-CSS簡介

01-初始CSS

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;font-size: 30px;}</style>
</head>
<body><p>體驗</p>
</body>
</html>

02-CSS引入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- link 引入外部樣式表  rel :關系 樣式表 --><link rel="stylesheet" href="./my.css">
</head>
<body><p>zcjkn</p><!-- 行內 style=“CSS屬性” --><div style="color: aqua; font-size: 30px;">x cm md div</div>
</body>
</html>

my.css👇

p{color: red;
}

03-標簽選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>標簽選擇器</title><style>/* 選中同名標簽 設置相同的樣式 */p{color: red;}</style>
</head>
<body><p>這是一個p標簽</p><p>111</p>
</body>
</html>

04-類選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 類名是見名知意   用-隔開 */.red {color: red;}.size {font-size: 30px;}</style>
</head>
<body><!-- 類選擇器可以給多個標簽使用 --><p class="red">ncnjncjn</p><p>kmcxkn</p><!-- 一個標簽可以使用多個類名  class屬性值可以寫多個類名  類名之間用空格隔開 --><div class="red size">        divbiaoq    </div>
</body>
</html>

05-id選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#red {color: aqua;}</style>
</head>
<body><!-- 一個id 同一個頁面只能使用一次 --><div id="red">div標簽</div>
</body>
</html>

06-通配符選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {color: red;}</style>
</head>
<body><!-- 在設置標簽的初期會用到通配符選擇器 主要是用來清楚標簽的默認樣式 --><div>div</div><p>p</p><h1>1</h1><strong>strong</strong><ul><li>1</li><li>2</li></ul>
</body>
</html>

07-畫盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {width: 100px;height: 100px;background-color: red;}.orange {width: 200px;height: 200px;background-color: aqua;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>

08-字體大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 30px;}div {font-size: 16px;}</style>
</head>
<body><p>測試大小</p><div>測試默認大小</div>
</body>
</html>

09-文字粗細

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h3 {font-weight: 400;}div {font-weight: 700;}</style>
</head>
<body><h3>標題</h3><div>div標簽</div>
</body>
</html>

10-字體傾斜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>em {font-style: normal;}div {font-style: italic;}</style>
</head>
<body><em>傾斜</em><div>div</div>
</body>
</html>

11-行高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 20px;/* line-height: 30px; */line-height: 2;/* 行高是數值時  表示字體大小的倍數 */}</style>
</head>
<body><!-- 行高=上間距+文字高度+下間距   等于兩行舉例 --><p>4 Time-series GAN (TimeGAN) TimeGAN 由四個網絡組件組成:嵌入部分、恢復部分、序列生成器和序列判別器。關鍵之處在于,自動編碼組件(前兩個)與對抗組件(后兩個)是聯合訓練的,這樣 ...知乎</p>
</body>
</html>

12-行高垂直居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 100px;background-color: red;line-height: 100px;}</style>
</head>
<body><div>wen<br>zi</div>
</body>
</html>

13-字體族

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-family: 楷體;font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;}</style>
</head>
<body><div>測試文字</div>
</body>
</html>

14-font復合屬性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 傾斜 加粗 大小 字體 *//* font: italic 700 30px/2 楷體 ; *//* font: 30px 楷體; */font: italic 700 30px/2  ;/* 字號和字體必須寫  否則不生效 */}</style>
</head>
<body><div>djsnckj</div>
</body>
</html>

15-文本縮進

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {text-indent: 2em;font-size: 30px;}</style>
</head>
<body><p>因此，大前端的出現是為了滿足這些需求，將前端技術與移動端、桌面端、服務器端等技術進行整合，實現跨平臺、跨設備的應用程序開發。3. 大前端的發展趨勢 大前端是指在不同的終端設...百家號</p>
</body>
</html>

16-文本對齊方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {/* text-align: left; */text-align: center;/* text-align: right; */}</style>
</head>
<body><h1>kcmkdmck</h1><p>因此，大前端的出現是為了滿足這些需求，將前端技術與移動端、桌面端、服務器端等技術進行整合，實現跨平臺、跨設備的應用程序開發。3. 大前端的發展趨勢 大前端是指在不同的終端設...百家號</p>
</body>
</html>

17-圖片對齊方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {height: 300px;}div {text-align: center;}</style>
</head>
<body><!-- text-align 本質是控制內容的對齊方式 ，屬性要設置給內容的父級。如何要設置img標簽 需要在img標簽外嵌套一個div標簽 --><div><img src="./1111.jpg" alt=""></div>
</body>
</html>

18-文本修飾線

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}</style>
</head>
<body><a href="#">a</a><div>div </div><p>kcmkp</p><span> kspan</span>
</body>
</html>

19-文字顏色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {/* color: rebeccapurple; *//* color: rgb(100, 150, 200); *//* color: rgba(0, 0, 0, 0.8); *//* color: #00f; *//* #表示法可以簡寫 */background-color: aquamarine;}</style>
</head>
<body><h1>dcndjncjnjn</h1>
</body>
</html>

20-調試工具

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 調試工具的細節1.如果是錯誤的屬性，有黃色的嘆號2.CSS屬性的前面有多選框，如果勾選，這個屬性生效 ；如果沒有勾選這個屬性不生效*/div{color: rebeccapurple;font-size: 66px;}</style>
</head>
<body><div>測試文字</div>
</body>
</html>

21-綜合案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {height: 300px;}h1 {font-weight: 400;color: #333333;text-align: center;font-size: 30px;}.come-f {color: #999;font-size: 14px;}.p1 {text-indent: 2em;font-size: 18px;}div {text-align: center;}</style>
</head>
<body><h1>在希望的田野上|湖北秋收開鐮 各地多舉措保增產增收</h1><div class="come-f">來源：央視網|2222年22月22日 12：12：12</div><p class="p1"><strong>央視網消息：</strong>眼下湖北秋收已有一段時間。因此，大前端的出現是為了滿足這些需求，將前端技術與移動端、桌面端、服務器端等技術進行整合，實現跨平臺、跨設備的應用程序開發。3. 大前端的發展趨勢 大前端是指在不同的終端設...百家號的私生女山東濟南機場那你參加就惱羞成怒成本下降聰明之處</p><p class="p1">你的空間才能長久的寧靜CDC東京巨蛋就是你猜怎么，課程因此，大前端的出現是為了滿足這些需求，將前端技術與移動端、桌面端、服務器端等技術進行整合，實現跨平臺、跨設備的應用程序開發。3. 大前端的發展趨勢 大前端是指在不同的終端設...百家號迪斯科解放螺絲釘梅蘭芳哪里都是發放</p><div><img src="./1111.jpg" alt=""></a></div><p class="p1">nzjkwangyulin shuode xinp因此，大前端的出現是為了滿足這些需求，將前端技術與移動端、桌面端、服務器端等技術進行整合，實現跨平臺、跨設備的應用程序開發。3. 大前端的發展趨勢 大前端是指在不同的終端設...百家號inzhong shi hubeishengyanfa d zajiaoshuidao bujinchangliangdao</p><p class="p1">此外湖北人還大力推進高標準農因此，大前端的出現是為了滿足這些需求，將前端技術與移動端、桌面端、服務器端等技術進行整合，實現跨平臺、跨設備的應用程序開發。3. 大前端的發展趨勢 大前端是指在不同的終端設...百家號田檢車戒指今年6月分 已建成3980萬畝水稻，目前湖北全省仍有1800完奪目正在收各種 預計10月中國尋首個完畢</p></body>
</html>

在這里插入圖片描述

22-CSS簡介

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {color: #333;}p {text-indent: 2em;font-size: 14px;line-height: 30px;color: #444;}li {line-height: 30px;color: #444;font-size: 14px;}a {color: #0062c2;}</style>
</head>
<body><h1>CSS(層疊樣式表)</h1><p>層疊樣式表是一種        <a href="#">樣式表</a>        語言，什么窗口模式覅房產稅多么燦爛的時刻名稱北京房產就那次考試模式上看快下課了咖啡無法承受的苦難付款時間的內存空間只能靠才能</p><p><strong>cSS是開放網絡的核心語言職意</strong>，差不多還不錯吧不錯的拿出當年代表處代表就差不多的好處點擊保存點擊保存都不會的變化</p><ul><li>css彼此間的檢查你的都能從當年的警察局</li><li>單純的不長不短和超級精彩度假村的就能吃到九年</li><li>css大把大把的就            <a href="#">詳細參科手冊</a>            會變成都不會差別很大吧</li></ul>
</body>
</html>

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/10278.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/10278.shtml
英文地址，請注明出處：http://en.pswp.cn/web/10278.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Dual Aggregation Transformer for Image Super-Resolution論文總結

Dual Aggregation Transformer for Image Super-Resolution論文總結

題目&#xff1a;Dual Aggregation Transformer&#xff08;雙聚合Transformer&#xff09; for Image Super-Resolution&#xff08;圖像超分辨&#xff09; 論文&#xff08;ICCV&#xff09;&#xff1a;Chen_Dual_Aggregation_Transformer_for_Image_Super-Resolution_ICCV…
閱讀更多...
IM 是什么？

IM 是什么？

在當今數字化的時代&#xff0c;即時通訊&#xff08;IM&#xff09;已經滲透到人們的日常生活和企業的工作環境中。IM技術的快速i發展為人們提供了一種高效、便捷的溝通方式&#xff0c;不僅推動了社會的信息化進程&#xff0c;也提升了企業的協同效率和競爭力。 作為企業級I…
閱讀更多...
【GD32】01-GPIO通用輸入輸出

【GD32】01-GPIO通用輸入輸出

GD32 閑話說在前頭 這里又開一個系列啦。 原因就是之前買了立創開發板的9.9的GD32E230C8T6的板子&#xff0c;買都買了就跟著立創開發板學習一下&#xff08;屬于是一次性支持了兩個國產品牌了&#xff0c;立創和兆易創新&#xff09;。并且我還買了GD32F407VET6的板子&…
閱讀更多...
資金流分析下的企業供貨關系強度模型

資金流分析下的企業供貨關系強度模型

圖技術 利用neo4j、networkx、dgl、python做圖分析挖掘 【1】最短路徑算法dijkstra 【2】基于networkx的隱性集團關系識別模型 【3】基于Neo4j的擔保社群型態分析挖掘 【4】基于python求有向無環圖中target到其他節點全路徑 【5】有向圖中任意兩點的路徑 【6】圖基礎入門 【7】…
閱讀更多...
項目管理中控制質量的工具與技術

項目管理中控制質量的工具與技術

項目管理中控制質量的工具與技術 控制質量的工具與技術包括多種方法&#xff0c;旨在確保產品或服務達到既定的質量標準。關于具體的工具格式和樣式&#xff0c;以下是一些示例&#xff1a; 統計技術&#xff1a; 這是一種將質量控制要素的數據轉化為實際控制手段的技術。通…
閱讀更多...
Visual Studio和Visual Studio Code適用于哪些編程語言

Visual Studio和Visual Studio Code適用于哪些編程語言

Visual Studio和Visual Studio Code都適用于多種編程語言&#xff0c;它們的適用編程語言如下&#xff1a; Visual Studio適用于&#xff1a; C#Visual Basic .NETF#CJavaScriptTypeScriptPythonHTML/CSSJava&#xff08;通過插件支持&#xff09; Visual Studio Code適用于…
閱讀更多...
Jtti：哪些方法可以降低美國CN2服務器的延遲?

Jtti：哪些方法可以降低美國CN2服務器的延遲?

降低美國CN2服務器的延遲可以采取多種方法&#xff0c;以下是一些常用的方法&#xff1a; 1.選擇優質的網絡提供商和服務商&#xff1a;選擇具有高質量網絡和優質服務的網絡提供商和服務商是降低延遲的關鍵。確保您選擇的網絡提供商具有可靠的基礎設施和優質的網絡連接&#xf…
閱讀更多...
C++：關于圓形魚眼半全景圖轉為等距圓柱投影圖

C++：關于圓形魚眼半全景圖轉為等距圓柱投影圖

C&#xff1a;空間坐標映射到球面坐標/全景圖_如何將球體坐標映射到球面uv-CSDN博客 C&#xff1a;關于360全景圖像和立方體6面全景圖像的相互轉換_彩色全景拆解正方體6個面-CSDN博客 之前記錄了立方體和360全景之間的轉換&#xff0c;這次記錄下魚眼圖與360全景圖之間的轉換…
閱讀更多...
C++ STL的鎖介紹

C++ STL的鎖介紹

在 C Standard Template Library (STL) 中&#xff0c;有幾個鎖的實現&#xff0c;這些都位于 <mutex> 頭文件。以下是一些常見的鎖及其功能&#xff1a; std::mutex&#xff1a;最基本的互斥鎖&#xff0c;不可遞歸使用。該鎖提供了獨占的非公平鎖定能力。 std::mutex…
閱讀更多...
處理瀏覽器緩存問題

處理瀏覽器緩存問題

處理瀏覽器緩存問題 main.js router.onError((error) > {hasRefreshed false;console.log("異常" error.message);let ind0 error.message.indexOf(Loading chunk chunk-)let ind2 error.message.indexOf(failed.)if(ind0 ! -1 && ind2 !-1){console.…
閱讀更多...
spring-boot-starter-validation校驗框架

spring-boot-starter-validation校驗框架

介紹 Spring Boot Starter Validation是一個Spring Boot模塊&#xff0c;用于簡化應用程序中的驗證功能。它包含以下依賴&#xff1a; Hibernate Validator&#xff1a;Hibernate Validator是JavaBean Validation&#xff08;JSR 380&#xff09;規范的參考實現&#xff0c;提…
閱讀更多...
信創應用軟件之辦公流版簽

信創應用軟件之辦公流版簽

信創應用軟件之辦公流版簽 文章目錄 信創應用軟件之辦公流版簽概述流式文件版式文件電子簽章廠商金山辦公永中-永中Office中標-中標普華Office福昕科技e簽寶法大大 概述 辦公流版簽軟件主要包括辦公中常用到的流式軟件、版式軟件以及電子簽章。 版式文件和流式文件都是文書類…
閱讀更多...
軟件體系結構總結

軟件體系結構總結

文章目錄 一、軟件體系結構概述1.1 基本概念1.1.1 背景1.1.2 定義1.1.3 系統1.1.3.1 定義1.1.3.2 特性1.1.3.3 系統的體系結構 1.1.4 軟件設計的層次性1.1.5 體系結構的類別&#xff08;類型&#xff09;1.1.6 重要性&#xff08;意義&#xff09; 1.2 模塊及其設計1.2.1 定義1…
閱讀更多...
HTTP超時時間設置

HTTP超時時間設置

在進行超時時間設置之前我們需要了解一次http請求經歷的過程 瀏覽器進行DNS域名解析&#xff0c;得到對應的IP地址根據這個IP&#xff0c;找到對應的服務器建立連接&#xff08;三次握手&#xff09;建立TCP連接后發起HTTP請求&#xff08;一個完整的http請求報文&#xff09;服…
閱讀更多...
[單機]完美國際_V155_GM工具_VM虛擬機

[單機]完美國際_V155_GM工具_VM虛擬機

[端游] 完美國際單機版V155一鍵端PC電腦網絡游戲完美世界幻海凌云家園 本教程僅限學習使用&#xff0c;禁止商用&#xff0c;一切后果與本人無關&#xff0c;此聲明具有法律效應&#xff01;&#xff01;&#xff01;&#xff01; 教程是本人親自搭建成功的&#xff0c;絕對是…
閱讀更多...
出海企業哪種組網方案更省事？

出海企業哪種組網方案更省事？

對于出海企業而言&#xff0c;建立跨地區的數據傳輸和協同工作至關重要&#xff0c;以提升運營效率。因此&#xff0c;網絡構建變得迫在眉睫。通過構建企業組網&#xff0c;企業能夠加強與海外分支、客戶和合作伙伴之間的聯系&#xff0c;加速海外業務的發展。 然而&#xff0c…
閱讀更多...
Stable Diffusion教程|圖生圖原理和實戰

Stable Diffusion教程|圖生圖原理和實戰

Stable Diffusion憑借其卓越的圖生圖功能&#xff0c;極大地提升了圖像生成的可控性與輸出品質&#xff0c;賦予用戶前所未有的個性化創作風格表達能力。這一革新特性使得Stable Diffusion不僅能精準地捕捉用戶的藝術愿景&#xff0c;更能以數字化手段孕育出新穎且極具創意的畫…
閱讀更多...
【Java 8】Lambda： mAA::get 返回函數式接口實例

【Java 8】Lambda： mAA::get 返回函數式接口實例

正文 代碼介紹&#xff1a;分別有兩個函數式接口Lazy跟LazyDependencyCreator&#xff0c;一個HashMap存儲<Object, LazyDependencyCreator>鍵值對。重點在于mProviders.put(AA.class,mAA::get)&#xff0c;看了很久都沒看懂&#xff0c;mAA::get返回的不是mAA本身嗎&am…
閱讀更多...
部署私有YUM源

部署私有YUM源

需將對應版本DVD下載至本機&#xff0c;并保證本機可訪問互聯網&#xff0c;下載需要的rpm包。 下載DVD并進行掛載 mkdir /data/iso -pmkdir /data/yum -pcd /datawget http://mirrors.aliyun.com/centos/7/isos/x86_64/CentOS-7-x86_64-Everything-1511.isomount -o loop -t…
閱讀更多...
知識付費app源碼快速發布app定制開發一站式定制開發平臺,開辦技術學校的風險有哪些？如何防范？

知識付費app源碼快速發布app定制開發一站式定制開發平臺,開辦技術學校的風險有哪些？如何防范？

現在越來越多的人看好培訓行業&#xff0c;投資者們或選擇加盟&#xff0c;或選擇創業&#xff0c;不管哪一種都是投資&#xff0c;投資就會有風險&#xff0c;那么技術學校在辦學過程中&#xff0c;有哪些風險呢? 1、學生人身傷害事故的風險 技術學校的學生&#xff0c;不是同…
閱讀更多...
最新文章

Copyright @ 2022~2023