✨課程連結
【狂神說Java】CSS3最新教程快速入門通俗易懂_哔哩哔哩_bilibili
✨學習筆記
span标簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#title1{
font-size: 30px;
color: red;
}
</style>
<body>
普通内容<span id="title1">被凸顯的内容</span>
</body>
</html>
字型樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- font-family 字型
font-size 字型大小
font-weight 字型粗細
color 字型顔色
-->
<style>
body{
font-family: "Arial Black","楷體";
color: gray;
}
h1{
font-size: 50px;
font-size: 2em;
}
.p1{
font-weight: bolder;
/* font-weight: lighter; */
}
</style>
</head>
<body>
<h1>CSS</h1>
<p class="p1">層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（标準通用标記語言的一個應用）或XML（标準通用标記語言的一個子集）等檔案樣式的計算機語言。</p>
<p>CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。</p>
<p>Stray birds of summer come to my window to sing and fly away. And yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 字型風格 -->
<style>
p{
font:oblique lighter 30px "楷體";
}
</style>
</head>
<body>
<p>CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。</p>
</body>
</html>
文本樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 顔色：
單詞
RGB 0~F
#000000
#FF0000 紅
#00FF00 綠
#0000FF 藍
#FFFFFF
rgb(0,255,255)
RGBA
a 0~1
text-align: center 排版(文本居中)
text-indent: 2em; 段落首行縮進
行高 和 塊 高度一緻 單行文字上下居中
height: 100px;
line-height: 100px;
-->
<style>
h1{
/* color:#0000FF; */
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: cornsilk;
height: 100px;
line-height: 100px;
}
/* 下劃線 */
.l1{
text-decoration: underline;
}
/* 中劃線 */
.l2{
text-decoration: line-through;
}
/* 上劃線 */
.l3{
text-decoration: overline;
}
/* 超連結去下劃線 */
a{
text-decoration: none;
}
/* 文本圖檔水準對齊 */
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">去掉下劃線</a>
<p class="l1">111</p>
<p class="l2">111</p>
<p class="l3">111</p>
<h1>CSS</h1>
<p class="p1">層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（标準通用标記語言的一個應用）或XML（标準通用标記語言的一個子集）等檔案樣式的計算機語言。</p>
<p>CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。</p>
<p class="p3">Stray birds of summer come to my window to sing and fly away. And yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p>
<br>
<hr>
<br>
<p>
<img src="images/demo.png" alt="">
<span>被居中的字型</span>
</p>
</body>
</html>
超連結僞類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 預設顔色 */
a{
text-decoration: none;
color: black;
}
/* 選擇所有未被通路的連結 */
a:link{
color: brown;
}
/* 選擇所有已通路的連結 */
a:visited{
color: red;
}
/* 選擇滑鼠懸停其上的連結 （需要記住）*/
a:hover{
color: orange;
font-size: 20px;
}
/* 選擇活動的連結 */
a:active{
color: green;
}
/* 水準陰影 垂直陰影 模糊的距離 陰影的顔色 */
#price{
text-shadow: 10px -5px 2px blue;
}
</style>
</head>
<body>
<a href="#">
<img src="images/demo.jpg" alt="">
</a>
<p>
<a href="#">碼出高效：Java開發手冊</a>
</p>
<p>
<a href="">作者：孤盡</a>
</p>
<p id="price">
￥99.00
</p>
</body>
</html>
清單
#nav{
width: 300px;
background: gray;
}
.title{
font-size: 20px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/*顔色 圖檔 圖檔位置 平鋪方式*/
background: red url("../images/箭頭-向下.png") 260px no-repeat;
}
/* list-style
none 去掉原點
circle 空心圓
decimal 數字
square 正方形 */
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/箭頭-向右.png");
background-repeat: no-repeat;
background-position: 220px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分類</h2>
<ul>
<li><a href="#">圖書</a> <a href="#">音響</a> <a href="#">數字商品</a></li>
<li><a href="#">家用電器</a> <a href="#">手機</a> <a href="#">數位</a></li>
<li><a href="#">電腦</a> <a href="#">辦公</a></li>
<li><a href="#">家居</a> <a href="#">家裝</a> <a href="#">廚具</a></li>
<li><a href="#">服飾鞋帽</a> <a href="#">個護化妝</a></li>
<li><a href="#">禮品鞋帽</a> <a href="#">鐘表</a> <a href="#">珠寶</a></li>
<li><a href="#">食品飲料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票務</a></li>
</ul>
</div>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/* 預設全部平鋪 */
background-image: url("images/demo.png");
}
.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>
漸變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 徑向漸變 圓形漸變 -->
<!-- https://www.grabient.com/ -->
<style>
body{
/*background-color: #4158D0;*/
/*background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);*/
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
</style>
</head>
<body>
</body>
</html>
⭐轉載請注明出處
本文作者：雙份濃縮馥芮白
原文連結：https://www.cnblogs.com/Flat-White/p/14966632.html
版權所有，如需轉載請注明出處。
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)