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

網(wǎng)站建設(shè)費什么科目品牌推廣宣傳詞

news 2025/7/14 20:00:25

網(wǎng)站建設(shè)費什么科目,品牌推廣宣傳詞,廣告公司簡介范文,網(wǎng)頁制作基礎(chǔ)與實例教程CSS ~ 從入門到入坑。文章目錄CSS ~ 從入門到入坑。what。css 三種實現(xiàn)方式。選擇器。id 選擇器 > class 選擇器 > 標簽選擇器。標簽選擇器。類選擇器。id 選擇器。層次選擇器。后代選擇器。子選擇器。相鄰兄弟選擇器。通用選擇器。結(jié)構(gòu)偽類選擇器。屬性選擇器。字體風格…

CSS ~ 從入門到入坑。

文章目錄

- CSS ~ 從入門到入坑。
- - what。
  - css 三種實現(xiàn)方式。
  - 選擇器。
  - - - id 選擇器 > class 選擇器 > 標簽選擇器。
      - 標簽選擇器。
      - 類選擇器。
      - id 選擇器。
      - 層次選擇器。
      - 后代選擇器。
      - 子選擇器。
      - 相鄰兄弟選擇器。
      - 通用選擇器。
      - 結(jié)構(gòu)偽類選擇器。
      - 屬性選擇器。
  - 字體風格。
  - 文本樣式。
  - 文本陰影 & 超鏈接偽類。
  - 超鏈接偽類。
  - 列表。
  - 背景。
  - 漸變。
  - 盒子模型。
  - 圓角邊框。
  - 陰影。
  - 浮動。

what。

CSS 指層疊樣式表（Cascading Style Sheets）。
樣式定義如何顯示 HTML 元素。
樣式通常存儲在樣式表中。
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題。
外部樣式表可以極大提高工作效率。
外部樣式表通常存儲在 CSS 文件中。
多個樣式定義可層疊為一。

在這里插入圖片描述
css 優(yōu)勢。

內(nèi)容和表現(xiàn)分離。
頁面結(jié)構(gòu)表現(xiàn)統(tǒng)一，可以實現(xiàn)復用。
樣式十分豐富。
建議使用獨立于 html 的 css 文件。
利用 SEO，容易被搜索引擎收錄。

css 三種實現(xiàn)方式。

在這里插入圖片描述

css 外部樣式導入兩種方式。

    <!-- 外部樣式。--><!-- 鏈接式。--><link rel="stylesheet" href="css/style.css">

css 2.1 特有。

    <!-- 導入式。--><style>@import "css/style.css";</style>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 內(nèi)部樣式。--><!--<style>--><!--h1 {--><!--color: green;--><!--}--><!--</style>--><!-- 外部樣式。--><!-- 鏈接式。--><link rel="stylesheet" href="css/style.css"><!-- 導入式。--><style>@import "css/style.css";</style>
</head>
<body><!-- 優(yōu)先級。就近原則。
--><!-- 行內(nèi)樣式。在標簽元素中，編寫一個 style 屬性，編寫樣式即可。-->
<!--<h1 style="color: red;">我是標題</h1>-->
<h1>我是標題</h1></body>
</html>

選擇器。

id 選擇器 > class 選擇器 > 標簽選擇器。

標簽選擇器。

類選擇器。

id 選擇器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 標簽選擇器。-->*/h1 {color: red;}/* 類選擇器。`.class名稱{}`可以多個標簽歸類?？梢詮陀?。*/.geek {color: green;}/* id 選擇器。id 必須唯一。`#id名稱{}`*/</style></head>
<body><h1 class="geek">標題1</h1>
<h1 class="li">標題2</h1>
<h1>標題3</h1><p class="geek">p 標簽</p><h1 id="geek" class="geek">標題1</h1>
<h1 class="geek">標題2</h1>
<h1 class="geek">標題3</h1></body>
</html>

