自学前端总结2（自用）

最新推荐文章于 2025-06-26 19:05:17 发布

渴望看海的少年

最新推荐文章于 2025-06-26 19:05:17 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： css 前端

本文链接：https://blog.csdn.net/DespairA/article/details/119009415

前端基础专栏收录该内容

23 篇文章

订阅专栏

<!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>CSS基础</title>
    <link rel="stylesheet" href="demo-02.css" />

    <!--基础选择器：标签选择器、类选择器、id选择器、通配符选择器-->
    <!--
        1、标签选择器：p {color:red;}
        2、类选择器：.类名 {color：red;}--并且在需要添加的结构中添加class="类名"--类名自定义；
        并且可以使用多个类名中间用空格隔开，一个模块可以调用多个类样式，这种类样式即公共类
        例如在多个模块需要使用相同css属性时，可以直接用一个类概括
        3、ID选择器：通过id属性进行调用属性，#id名 {color=red;},在模块中id=id名；
        和类选择器的区别就是id名是唯一的，只能被调用一次，经常和js搭配使用
        4、通配符选择器；* {color:red;}将所有元素都修改样式，特殊使用
    -->
    <!--三种引入方式：内部样式表：即将所有的css写在style标签中。可以控制过个页面
                    外部样式表：css文件，可以控制多个页面，<link rel="stylesheet" href="css文件名">
                    行内样式表：在标签内部例如<p style="color:red; font-size:20px">
                -->
    <style>
      h2 {
        color: red;
      }
      p {
        font-size: 18px;
        font-family: "楷体";
        /*加粗，字体加粗效果*/
        font-weight: 600;
        /*字体的斜体效果，字体样式*/
        font-style: italic;
      }
      /*复合写法，顺序有要求*/
      #div1 {
        color: royalblue;
        font: italic 20px "微软雅黑";
      }
      .p1 {
        /*实际开发中16进制颜色法比较常用*/
        color: rgb(255, 0, 255);
      }
    </style>
  </head>
  <body>
    <h2>这是第一行</h2>
    <p>这是第二行</p>
    <div id="div1">这是第三行</div>
    <p class="p1">这是第四行</p>
    <h4>
      <a href="https://www.baidu.com" class="link">这是一个超链接</a>
      这是一个超链接
    </h4>
    <!-- div然后table键，就可以生成<div></div> -->
    <div></div>
    <!-- div*3就可以快速生成3个div -->
    <div></div>
    <div></div>
    <div></div>
    <!-- 如果有父子级关系的标签可以用ul>li,然后table就可以直接生成 -->
    <ul>
      <li></li>
    </ul>
    <!-- 兄弟级标签可以直接用+号连接，p+div -->
    <p></p>
    <div></div>
    <!-- 如果想要生成带有类名或者id名字的，直接写.demo或者#two然后tab键就可以了 -->
    <div class="demo"></div>
    <div id="two"></div>
    <!-- 如果想生成div类名是有顺序的可以自增$ ，.demo$*5-->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- 如果想要在生成的标签内部内容可以用{}表示 。div{5656}-->
    <div>5656</div>
    <!-- 综合应用 div{2322}.demo$*6-->
    <div class="demo1">2322</div>
    <div class="demo2">2322</div>
    <div class="demo3">2322</div>
    <div class="demo4">2322</div>
    <div class="demo5">2322</div>
    <div class="demo6">2322</div>
  </body>
</html>