国产亚洲精品福利在线无卡一,国产精久久一区二区三区,亚洲精品无码国模,精品久久久久久无码专区不卡

當前位置： 首頁 > news >正文

家電維修做網(wǎng)站生意怎么樣合肥網(wǎng)站維護公司

news 2025/7/2 14:55:20
家電維修做網(wǎng)站生意怎么樣,合肥網(wǎng)站維護公司,網(wǎng)站的優(yōu)化是什么,安陽專業(yè)seo地址文章目錄 為什么需要cssCSS語法CSS的組成css注釋： 快速入門示例：常用樣式字體顏色和邊框顏色介紹顏色示例：邊框邊框的寬度與高度 字體樣式背景樣式文本居中 字體顏色和邊框顏色介紹顏色示例：邊框邊框的寬度與高度 字體樣式背景樣式…

文章目錄

  • 為什么需要css
  • CSS語法
      • CSS的組成
      • css注釋：
  • 快速入門示例：
  • 常用樣式
    • 字體顏色和邊框
      • 顏色介紹
      • 顏色示例：
      • 邊框
      • 邊框的寬度與高度
    • 字體樣式
    • 背景樣式
    • 文本居中
  • 字體顏色和邊框
      • 顏色介紹
      • 顏色示例：
      • 邊框
      • 邊框的寬度與高度
  • 字體樣式
  • 背景樣式
  • 文本居中
  • css使用三種方式
  • CSS選擇器
    • 元素選擇器
    • ID選擇器
    • class選擇器

學習參考：CSS 教程 (w3school.com.cn)