層次選擇器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*p {*//*background-color: green;*//*}*//*!* 后代選擇器。*!*//*body p {*//*background-color: red;*//*}*//*!* 子選擇器。（一代，兒子）。*!*//*body > p {*//*background-color: lawngreen;*//*}*//* 相鄰兄弟選擇器。只有一個（向下）。（p2）*//*.active - p {*//*background-color: brown;*//*}*//* 通用選擇器。*/.active ~ p {background-color: lawngreen;}</style>
</head>
<body><p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p class="active">p7</p>
<p>p8</p></body>
</html>

后代選擇器。

        /* 后代選擇器。*/body p {background-color: red;}

子選擇器。

        /* 子選擇器。（一代，兒子）。*/body > p {background-color: lawngreen;}

相鄰兄弟選擇器。

        /* 相鄰兄弟選擇器。只有一個（向下）。（p2）*/.active - p {background-color: brown;}

通用選擇器。

        /* 通用選擇器。*/.active ~ p {background-color: lawngreen;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {background-color: green;}/* 后代選擇器。*/body p {background-color: red;}/* 子選擇器。（一代，兒子）。*/body > p {background-color: lawngreen;}/* 相鄰兄弟選擇器。只有一個（向下）。（p2）*/.active - p {background-color: brown;}/* 通用選擇器。*/.active ~ p {background-color: lawngreen;}</style>
</head>
<body><p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p class="active">p7</p>
<p>p8</p></body>
</html>

結(jié)構(gòu)偽類選擇器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 避免使用 .class, id 選擇器。--><style>/*<!-- ul 的第一個子元素。-->*/ul li:first-child {background-color: lawngreen;}/*<!-- ul 的最后一個子元素。-->*/ul li:last-child {background: red;}/*<!-- 選中 p1。按類型。選中當前 p 元素的父級元素，選中父級元素的第一個子元素，并且是當前元素才生效。-->*/p:nth-child(2) {background: deepskyblue;}/* 父元素中第二個類型為 p 的元素。按順序。*/p:nth-of-type(2) {background: yellow;}</style>
</head>
<body><p>p1</p>
<p>p2</p>
<p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>

屬性選擇器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: deepskyblue;text-align: center;color: #000;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 存在 id 屬性的元素。*/a[id] {background: yellow;}a[id=first] {background: red;}/* class 中有 links 的元素。= 絕對等于。*= 通配。*/a[class*='links'] {background: green;}/* 選中 href 中以 http 開頭的元素。*/a[href^=http] {background: yellow;}/* 選中 href 中以 pdf 結(jié)尾的元素。*/a[href$=pdf] {background: yellow;}</style></head>
<body><p class="demo"><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.abc" class="links item">9</a><a href="abcd.doc" class="links item last">10</a></p></body>
</html>

字體樣式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {font-family: "Arial Narrow", 楷體;}h1 {font-size: 50px;}.p1 {font-weight: bold;}.p3 {background: deepskyblue;height: 300px;line-height: 300px}</style></head>
<body><h1>標題</h1><p class="p1">字體</p>
<p class="p3">大小</p>
<p>English</p></body>
</html>

字體風格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 字體風格。--><style>p {font: oblique lighter 16px 楷體;}</style>
</head>
<body><p>字體風格。
</p></body>
</html>

文本樣式。

顏色：color rgb rgba。

文本對齊：text-align=center

首行縮進：text-indent: 2em;

行高：line-height

裝飾：text-decoration: none;（超鏈接去下劃線）。

文本圖片水平對齊：vertical-align: middle;。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 顏色：單詞RGB：0 ~ FRGBA：A 0 ~ 1-->*/h1 {color: rgba(0, 255, 255, 0.9);text-align: right;}.p1 {text-indent: 2em;}/* text-align。排版，居中。text-indent: 2em;  段落首行縮進。*/.p3 {background: deepskyblue;height: 300px;line-height: 300px}.l1 {text-decoration: underline;}.l2 {text-decoration: line-through;}.l3 {text-decoration: overline;}</style></head>
<body><h1>標題</h1><p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p><p class="p1">字體</p>
<p>大小</p>
<p>English</p></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 水平對齊 ~ 參照物。-->*/img, span {vertical-align: middle;}</style></head>
<body><p><img src="images/a.jpg" alt=""><span>abcdefg</span>
</p></body>
</html>

文本陰影 & 超鏈接偽類。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 默認的顏色。-->*/a {text-decoration: none;color: #000;}/* 鼠標懸浮的顏色。*/a:hover {color: orange;font-size: 50px;}/* 鼠標按住未釋放。*/a:active {color: green;}a:visited {color: pink;}#price {text-shadow: 10px 10px 10px deepskyblue;}</style>
</head>
<body><a href="#"><img src="images/a.jpg" alt="" width="80" height="103">
</a>
<p><a href="#">《碼出高效：Java開發(fā)手冊》</a>
</p>
<p><a href="">楊冠寶，花名孤盡</a>
</p>
<p id="price">￥99
</p>
</body>
</html>

超鏈接偽類。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- 默認的顏色。-->*/a {text-decoration: none;color: #000;}/* 鼠標懸浮的顏色。*/a:hover {color: orange;font-size: 50px;}/* 鼠標按住未釋放。*/a:active {color: green;}a:visited {color: pink;}#price {text-shadow: 10px 10px 10px deepskyblue;}</style>
</head>
<body><a href="#"><img src="images/a.jpg" alt="" width="80" height="103">
</a>
<p><a href="#">《碼出高效：Java開發(fā)手冊》</a>
</p>
<p><a href="">楊冠寶，花名孤盡</a>
</p>
<p id="price">￥99
</p>
</body>
</html>

列表。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div id="nav"><h2 class="title">全部商品分類</h2><ul><li><a href="#">女裝</a>&nbsp;&nbsp;<a href="#">男裝</a>&nbsp;&nbsp;<a href="#">內(nèi)衣</a></li><li><a href="#">鞋靴</a>&nbsp;&nbsp;<a href="#">箱包</a>&nbsp;&nbsp;<a href="#">配件</a></li><li><a href="#">童裝玩具</a>&nbsp;&nbsp;<a href="#">孕產(chǎn)</a>&nbsp;&nbsp;<a href="#">用品</a></li><li><a href="#">家電</a>&nbsp;&nbsp;<a href="#">數(shù)碼</a>&nbsp;&nbsp;<a href="#">手機</a></li><li><a href="#">美妝</a>&nbsp;&nbsp;<a href="#">洗護</a>&nbsp;&nbsp;<a href="#">保健品</a></li><li><a href="#">珠寶</a>&nbsp;&nbsp;<a href="#">眼鏡</a>&nbsp;&nbsp;<a href="#">手表</a></li><li><a href="#">運動</a>&nbsp;&nbsp;<a href="#">戶外</a>&nbsp;&nbsp;<a href="#">樂器</a></li><li><a href="#">游戲</a>&nbsp;&nbsp;<a href="#">動漫</a>&nbsp;&nbsp;<a href="#">影視</a></li><li><a href="#">美食</a>&nbsp;&nbsp;<a href="#">生鮮</a>&nbsp;&nbsp;<a href="#">零食</a></li><li><a href="#">鮮花</a>&nbsp;&nbsp;<a href="#">寵物</a>&nbsp;&nbsp;<a href="#">農(nóng)貿(mào)</a></li><li><a href="#">面料集采</a>&nbsp;&nbsp;<a href="#">裝修</a>&nbsp;&nbsp;<a href="#"></a></li><li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家飾</a>&nbsp;&nbsp;<a href="#">家紡</a></li><li><a href="#">汽車</a>&nbsp;&nbsp;<a href="#">二手車</a>&nbsp;&nbsp;<a href="#">用品</a></li><li><a href="#">辦公</a>&nbsp;&nbsp;<a href="#">DIY</a>&nbsp;&nbsp;<a href="#">五金電子</a></li><li><a href="#">百貨</a>&nbsp;&nbsp;<a href="#">餐廚</a>&nbsp;&nbsp;<a href="#">家庭保障</a></li><li><a href="#">學習</a>&nbsp;&nbsp;<a href="#">卡券</a>&nbsp;&nbsp;<a href="#">本地服務</a></li></ul>
</div></body>
</html>

#nav {width: 300px;background: grey;
}.title {font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red url("../images/down.png") 270px 10px no-repeat;
}/* ul li*/
ul {background: grey;
}ul li {height: 30px;list-style: none;text-indent: 1em;background-image: url("../images/down.png");background-repeat: no-repeat;background-position: 236px 2px;
}a {text-decoration: none;font-size: 13px;color: black;
}a:hover {color: orange;text-decoration: underline;
}

背景。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 1000px;height: 700px;border: 1px solid red;background-image: url("images/a.jpg");/* 默認全部平鋪。*/}.div1 {background-repeat: repeat-x;}.div2 {background-repeat: repeat-y;}.div3 {background-repeat: no-repeat;}</style></head>
<body><div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div></body>
</html>

漸變。

https://www.grabient.com/

background-color: #FFFFFF;
background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

盒子模型。

在這里插入圖片描述
body 標簽默認有外邊距。

在這里插入圖片描述

margin。
n. 頁邊空白；白邊；（獲勝者在時間或票數(shù)上領(lǐng)先的）幅度，差額，差數(shù)；余地；備用的時間（或空間、金錢等）
padding。
n. 襯料；襯墊；贅語；廢話；湊篇幅的文字
v. （用軟材料）填充，覆蓋，保護；躡手躡腳地走；虛報（賬目）；做黑賬；pad 的現(xiàn)在分詞
border。
n. 國界；邊界；邊疆；邊界地區(qū)；鑲邊；包邊；（草坪邊等的）狹長花壇
v. 和…毗鄰；與…接壤；沿…的邊；環(huán)繞…；給…鑲邊

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*<!-- body 有一個默認外邊距 margin: 0。-->*/h1, ul, li, a, body {margin: 0;padding: 0;text-decoration: none;}h2 {font-size: 16px;background-color: deepskyblue;line-height: 30px;margin: 0;color: white;}#box {width: 300px;border: 1px solid red;}/* 標簽選擇器。*/form {background: forestgreen;}div:nth-of-type(1) input {border: 3px solid black;}div:nth-of-type(2) input {border: 3px dashed black;}div:nth-of-type(3) input {border: 3px solid black;}</style></head>
<body><div id="box"><h2>會員登錄</h2><form action="#"><div><span>用戶名：</span><input type="text"></div><div><span>密 &nbsp;碼：</span><input type="text"></div><div><span>郵 &nbsp;箱：</span><input type="text"></div></form>
</div></body>
</html>

外邊距。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box {width: 300px;border: 1px solid red;margin: 0 auto;/* 居中對齊。*//* 順時針。*/}/* 標簽選擇器。*/form {background: forestgreen;}/* 外邊距。*/input {border: 1px solid black;}</style></head>
<body><div id="box"><h2>會員登錄</h2><form action="#"><div><span>用戶名：</span><input type="text"></div><div><span>密 &nbsp;碼：</span><input type="text"></div><div><span>郵 &nbsp;箱：</span><input type="text"></div></form>
</div></body>
</html>

圓角邊框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;border: 10px solid red;border-radius: 50px 20px; /* 左上 右下。（主次對角線）*/}</style></head>
<body><div></div></body>
</html>

陰影。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;border: 10px solid red;box-shadow: 10px 10px 100px yellow;}</style></head>
<body><div></div></body>
</html>

