开学css
内部样式表是在head里面，一般日常学习使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css初识</title>
<style>
/* css代码 */
/* 选择器{ 属性：值；} */
/* 是一对键值对 */
p {
color: blue;
font-size:50px;
}
</style>
</head>
<body>
<p>what the fuck</p>
</body>
</html>
px是像素的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css引入方式</title>
<link rel="stylesheet" href="my.css">
<!-- link是在引入外部样式表，类似于c++的include -->
</head>
<body>
<p>这是 p 标签</p>
<!-- 行内写法，style="css属性" -->
<div style="color:green;font-size: 30px;">这是 div 标签</div>
</body>
</html>
外部样式表.css最常用，这一块代码在文件my.css中设定相应的属性
所以对于同一个标签，想设置不同的属性，就要实现差异化
用类选择器实现差异化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
font-size: 20px;
}
.green{
color: green;
}
.size {
font-size: 30px;
}
</style>
</head>
<body>
<p class="red">111111</p>
<p class="green">222222</p>
<div class="green">3333333</div>
<div class="red green">4444444</div>
</body>
</html>
同时一个类选择器可以给多个标签使用，同时一个标签也可以用多个不同的类选择器，但注意用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 定义 */
#red {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div id="red">div标签</div>
</body>
</html>
实际开发借助通配符选择器清除默认样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
color: blue;
}
/* 选择所有标签，设置相同的样式 */
</style>
<body>
<p>p 标签</p>
<div>div 标签</div>
<h1>h1 标签</h1>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>
画盒子小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
color: rgb(7, 7, 7);
width: 100px;
height: 100px;
background-color: blue;
}
.box2 {
color: rgb(15, 15, 14);
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
/* px要记得带上（像素） */
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>
</html>
总的测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
/* 控制文字大小 */
font-size: 30px;
color: red;
/* 控制文字粗细 */
font-weight: 700;
/* 控制字体倾斜 */
font-style: italic;
/* normal 不倾斜；italic 倾斜 */
/* 控制行高/行间距 */
line-height: 20px;
/* 如果距离很小 会出现文字重叠的效果 */
}
.p2{
height: 150px;
background-color: blue;
line-height: 50px;
/* 实现文字垂直居中的效果 */
/* 方式height=line-height的倍数 */
}
.p3 {
/* 控制字体效果 */
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.p4{
font: italic 700 30px 楷体;
/* 字号和字体必须有，否则不生效 */
/* font 复合属性 */
}
.p5{
text-indent: 2em;
/* 文本缩进 */
/* em 是相对于当前字体大小的单位 */
/* 2em 相当于当前字体大小的两倍 */
}
.p6{
text-align: center;
/* 文本对齐方式 */
/* left 左对齐；right 右对齐；center 居中对齐；justify 两端对齐 */
}
.p7{
text-decoration: underline;
/* 文本修饰线 */
/* none 无修饰线；underline 下划线；overline 上划线；line-through 删除线 */
}
</style>
</head>
<body>
<!-- 第一部分 -->
<h3 class="p1">标题</h3>
<p class="p1">测试字体大小</p>
<div>测试默认字体大小</div>
<p class="p1">111111111111111111111111111111111111111111111111111111111111111111111111112
222222222222222222222222222222222222222222222222222222222222222222222
32222222222222223
33333333333333333333333
24
3534455555555555555552342
</p>
<!-- 第二部分 -->
<div class="p2">文字
<br>
二行
<br>
三行
</div>
<!-- 第三部分 -->
<p>
what the fuck
</p>
<p class="p3">
what the fuck
</p>
<!-- 第四部分 -->
<!-- font复合属性 -->
<div class="p4">测试 font 属性</div>
<!-- 第五部分 -->
<!-- 文本缩进 -->
<p class="p5">层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现.
书写规则:选择器 {属性名: 属性值;
引入方式:(1)内部样式表(2)外部样式表(3)行内样式
选择器: 标签选择器\类选择器\id选择器\通配符选择器
div属性:
width:宽度\height:高度\background-color:背景色
文字控制属性:
font-size:字体大小\font-weight:字体粗细\font-style:字体倾斜\ling-height:行高\font-familary:字体族\font:字体复合属性\text-indent:文本缩进\text-align:文本对齐\text-decoration:修饰线
心得:打卡第五天!今天学的标签有</p>
<!-- 第六部分 -->
<!-- 文本对齐方式 -->
<!-- 图片对齐方式 -->
<p class="p6">测试文本对齐方式</p>
<div class="p6"><img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="tulip" style="width: 100px; height: 100px;"></div>
<!-- 第七部分 -->
<p class="p7">测试文本修饰线</p>
<div class="p7">测试文本修饰线</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