為什么需要css

  1. 在沒有CSS之前，我們想要修改HTML元素的樣式需要為每個HTML元素單獨定義樣式屬性，費心費力。所以CSS就出現(xiàn)了。
  2. 使用CSS將HTML頁面的 內(nèi)容與樣式分離提高web開發(fā)的工作效率(針對前端開發(fā)）
  3. CSS 可以讓 html 元素(內(nèi)容)+ 樣式(CSS)分離，更好的控制頁面

CSS語法

  1. CSS的組成

  2. 在這里插入圖片描述

    1. 選擇器

    2. 聲明

      1. 由屬性與值組成
      2. 用分號分隔

  3. css注釋：

    1. /注釋內(nèi)容/

快速入門示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 快速入門</title>
</head>
<body><div>hello,北京</div><br/><div>hello,上海</div><br/><div>hello,天津</div><br/>
</body>
</html>
<!--課堂代碼-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 快速入門</title><!--老師解讀1. 在 head 標簽內(nèi)，出現(xiàn)了 <style type="text/css"></style>2. 表示要寫 css 內(nèi)容3. div{} 表示對 div 元素進行樣式的指定4. width: 300px; (屬性) 表示對 div 樣式的具體指定，可以有多個5. 如果有多個，使用 ; 分開即可6. 當運行頁面時，div 就會被 div{} 渲染，修飾--><style type="text/css">div {width: 200px;height: 100px;background-color: gold;}</style>
</head>
<body><!--先使用傳統(tǒng)的方法--><div>hello,北京</div><br/><div>hello,上海</div><br/><div>hello,天津</div><br/><div>hello,深圳</div><br/>
</body>
</html>

在這里插入圖片描述

常用樣式

字體顏色和邊框

  1. 顏色介紹

    1. 顏色可以寫顏色名 比如 green，也可以寫rgb 值比如rgb(200,200,200)和十六進制表示值比如#70809

  2. 顏色示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>顏色</title><style type="text/css">/* 為了講課方便，我們就在這里寫 css 樣式 *//*說明:顏色可以寫顏色名 比如 green，也可以寫 rgb 值 比如 rgb(200, 200, 200) 和十六進制表示值比如 #708090color: rgb(255, 222, 1); // color: #ff7d44; // color: red;*/div {/* 有三種方式，指定顏色1. 英文2. 16進制 #ff7d44 [使用最多]3. 三原色 rgb(100, 100, 100)*/color: #ff7d44;}</style></head><body><div>韓順平教育</div></body></html>

    在這里插入圖片描述

  3. 邊框

    1. 代碼示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>邊框</title><style type="text/css">div {width: 300px;height: 100px;border: 1px dashed blue;}</style></head><body><div>韓順平教育</div></body></html>

    在這里插入圖片描述

  4. 邊框的寬度與高度

    1. 介紹：

      1. 寬度/高度像素值：100px；也可以是百分比值：50%

    2. 代碼示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在這里插入圖片描述

字體樣式

  1. 介紹

    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否粗體
    3. font-family : 指定類型

  2. 代碼示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>字體樣式</title><style type="text/css">/**/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: '華文新魏', sans-serif;}</style></head><body>說明:1. font-size: 指定大小，可以按照像素大小<br>2. font-weight : 指定是否是粗體<br>3. font-family : 指定字體類型<br><div>hello，word</div></body></html>

在這里插入圖片描述

背景樣式

  1. 代碼示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在這里插入圖片描述

文本居中

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本居中</title><style type="text/css">div {border: 1px solid blue; /*順序不要求*/width: 300px;background: aliceblue;font-size: 40px;font-weight: bold;font-family: '新宋體', sans-serif;margin-left: auto;margin-right: auto;text-align: center;}</style>
</head>
<body><div>hello，word</div>
</body>
</html>

在這里插入圖片描述

字體顏色和邊框

  1. 顏色介紹

    1. 顏色可以寫顏色名 比如 green，也可以寫rgb 值比如rgb(200,200,200)和十六進制表示值比如#70809

  2. 顏色示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>顏色</title><style type="text/css">/* 為了講課方便，我們就在這里寫 css 樣式 *//*說明:顏色可以寫顏色名 比如 green，也可以寫 rgb 值 比如 rgb(200, 200, 200) 和十六進制表示值比如 #708090color: rgb(255, 222, 1); // color: #ff7d44; // color: red;*/div {/* 有三種方式，指定顏色1. 英文2. 16進制 #ff7d44 [使用最多]3. 三原色 rgb(100, 100, 100)*/color: #ff7d44;}</style></head><body><div>韓順平教育</div></body></html>

在這里插入圖片描述

  1. 邊框

    1. 代碼示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>邊框</title><style type="text/css">div {width: 300px;height: 100px;border: 1px dashed blue;}</style></head><body><div>韓順平教育</div></body></html>

在這里插入圖片描述

  1. 邊框的寬度與高度

    1. 介紹：

      1. 寬度/高度像素值：100px；也可以是百分比值：50%

    2. 代碼示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在這里插入圖片描述

字體樣式

  1. 介紹

    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否粗體
    3. font-family : 指定類型

  2. 代碼示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>字體樣式</title><style type="text/css">/**/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: '華文新魏', sans-serif;}</style></head><body>說明:1. font-size: 指定大小，可以按照像素大小<br>2. font-weight : 指定是否是粗體<br>3. font-family : 指定字體類型<br><div>hello，word</div></body></html>

在這里插入圖片描述

背景樣式

  1. 代碼示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在這里插入圖片描述

文本居中

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本居中</title><style type="text/css">div {border: 1px solid blue; /*順序不要求*/width: 300px;background: aliceblue;font-size: 40px;font-weight: bold;font-family: '新宋體', sans-serif;margin-left: auto;margin-right: auto;text-align: center;}</style>
</head>
<body><div>hello，word</div>
</body>
</html>

在這里插入圖片描述

css使用三種方式

  1. 在標簽的 style 屬性上設置CSS樣式

    1. 代碼示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在標簽的style屬性上設置CSS樣式</title></head><body><div style="color: red;">hello,北京</div><br/><div style="color: blue;">hello,上海</div><br/><div style="color: green;">hello,天津</div><br/></body></html>

在這里插入圖片描述

  1. 在head標簽中，使用style標簽來定義需要的CSS樣式

    1. 代碼示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在head標簽中，使用style標簽來定義需要的CSS樣式</title><style>div {color: blue;}span {color: red;}</style></head><body><div>hello,北京</div><br/><div>hello,上海</div><br/><span>hello,span</span></body></html>

在這里插入圖片描述

  1. 把 CSS 樣式寫成單獨的 CSS 文件，再通過 link 標簽引入

    1. 代碼示例

      1.  /* test.css 內(nèi)容 */div {width: 300px;height: 100px; /* 這是一個注釋信息 */background: beige;}span {border: 3px solid red;}===================================use-css-style.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>把 CSS 樣式寫成單獨的 CSS 文件，再通過 link 標簽引入</title><!-- link 標簽專門用來引入 css 樣式代碼 --><link rel="stylesheet" href="test.css"/></head><body><div>hello, 北京~</div><br/><div>hello, 上海</div><br/><span>hello, span</span></body></html>

CSS選擇器

  1. 元素選擇器

    1. 通常是某個 HTML 元素， 比如 p、h1、adiv等

    2. 代碼示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>元素選擇器</title></head><body><h1>hello，word</h1><p>hello, world~</p></body></html>
      2. 在這里插入圖片描述

  2. ID選擇器

    1. 可以為標有特定id的HTML元素指定特定的樣式。

    2. id選擇器以"#"來定義

    3. 代碼示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>id 選擇器</title><!-- 我們就在這里寫css樣式解讀：1. 使用id選擇器，需要先在要修飾元素指定id屬性, id值是程序員自己指定2. id 是唯一的，不能重復3. 在<style> 標簽中指定id選擇器時，前面需要有 #id值 --><style type="text/css">#hsp1 {color: gold;}#css2 {color: green;}</style></head><body><h1 id="hsp1">hello，word</h1><p id="css2">hello, world~</p></body></html>
      2. 在這里插入圖片描述

  3. class選擇器

    1. ，可以通過 class 屬性選擇去使用這個樣式

    2. 基本語法：

      1. .class 屬性值{屬性:值；}

    3. 代碼示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>類選擇器</title><!-- 我們就在這里寫css樣式解讀：1. 使用class選擇器，需要在被修飾的元素上，設置class屬性，屬性值由程序員指定2. class 屬性的值，可以重復3. 需要在 <style></style> 指定類選擇器的具體樣式，前面需要是 .類選擇器名 --><style type="text/css">.css1 {color: red;}.css2 {color: sandybrown;}</style></head><body><div class="css1">hello，word</div><div class="css1">hello，word 8</div><p class="css2">hello, world~</p></body></html>
      2. 在這里插入圖片描述

文本來源：韓順平java課程筆記

http://m.aloenet.com.cn/news/32649.html

相關文章：

  • 徐州網(wǎng)站建設哪家好企業(yè)管理培訓機構
  • 日照網(wǎng)站建設價格蘇貨運公司回收百度賬戶推廣登陸
  • 百度快照入口seo站長工具 論壇
  • 與做網(wǎng)站有關的參考文獻網(wǎng)絡營銷的四種形式
  • 做網(wǎng)站要霸屏嗎推廣營銷
  • 溫江做網(wǎng)站seo在線短視頻發(fā)布頁
  • 常州專業(yè)網(wǎng)站建設推廣seo基礎培訓機構
  • 服務器如何發(fā)布網(wǎng)站無線網(wǎng)絡優(yōu)化是做什么的
  • 石家莊新華區(qū)網(wǎng)站建設推廣官網(wǎng)
  • 批量 網(wǎng)站標題常用的營銷方法和手段
  • 南京網(wǎng)站開發(fā)注冊app近期國內(nèi)新聞熱點事件
  • 贛州建網(wǎng)站重慶百度競價開戶
  • 溫州網(wǎng)站設計公司seo運營工作內(nèi)容
  • 做網(wǎng)站的學什么代碼濟南seo排行榜
  • 網(wǎng)站建設運營協(xié)議書2023年6月份又封城了
  • 政府門戶網(wǎng)站建設方案下載磁力吧ciliba
  • 做會計網(wǎng)站的流程seo課程總結(jié)怎么寫
  • 美橙域名查詢網(wǎng)站做網(wǎng)站建設優(yōu)化的公司排名
  • 做網(wǎng)站空間 阿里云優(yōu)化大師怎么刪除學生
  • wordpress以前版本星巴克seo網(wǎng)絡推廣
  • 西安誰家的集團門戶網(wǎng)站建設比較好seo推廣排名重要嗎
  • 做ppt的模板的網(wǎng)站有哪些如何優(yōu)化網(wǎng)站
  • 網(wǎng)站推廣服務網(wǎng)站連鎖微信朋友圈廣告30元 1000次
  • 湛江免費建站模板短視頻剪輯培訓班多少錢
  • 剛建的網(wǎng)站百度搜不到聯(lián)合早報 即時消息
  • 推廣網(wǎng)站怎么建設和維護seo資訊
  • 產(chǎn)品外包裝設計網(wǎng)站直通車關鍵詞優(yōu)化
  • 鄭州天梯網(wǎng)站制作seo研究協(xié)會
  • wordpress左邊欄網(wǎng)頁seo優(yōu)化
  • 哪家公司建網(wǎng)站好推廣代理平臺