HTML（DAY02）

江户川小猿

已于 2024-06-14 10:00:14 修改

阅读量134

点赞数 3

文章标签： html css javascript

于 2024-06-14 08:44:31 首次发布

本文链接：https://blog.csdn.net/m0_72416265/article/details/139662379

版权

1. css字体样式的应用

css使用方式总结

定义在外部文件（外链样式）：开发中主要是通过这种形式定义样式。（推荐）
在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。
定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。（不推荐）

总结-CSS的基本选择器

标签选择器：针对一类标签

p {
    font-size: 16px;
    color: red;
}

类选择器：针对你想要的所有标签使用

.box {
    font-size: 20px;
    color: green;
}

ID选择器：针对某一个特定的标签使用

#nav {
    font-size: 24px;
    color: blue;
}

通用选择器（通配符）：针对所有的标签都适用（不建议使用）

* {
    font-size: 24px;
    color: blue;
}

<!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>
    .text1 {
      color: rgb(254, 200, 3);
      font-size: 30px;
      font-weight: 700;
    }

    .con1 {
      width: 400px;
      height: 100px;
      background-color: #CCCCCC;
      color: #94208A;
    }

    .text5 {
      font-size: 40px;
      color: #FCC104;
    }

    .text6 {
      color: #5B7C11;
      font-size: 30px;
      font-family: serif;
      font-weight: 700;
    }

    .text7 {
      color: #FB042A;
      font-size: 40px;
      font-family: Arial;
      font-weight: 700;
    }

    .text8 {
      color: #CACACA;
      font-family: Helvetica;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <ul>
    <li>1. 每天告诉自己一次，『我真的很不错』</li>
    <li>2. 生气是拿别人做错的事来惩罚自己</li>
    <li>3. 生活中若没有<span class="text1">朋友</span>，就像生活中没有阳光一样</li>
  </ul>
  <div class="con1">
    <p>4. 明天的希望，让我们忘了今天的痛苦</p>
  </div>
  <p>5. 生活若剥去了<span class="text5">理想</span>、梦想、幻想，那生命便只是一堆空架子 </p>
  <p class="text6">6.获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的</p>
  <p class="text7">7. 发光并非太阳的专利，你也可以发光</p>
  <p class="text8">8. 获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的 </p>
  <p class="text8">9. 贪婪是最真实的贫穷，满足是最真实的财富</p>
  <p class="text8">10. 你可以用爱得到全世界，你也可以用恨失去全世界</p>
</body>

</html>

2. 伪类标签

/* 未访问的链接 */
:link
/* 已访问的链接 */
:visited
/* 鼠标移动到链接上 */
:hover
/* 选定的链接 */
:active

<!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> 
  a{
      text-decoration: none;
      color: black;
      font-size: 30px;
    }
    a:hover{
      color: #990000;
      text-decoration: underline;
    }
    .text1{
      color: #FE350E;
      font-weight: 700;
    }
    .text2{
      color: #FF7205;
      font-weight: 700;
    }
    .text3{
      color: #FF7205;
      font-weight: 700;
    }
    span{
      font-size: 30px;
    }
    a:active{
      color: #FF8400;
    }
    div{
      line-height: 45px;
    }
  </style>
</head>
<body>
  <div><span class="text1">1&nbsp;&nbsp;</span><a href="#">王健林王思聪父子重回创富榜前十</a></div>
  <div><span class="text2">2&nbsp;&nbsp;</span><a href="#">马斯克被曝要求女高管为其生孩子</a></div>
  <div><span class="text3">3&nbsp;&nbsp;</span><a href="#">中专女生爆冷拿下数学竞赛全球12名</a></div>
  <div><span>4&nbsp;&nbsp;</span><a href="#">刘亦菲发疯戏是即兴发挥</a></div>
  <div><span>5&nbsp;&nbsp;</span><a href="#">在博物馆里感受文化绵延生命力</a></div>
  <div><span>6&nbsp;&nbsp;</span><a href="#">已老实 光头求放过</a></div>
  <div><span>7&nbsp;&nbsp;</span><a href="#">黄焖鸡米饭为什么不香了</a></div>
  <div><span>8&nbsp;&nbsp;</span><a href="#">南宁赛龙舟翻船致人员伤亡系谣言</a></div>
  




</body>
</html>

总结体会

须知少时凌云志，曾许人间第一流。希望我们共勉前行。人的一生之所以精彩，是在于自己追逐梦想的过程，不必苛求旁人的喜欢或者不喜欢。走自己的路，让别人说去吧！如果坚持不下去就看看大爱仙尊吧！它一直激励着我坚持下去！

江户川小猿

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML（DAY02）

定义在外部文件（外链样式）：开发中主要是通过这种形式定义样式。（推荐）在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。（不推荐）标签选择器：针对一类标签p {color: red;类选择器：针对你想要的所有标签使用.box {ID选择器：针对某一个特定的标签使用#nav {通用选择器（通配符）：针对所有的标签都适用（不建议使用）* {.text1 {
复制链接

扫一扫