截屏2022-08-06 21.33.43.png
text-align:center 內(nèi)容居中。
margin:0 auto; 一般是用來修飾外部的div你辣。
1.選擇器分為眷细，標(biāo)簽選擇器拦盹，類選擇器，id選擇器溪椎，通配符選擇器
文字的加粗普舆，文字的大小恬口，文字的傾斜，文字的樣式沼侣，文本的縮近祖能，
文本內(nèi)容水平對齊，文本修飾線蛾洛，
<link rel="stylesheet" href="my.css">
<!-- 外聯(lián)式 -->
<!-- 內(nèi)嵌式 -->
<style>
/* CSS的注釋 */
p{
color: green;
font-size: 30px;
/* 1.文字大小养铸，需要添加px */
background-color: gainsboro;
/* 2.背景顏色 */
width: 400px;
height: 50px;
}
</style>
<!-- 行內(nèi)式 -->
<p style="color:blue">顏色</p>
.red {
color: red;
}
.blue {
color: blue;
}
#yel {
color: yellow;
}
.size {
font-size: 20px;
/* 字號 加px 默認(rèn)的字號是16px */
}
.weight {
font-weight: 700;
/* bold = 700 默認(rèn)是400不加粗*/
}
.em {
font-style: italic;
/* 傾斜 */
}
.fontStyle {
font-family: 微軟雅黑, 黑體, sans-serif;
/* 電腦中依次向后找，如果沒有微軟雅黑轧膘，就 */
}
* {
margin: 0;
padding: 0;
color: yellowgreen;
}
.r {
font: italic 700 30px 宋體;
/* 復(fù)合屬性 只能省略前兩個 */
font-style: normal;
}
.indent {
text-indent: 2em;
}
2.行高
.textIndent {
text-indent: 2em;
/* line-height: 20px; */
/* 可以填寫倍數(shù)和填寫像素大小 */
/* font: normal 700 20px/1.5 黑體; */
color: #333333;
background-color: rgba(0, 255, 0, 0.3);
}
3. margin: 0 auto;
4.text-align:center 內(nèi)容居中
.title {
color: black;
/* font-size: 20px; */
text-align: center;
font: normal 400 20px 黑體;
}
body {
text-align: center;
}
5.text-decoration:文本的修飾線
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
a {
text-decoration: none;
}
h1 {
text-decoration: line-through;
}
div {
text-decoration: underline;
}
p {
text-decoration: overline;
}
</style>
</head>
<body>
<!-- 文本修飾線 -->
<a href="">我是鏈接標(biāo)簽</a>
<h1>我是h1標(biāo)簽</h1>
<div>我是div標(biāo)簽</div>
<p>我是p標(biāo)簽</p>
</body>
</html>
6.demo1
截屏2022-08-06 22.01.26.png
<!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>
.content {
margin: 0 auto;
width: 1000px;
height: 600px;
background-color: yellowgreen;
}
.center {
text-align: center;
}
a {
text-decoration: none;
}
.indent {
text-indent: 2em;
}
</style>
</head>
<body>
<div class="content">
<h1 class="center">南海戰(zhàn)略態(tài)勢感知：美軍“里根”號航母已轉(zhuǎn)向</h1>
<p class="center">
<span>2022-08-06 15:29</span>
<a href="#">收藏</a>
</p>
<hr>
<p class="indent">【里根號航母已轉(zhuǎn)向】8月6日中午钞螟，根據(jù)“里根”號航母艦載機(jī)“灰狗”C-2A的飛行軌跡判斷，
“羅納德·里根”航母打擊群已于5日開始折返谎碍。與5日上午相比筛圆，至6日中午，其已向西南方向移動了約230海里椿浓。</p>
</div>
</body>
</html>
7.demo2
截屏2022-08-06 21.48.29.png
<!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>
body {
background-color: #f5f5f5;
}
.goods {
width: 234px;
height: 300px;
background-color: white;
margin: 0 auto;
text-align: center;
}
.goodsImg {
width: 160px;
height: 160px;
}
.shopTitle {
line-height: 25px;
/* background-color: yellow; */
}
.shopContent {
font: 12px;
color: #ccc;
/* background-color: blue; */
}
.shopPrice {
font-size: 14px;
color: #ffa500;
}
</style>
</head>
<body>
<div class="goods">
<img class="goodsImg"
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0f8abb2bc3947c4679e3f1b2aafc28c0.jpg?thumb=1&w=400&h=400&f=webp&q=90"
alt="">
<h3 class="shopTitle">電腦</h3>
<p class="shopContent">專業(yè)影響</p>
<p class="shopPrice">5999元起</p>
</div>
</body>
</html>
