CSS学习第二章

1.span标签

index:

重点要突出的字,使用span套起来。

 <style>
#title{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title">java</span>
</body>
</html>


2.字体样式
重点记忆,使用频率较高。
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family:字体
font-size:字体大小
font-weight:字体的粗细
color:字体颜色
px:像素
em:缩进字符
-->
<style>
body{
font-family:"Arial Black",楷体;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;color: #a13d30;
}


</style>
</head>
<body>
<h1>《山海经》</h1>
<p class="p1">(《Classic of Mountains and Rivers》),成书于战国时期至汉代初期,与《易经》《黄帝内经》并称为上古三大奇书。</p>
<p>《山海经》包含着关于上古地理、历史、神话、天文、动物、植物、医学、宗教以及人类学、民族学、海洋学和科技史等方面的诸多内容,是一部上古社会生活的百科全书。</p>
<p>《山海经》展示的是远古的文化,记录的是大荒时期的生活状况与人们的思想活动,勾勒出了上古时期的文明与文化状态,为后世提供了许多有用的信。</p>
<p>
Thank you for comfotting me when I'm sad,

Loving me when I'm mad,

Picking me up when I'm down,

Thank you for being my friend and being around,

Teaching me the meaning of love,

Encouraging me when I need a shove,

But most of all thank you for,

Loving me for who I am.
</p>
</body>
</html>
index2<head> <meta charset="UTF-8">
    <title>Title</title>
<!--字体的风格:
有顺序1.字体风格。2.字体粗细。3.字体大小。4.字体样式
font:后有一个空格
-->
<style>
p{
font: oblique bolder 20px "楷体";
}
</style>
</head>
<body>
<p>《山海经》包含着关于上古地理、历史、神话、天文、动物、植物、医学、宗教以及人类学、民族学、海洋学和科技史等方面的诸多内容,是一部上古社会生活的百科全书。</p>

</body>


3.文本样式
index1
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色:
单词
RGB 0~F
RGBA A;0~1 透明度

text-align:排版 center:居中 right:居右 left:居左
text-indent: 2em; 段落首行缩进
height: 300px;
line-height: 300px;
行高 和块的高度一致,就可以上下居中
行高 line-height :单行文字上下剧中 line-height=height
-->
<style>
h1{
color:rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #1442db;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration:underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}



/* 注意:a 标签有下滑线,去掉下划线在下方操作*/
/* a{*/
/* text-decoration:none ;*/
/* }*/


</style>
</head>
<body>
<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>
<h1>《山海经》</h1>
<p class="p1">(《Classic of Mountains and Rivers》),成书于战国时期至汉代初期,与《易经》《黄帝内经》并称为上古三大奇书。</p>
<p>《山海经》包含着关于上古地理、历史、神话、天文、动物、植物、医学、宗教以及人类学、民族学、海洋学和科技史等方面的诸多内容,是一部上古社会生活的百科全书。</p>
<p class="p3">《山海经》展示的是远古的文化,记录的是大荒时期的生活状况与人们的思想活动,勾勒出了上古时期的文明与文化状态,为后世提供了许多有用的信。</p>
<p>
Thank you for comfotting me when I'm sad,

Loving me when I'm mad,

Picking me up when I'm down,

Thank you for being my friend and being around,

Teaching me the meaning of love,

Encouraging me when I need a shove,

But most of all thank you for,

Loving me for who I am.
</p>
</body>
</html>
index2
<head>

<meta charset="UTF-8">
    <title>Title</title>
<!--文本图片水平对齐
水平对齐→参照物 a,b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>

<p>
<img src="../3.文本样式/imagers/嘻嘻.jpg" alt="">
<span>Thank you for comfotting me when I'm sad。</span>
</p>
</body>
4.超链接伪类
index (建立一个images文件夹)





posted @ 2022-04-06 07:33  LiLime  阅读(30)  评论(0)    收藏  举报