一.简单概念
1.概念
层叠样式表，一种样式表语言，用来美化HTML文档的呈现。
2.书写位置
title标签下方添加style双标签，style标签里面书写CSS代码
（1）外部学习样式
<title>CSS使用</title>
<style>
/* 选择器{属性名：属性值} */
/* 属性名和属性值成对出现--键值对 */
p{
/* CSS属性 */
}
</style>
（2）行内写法
<title>CSS使用</title>
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>的那家店你</p>
<!-- 行内写法 -->
<div style="color: brown;font-size: 100px;">行内写法</div>
</body>
3.标签选择器
选中所有同名标签设置相同的样式
4.类选择器
差异化设置标签的显示结果
先定义-----> .类名
使用-------> class=“类名”
<title>CSS使用</title>
<style>
.red{
color: brown;
}
</style>
</head>
<body>
<p class="red">的那家店你</p>
<p>你几点才能发多少</p>
</body>
5.id选择器
一般要配合JavaScrept使用，一般不用于CSS设置
先定义：#id名
使用：id=”id名“
6.通配符选择器
查找页面所有标签，设置相同样式
定义：*{}
<style>
*{
color: blue;
}
</style>
</head>
<body>
<p>你几点才能发多少</p>
<ul>
<li>1</li>
<li>4</li>
</ul>
</body>
7.实践：画盒子
知识点：类选择器
8.字体修饰属性
（1）字体大小，粗细，倾斜
网页内可查看相关属性值：
鼠标右键点击检查，打开调试工具，（快捷键为F12），然后点击红色圈出的鼠标标志，移动鼠标光标到字体段落可以查看字体相关信息。
styles那里可以调试
（2）行高
行高垂直居中：行高属性值=盒子高度属性值
p{
height: 100px;
background-color: aqua;
line-height: 100px;
}
（3）字体族
（4）字体复合属性
一定要按顺序写！
（5）文本缩进，对齐和修饰线
缩进：
对齐：（文本及图片居中同理）
文本修饰线：
（6）颜色
9.新闻案例
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻详细</title>
<style>
h1{
text-align: center;
font-size: 33px;
font-weight: 400;
color: #333;
}
div{
font-size: 14px;
color: #999;
}
p{
text-indent: 2em;
font-size: 18px;
color: #333;
}
.pic{
text-align: center;
}
</style>
</head>
<body>
<h1>您好</h1>
<div>时间2024年10月14日</div>
<p><strong>新闻说：</strong>收到回复不及时，先整体再局部，物权法检测完女角色。强调用strong，sadcfwasdwasddwasd,设定返回南京二手房拿出几十万和队伍建设金额多少v不回家二等奖觉得v那是多久才能十年寒窗封测江苏卫视记得上次乏善可陈你就开始的脑残粉金额几点开始v你的飞机发动机可是那就问你我的</p>
<div class="pic">
<!-- 类选择器差异化 -->
<img src="./2.png" alt="">
</div>
</body>
</html>
扫一扫
1073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
