css簡單介紹

1.css介紹

? ? css指的是層疊樣式(Cascadingstyle sheets),是用來給HTML標簽添加樣式的語言。他可以設置HTML頁面中 文字大小,顏色,對齊方式及元素的 寬高, 位置 等樣式。
? ? 一個完整的網頁是由HTML、CSS、Javascript三部分組成。HTML、CSS、Javascript被稱為前端的三個層,他們三者是如何相互作用,實現頁面效果。

CSS規則:由兩個主要的部分構成:選擇器,以及一條或多條聲明,聲明寫在{中選擇器:通常是您需要改變樣式的 HTML元素,選擇器是css和html兩者的紐帶。
通過選擇器,我們知道是給那個元素添加樣式
聲明:每條聲明都包含一個 css 屬性名稱和一個值,以冒號分隔,以分號;結束.
css書寫位置
在head></head>標簽對中寫<stvle></style》標簽對,然后在里邊書寫cSS語句

案例:控制h1標簽字體大小和顏色
<head>
<!-此處省略了部分html結構-->
<style>
h1 (
color:red;/*顏色:紅色:*/
font-size:14px;/*字體大小:14像素:*/
</style>
</head>
<body>
<h1>我是h1標題標簽</h1>
</body>

CSS注釋
在css中,CSS注釋寫在/*....*/中
。注釋只是給自己或其他開發者查看的,網頁中不顯示,
提高代碼閱讀性
。注釋快捷鍵:Vscode中按 Ctr1+/即可快速注釋內容

這里要注意區分之前講的html注釋,html注釋內容寫在
<body>
<!--html的注釋--></body>

csS樣式可讀性5.
。css中的樣式聲明,可直接寫在一行
p{font-size:l4px;color:red;}/*樣式聲明寫在一行*/
·也可以每行只描述一個屬性,每一條聲明與選擇器之間產生一個tab的間距。(產生更多也不會有問題)
P
color: red;
font-size:14px:
以上兩種方式都可以,不過第二種方式更方便閱讀和后期修改,則我們約定后期以第二種方式來書寫CSS樣式。
在實際項目開發完成上線時,我們會把csS樣式進行代碼壓縮,壓縮后就是第一種樣式的寫法。

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

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

相關文章

CLIP--Learning Transferable Visual Models From Natural Language Supervision

參考&#xff1a;CLIP論文筆記--《Learning Transferable Visual Models From Natural Language Supervision》_visual n-grams模型-CSDN博客 openAI&#xff0c;2021&#xff0c;將圖片和文字聯系在一起&#xff0c;----->得到一個能非常好表達圖片和文字的模型主題&#…

網絡安全-釣魚篇-利用cs進行釣魚

一、環境 自行搭建&#xff0c;kill&#xff0c;Windows10&#xff0c;cs 二、原理 如圖所示 三、釣魚演示 首先第一步&#xff1a;打開System Profiler-分析器功能 選擇克隆www.baidu.com頁面做釣魚 之后我們通過包裝域名&#xff0c;各種手段讓攻擊對象訪問&#xff1a;h…

Java面試題:Redis1_Redis的使用場景和如何解決Redis緩存穿透問題

Redis使用場景常見問題 緩存 緩存三兄弟(穿透,擊穿,雪崩) 雙寫一致 持久化 數據過期策略 數據淘汰策略 分布式鎖 setnx,redisson 消息隊列,延遲隊列 … 解決Redis緩存穿透問題 緩存穿透問題 請求->redis緩存->mysql數據庫 當一個新請求到來時,先會訪問redi…

JVM(Java虛擬機)筆記

面試常見&#xff1a; 請你談談你對JVM的理解?java8虛擬機和之前的變化更新?什么是OOM&#xff0c;什么是棧溢出StackOverFlowError? 怎么分析?JVM的常用調優參數有哪些?內存快照如何抓取&#xff1f;怎么分析Dump文件&#xff1f;談談JVM中&#xff0c;類加載器你的認識…

前端最新面試題(基礎模塊HTML/CSS/JS篇)

目錄 一、HTML、HTTP、WEB綜合問題 1 前端需要注意哪些SEO 2 img的title和alt有什么區別 3 HTTP的幾種請求方法用途 4 從瀏覽器地址欄輸入url到顯示頁面的步驟 5 如何進行網站性能優化 6 HTTP狀態碼及其含義 7 語義化的理解 8 介紹一下你對瀏覽器內核的理解? 9 html…

【C++】vector常見的使用方式

前言&#xff1a;在上一篇中我們講到了string類的模擬實現&#xff0c;今天我們將進一步的去學習vector的一些常用的使用方法。 &#x1f496; 博主CSDN主頁:衛衛衛的個人主頁 &#x1f49e; &#x1f449; 專欄分類:高質量&#xff23;學習 &#x1f448; &#x1f4af;代碼倉…

命運方舟臺服注冊 命運方舟臺服怎么注冊?不會操作看這里

命運方舟臺服注冊 命運方舟臺服怎么注冊&#xff1f;不會操作看這里 命運方舟作為今年備受矚目的一款MMORPG類型游戲&#xff0c;在上線前的預約數量已經一次又一次創下新高。這款游戲的開發商Smile gate真是給玩家們帶來了一款讓人眼前一亮的作品。游戲創建在虛幻引擎的基礎…

USACO 2019 December Contest, BronzeProblem 2. Where Am I? 題解

這道題目通過例子可以看出查找最長的相同子串&#xff0c;下一個長度如果沒有找到相同的子串就是結果&#xff0c;需要寫三個循環&#xff0c;第一個循環是是否存在長度為len的相同子串&#xff0c;第二個循環是從左往右截取長度為len的子串&#xff0c;第三個循環的條件是j<…

用esp prog燒錄ESP32-C3板踩坑

附ESP32C3的GPIO一覽&#xff1a; vscode選擇Jtag燒錄&#xff0c;終端輸出esp_usb_jtag: could not find or open device&#xff1a; D:\Devtools\Espressif\tools\openocd-esp32\v0.12.0-esp32-20230921\openocd-esp32\bin\openocd.exe -f board/esp32s3-builtin.cfgOpen O…

【電路筆記】-帶阻濾波器

帶阻濾波器 文章目錄 帶阻濾波器1、概述2、典型帶阻濾波器配置3、帶阻濾波器示例14、陷波濾波器5、帶阻濾波器示例26、總結帶阻濾波器也稱為陷波濾波器,阻止并拒絕位于其兩個截止頻率點之間的頻率,并傳遞該范圍兩側的所有這些頻率。 1、概述 通過將基本 RC 低通濾波器與 RC …

Docker基礎命令(三)

同步docker容器中的時間和本地時間一致 背景: 在很多時候, 訓練模型的時候, 記錄的log日志中標記的時間和實際的時間不一致, 往往是容器時間和本地時間不一致照成的. 方案 場景一: 正在運行的容器&#xff0c;可以宿主機直接執行命令給某個容器同步時間 #方法1 直接在宿主機…

ElasticSearch教程(詳解版)

本篇博客將向各位詳細介紹elasticsearch&#xff0c;也算是對我最近學完elasticsearch的一個總結&#xff0c;對于如何在Kibana中使用DSL指令&#xff0c;本篇文章不會進行介紹&#xff0c;這里只會介紹在java中如何進行使用&#xff0c;保證你看完之后就會在項目中進行上手&am…

Arduino燒錄esp8266

default_encoding: cp936 Assume aggressive ‘core.a’ caching enabled. Note: optional global include file ‘arduino_modified_sketch_764314\Blink.ino.globals.h’ does not exist. Read more at https://arduino-esp8266.readthedocs.io/en/latest/faq/a06-global-bui…

【計劃】裝修相關感想

計劃 Summary 從去年年底開始規劃、設計、落實家里的裝修&#xff0c;2024年4月正式開始裝修&#xff0c;一個人探索和學習了很多知識和概念。 準備把這些東西做一些記錄和分享&#xff0c;一方面記錄一些裝修的流程和中間的小細節便于第二次裝修的時候避免&#xff1b;另一方…

Android設備實時監控藍牙的連接、配對、開關3種狀態

一、簡介 Android設備&#xff0c;需要實時監控本機藍牙連接其他藍牙設備的狀態&#xff0c;包含&#xff1a;連接、配對、開關3種狀態。本文介紹了2種方法&#xff0c;各有優勢&#xff0c;下面來到我的Studio一起瞅瞅吧~ 二、定時器任務 Handler 功能方法 定時器任務 Hand…

寫字靜不下心?不如試試這些“笨方法”

夏天悄悄熱起來啦&#xff5e;有人說&#xff0c;想踏踏實實寫一會兒&#xff0c;但又靜不下心&#xff0c;耐不住性子&#xff0c;快收下這四個小錦囊&#xff0c;與古人一起笨拙精進吧&#xff01;    1、不論輸贏      每次課前&#xff0c;暄桐林曦老師總會強調&am…

AlloyTeam Web前端大會:深入探索前端的無限可能

AlloyTeam Web前端大會&#xff1a;深入探索前端的無限可能 在數字化浪潮的推動下&#xff0c;Web前端技術日新月異&#xff0c;成為引領行業發展的重要力量。AlloyTeam Web前端大會作為業界的盛會&#xff0c;匯聚了眾多前端領域的精英&#xff0c;共同探討前端的未來發展趨勢…

內網-win1

一、概述 1、工作組&#xff1a;將不同的計算機按功能(或部門)分別列入不同的工作組 (1)、查看&#xff08;windows&#xff09; 查看當前系統中所有用戶組&#xff1a;打開命令行--》net localgroup查看組中用戶&#xff1a;打開命令行 --》net localgroup 后接組名查看用戶…

FreeRTOS任務調度機制(源碼講解)

任務的調度機制(核心是鏈表)&#xff01;&#xff01;&#xff01; 使用鏈表來管理任務 在我前面寫的FreeRTOS任務(深入到源碼進行分析)&#xff0c;我創建了三個任務&#xff0c;他們的優先級都是一樣的&#xff0c;所以他們在FreeRTOS中是輪流執行的&#xff0c;實際上&…

19.1 簡易抽獎

準備一個數組&#xff0c;里面添加10個獎品數據&#xff0c;讓獎品數據快速的在盒子中隨機顯示&#xff0c;通過按鈕控制盒子里面的內容停止。 效果圖&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&…