浮動。

塊級元素。

h1~h6　p　div　列表。

行內(nèi)元素。

span　a　img　strong

行內(nèi)元素可以被包含在塊級元素中，反之，則不可以。

查看全文

http://www.risenshineclean.com/news/64628.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

網(wǎng)站建設(shè)費什么科目品牌推廣宣傳詞

CSS ~ 從入門到入坑。

文章目錄

what。

css 三種實現(xiàn)方式。

選擇器。

id 選擇器 > class 選擇器 > 標簽選擇器。

標簽選擇器。

類選擇器。

id 選擇器。

層次選擇器。

后代選擇器。

子選擇器。

相鄰兄弟選擇器。

通用選擇器。

結(jié)構(gòu)偽類選擇器。

屬性選擇器。

字體風格。

文本樣式。

文本陰影 & 超鏈接偽類。

超鏈接偽類。

列表。

背景。

漸變。

盒子模型。

圓角邊框。

陰影。

浮動。

相關(guān)文章：

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

CSS ~ 從入門到入坑。

文章目錄

what。

css 三種實現(xiàn)方式。

選擇器。

id 選擇器 > class 選擇器 > 標簽選擇器。

標簽選擇器。

類選擇器。

id 選擇器。

層次選擇器。

后代選擇器。

子選擇器。

相鄰兄弟選擇器。

通用選擇器。

結(jié)構(gòu)偽類選擇器。

屬性選擇器。

字體風格。

文本樣式。

文本陰影 & 超鏈接偽類。

超鏈接偽類。

列表。

背景。

漸變。

盒子模型。

圓角邊框。

陰影。

浮動。

相關(guān)文章：

what。

css 三種實現(xiàn)方式。

id 選擇器 > class 選擇器 > 標簽選擇器。

類選擇器。

id 選擇器。

層次選擇器。

后代選擇器。

子選擇器。

相鄰兄弟選擇器。

通用選擇器。

屬性選擇器。

字體風格。

超鏈接偽類。

列表。

背景。

漸變。

盒子模型。

圓角邊框。

陰影。

浮動。