CSS-1
2022-08-06 本文已影响0人
aofeilin
截屏2022-08-06 21.33.43.png
text-align:center 内容居中。
margin:0 auto; 一般是用来修饰外部的div。
1.选择器分为，标签选择器，类选择器，id选择器，通配符选择器
文字的加粗，文字的大小，文字的倾斜，文字的样式，文本的缩近，
文本内容水平对齐，文本修饰线，
<link rel="stylesheet" href="my.css">
<!-- 外联式 -->
<!-- 内嵌式 -->
<style>
/* CSS的注释 */
p{
color: green;
font-size: 30px;
/* 1.文字大小，需要添加px */
background-color: gainsboro;
/* 2.背景颜色 */
width: 400px;
height: 50px;
}
</style>
<!-- 行内式 -->
<p style="color:blue">颜色</p>
.red {
color: red;
}
.blue {
color: blue;
}
#yel {
color: yellow;
}
.size {
font-size: 20px;
/* 字号 加px 默认的字号是16px */
}
.weight {
font-weight: 700;
/* bold = 700 默认是400不加粗*/
}
.em {
font-style: italic;
/* 倾斜 */
}
.fontStyle {
font-family: 微软雅黑, 黑体, sans-serif;
/* 电脑中依次向后找，如果没有微软雅黑，就 */
}
* {
margin: 0;
padding: 0;
color: yellowgreen;
}
.r {
font: italic 700 30px 宋体;
/* 复合属性 只能省略前两个 */
font-style: normal;
}
.indent {
text-indent: 2em;
}
2.行高
.textIndent {
text-indent: 2em;
/* line-height: 20px; */
/* 可以填写倍数和填写像素大小 */
/* font: normal 700 20px/1.5 黑体; */
color: #333333;
background-color: rgba(0, 255, 0, 0.3);
}
3. margin: 0 auto;
4.text-align:center 内容居中
.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="">我是链接标签</a>
<h1>我是h1标签</h1>
<div>我是div标签</div>
<p>我是p标签</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">南海战略态势感知：美军“里根”号航母已转向</h1>
<p class="center">
<span>2022-08-06 15:29</span>
<a href="#">收藏</a>
</p>
<hr>
<p class="indent">【里根号航母已转向】8月6日中午，根据“里根”号航母舰载机“灰狗”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">专业影响</p>
<p class="shopPrice">5999元起</p>
</div>
</body>
</html>
