CSS
1.初識CSS
1.1什么是CSS
層疊樣式表（級聯樣式表）：Cascading Style SheetSEO
CSS : 表現（美化圖片）
字體，顏色，邊距，高度，寬度，背景圖片，網頁浮動…
1.2CSS的發展史
CSS 1.0
CSS 2.0 DIV（塊）+ CSS, HTML與CSS結構分離的思想，網頁變得簡單，SEO
CSS 2.1 浮動，定位
CSS 3.0 圓角，陰影，影片…瀏覽器兼容性
1.3快速入門
可在HTML頁面直接撰寫CSS：
<style>
......
</style>
可產生一個link鏈接，單獨一個頁面撰寫CSS（更加規范）：
<link rel="stylesheet" href="...(CSS頁面地址)">
CSS的優勢：
1.內容與結構分離
2.網頁結構表現統一，可以實作復用
3.樣式十分豐富
4.建議使用獨立于HTML的CSS檔案
5.利用SEO，容易被搜索引擎收錄
2.選擇器
作用：選擇頁面上的某一個或者某一類元素
2.1基本選擇器
1.標簽選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>學習Java</h1>
<p>CSS</p>
</body>
</html>
2.類選擇器 class
class="…"
用“.”選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.標題{
color: blue;
}
.LOL{
color: red;
}
</style>
</head>
<body>
<h1 class="標題">學習Java</h1>
<p class="LOL">CSS</p>
</body>
</html>
3.id選擇器
id="…"
用“#”選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#標題{
color: blue;
}
#LOL{
color: red;
}
</style>
</head>
<body>
<h1 id="標題">學習Java</h1>
<p id="LOL">CSS</p>
</body>
</html>
2.2層次選擇器
1.后代選擇器：
某個元素后面所有與您選中的元素型別相同的元素都會被選中
body p{
color: red;
}
body后面所有p標簽元素都會被選中
2.子選擇器
某個元素后面僅一代與您選中的元素型別相同的元素都會被選中
body>p{
color: red;
}
跟在body后面一代的p標簽會被選中，
假如body內有個串列，串列內又設定了p標簽，那么這里的p標簽將不會被選中，（這就是僅一代的含義）
3.弟弟選擇器
某元素下一位您所選擇型別的元素，且是同代的，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#LOL+p{
color: red;
}
</style>
</head>
<body>
<h1 id="標題">學習Java</h1>
<p id="LOL">CSS</p>
<p id="OL">CSS</p>
</body>
</html>
會選中id為“OL”的p標簽，且是同代的，
4.通用選擇器
選中某元素后面“您所選擇型別的同代的所有”元素，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#LOL~p{
color: red;
}
</style>
</head>
<body>
<h1 id="標題">學習Java</h1>
<p id="LOL">CSS</p>
<p id="OL">CSS</p>
<p class="OL">CSS</p>
<p class="OL">CSS</p>
</body>
</html>
會選中id為“LOL”后面所有同一代的p標簽元素，
2.3屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 200px;
width: 200px;
border-radius: 10px;
background: black;
text-align: center;
color: blue;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*a[id=wangwei]{*/
/* background: aqua;*/
/*}*/
/*a[class*="links"]{*/
/* background: rebeccapurple;*/
/*}*/
/*a[href^=http]{*/
/* background: red;*/
/*}*/
a[href$=uk]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.manchester.ac.uk" class="links item first" target="_blank" id="wangwei">曼徹斯特大學</a>
<a href="https://www.bilibili.com/" class="links" target="_blank" title="tests">嗶哩嗶哩影片</a>
<a href="https://www.bilibili.com/read/cv5702420" class="item" target="_blank">完整Java學習路線</a>
<a href="https://www.bilibili.com/video/BV1YJ411a7dy?p=8" class="first" target="_blank">CSS教學</a>
<a href="https://hao.360.com/" class="links item" target="_blank">360瀏覽器</a>
<a href="https://space.bilibili.com/95256449" class="links item first" target="_blank">狂神說</a>
<a href="nothing" class="links item" target="_blank">HTML5教學</a>
</p>
<p><a href="https://www.eic.org.cn/school/detail/311" class="links item first" target="_blank" id="xuanjie">MD</a></p>
</body>
</html>css
1.選中所有帶有“[]”內屬性的元素：
a[id]{
background: yellow;
}
（選中了所有帶有id屬性的元素）
2.選中屬性等于“[]”內標明的內容的元素：
a[id=wangwei]{
background: aqua;
}
(選中了id=wangwei的元素)
3.選中所有class屬性包含"links"的元素
a[class*="links"]{
background: rebeccapurple;
}
（“*=”表示“包含”，而“=”表示“等于”）
4.選中所有以“http”開頭的“href”屬性的元素
a[href^=http]{
background: red;
}
5.選中所有以“uk”結尾的“href”屬性的元素
a[href$=uk]{
background: red;
}
3.美化網頁元素
3.1字體美化
3.1.1 span標簽：
? <span id="wangwei">簡</span>
用id為“wangwei”的span標記“簡”，
3.1.2 字體：
（1）字體種類：
font-family: 楷體;
（2）字體顏色：
color: red;
（3）字體大小：
font-size: 50px;
（4）字體粗細：
font-weight: bolder;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family: 楷體;
color: red;
}
h1{
font-size: 50px;
}
.xuanjie{
font-weight: bolder;
}
#wangwei{
color: aqua;
}
</style>
</head>
<body>
<h1>故事<span id="wangwei">簡</span>介</h1>
<p class="xuanjie">
平靜安詳的元泱境界
</p>
<p>
在偏遠的獸國窩窩鄉
</p>
</body>
</html>
3.3文本樣式
1.顏色：
color rgb rgba
2.文本對齊的方式：
文本居中：text-align = center
3.首行縮進：
縮進兩個字：text-indent: 2em
4.行高：
此行有5個字這么高（行內字符不會上下居中）：height: 5em
此行有5個字這么高（行內字符會上下居中）：line-height: 5em
5.裝飾：
text-decoration
6.文本圖片水平對齊：
vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: rgba(0,255,255,1);
text-align: center;
}
p{
text-indent: 2em;
/*background: red;*/
/*height: 5em;*/
line-height: 5em;
text-decoration: overline red;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<h1>故事簡介</h1>
<p><a href="">MMDD</a></p>
<p>
平靜安詳的元泱境界
</p>
<p>
在偏遠的獸國窩窩鄉
</p>
</body>
</html>
3.4超鏈接偽類
1.a:hover{}
a:hover{
color: red;
font-size: 2em;
}
滑鼠懸停時字體將做出改變
2.a:active
a:active{
color: green;
}
滑鼠按住時字體將做出改變
3.陰影
.asd{
text-shadow: red 10px 10px 3px;
}
字體會有陰影效果：顏色，向上，下偏移，清晰度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: black;
}
a:hover{
color: red;
font-size: 2em;
}
a:active{
color: green;
}
.asd{
text-shadow: red 10px 10px 3px;
}
</style>
</head>
<body>
<a href="">
<img src="../tupian/digeng.png" alt="">
</a>
<p>
<a href="">大衛·科波菲爾</a>
</p>
<p>
<a href="">作者：許安杰的引路人</a>
</p>
<p class="asd">
售價：99元
</p>
</body>
3.5串列
1.div劃分模塊
<div>...</div>
CSS代碼：
#nav{
width: 14em;
background: darkgray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="xuexi.css">
</head>
<body>
<div id="nav">
<p class="title">全部商品分類</p>
<ul class="JS_navCtn cate_menu">
<li>
<a href="//shouji.jd.com/">手機</a>
<a href="//wt.jd.com">運營商</a>
<a href="//shuma.jd.com/">數碼</a>
</li>
<li>
<a href="//diannao.jd.com/">電腦</a>
<a href="//bg.jd.com">辦公</a>
</li>
<li>
<a href="//channel.jd.com/home.html">家居</a>
<a href="//channel.jd.com/furniture.html">家具</a>
<a href="//jzjc.jd.com/">家裝</a>
<a href="//channel.jd.com/kitchenware.html">廚具</a>
</li>
<li>
<a href="//channel.jd.com/1315-1342.html">男裝</a>
<a href="//channel.jd.com/1315-1343.html">女裝</a>
<a href="//phat.jd.com/10-156.html">童裝</a>
<a href="//channel.jd.com/1315-1345.html">內衣</a>
</li>
</ul>
</div>
</body>
</html>
3.7背景
（這星期時間有點匆忙，就只寫到這里了，，，）
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/157637.html
標籤：其他
上一篇：HTML文本標簽&串列
下一篇：HTML基礎操作