css基础

天堂的魔鬼( ˙-˙ )

于 2024-08-16 21:37:51 发布

阅读量186

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_58432692/article/details/141270318

版权

之前写了点html基础，现在补上css基础，很多样式可以参考官网CSS：层叠样式表 | MDN (mozilla.org)

后续会继续陆续更新些学习总结

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css学习</title>
  <style>
    /* 通配符选择器 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /*内减模式*/
    }

    /* 标签选择器 */
    div {
      margin: 0 auto; /*标签水平居中*/
      width: 1000px;
      height: 100px;
      background-color: pink;
    }

    /* 类选择器 */
    .one {
      /* 字体样式 */
      font-size: 30px;
      font-weight: 700;  /*正常：normal 400 加粗：bold 700*/
      font-style: italic; /*正常：normal 倾斜：italic*/
      font-family: Arial, sans-serif; /*无衬线：sans-serif，衬线：serif，等宽：monospace*/
      /* 文本样式 */
      text-indent: 2em; /*缩进2格*/
      text-align: center; /*文本水平居中*/
      text-decoration: underline; /*文本修饰：underlin下划线，line-through删除线，overline上划线*/
      text-shadow: 5px 5px 6px rgba(0, 0, 0, .3); /* 文字阴影 */
      line-height: 100px; /*行高，多行文字设置为1可以取消上下间隔*/
      /* 背景 */
      background-color: blue;
      background-image: url(../images/logo.png);
      background-repeat: no-repeat; /* 1、背景图片不平铺 */
      background-position: 50px top; /*背景图片位置*/
      background-attachment : fixed; /*scroll 随对象内容滚动 fixed 固定*/
      /* 边框 */
      border-width: 5px;
      border-style: solid;
      border-color: rgb(206, 107, 25);
      border-collapse: collapse; /* 合并相邻的边框 */
      border-radius: 20px 50%; /*圆角*/
      /* 盒子阴影 */
      box-shadow: 10px 10px;
      /* 让图片和文字垂直居中 */
      vertical-align: middle;
    }

    /* id选择器 */
    #two {
      background-color: skyblue;
      /* 清楚浮动，解决塌陷 */
      overflow: hidden
      /* 单伪元素和双伪元素法 */
    }

    /* 浮动 */
    #two p {
      margin: 20px;
      float: right;
    }
    
    /* 定位：
    | `relative` | 相对定位 |
    | `absolute` | 绝对定位 |
    | `fixed`    | 固定定位 | 
    */
    
    /* 显示与隐藏：
    1. display 显示隐藏（脱标）
    2. visibility 显示隐藏（不脱标）
    3. overflow 溢出显示隐藏
    */

    /* 鼠标样式：cursor
    | `default`     | 默认箭头 |
    | `pointer`     | 小手     |
    | `move`        | 十字移动 |
    | `text`        | 文本竖杠 |
    | `not-allowed` | 禁止     |
    */

    /* 后代选择器 */
    ul li {
      background-color: red;
    }

    /* 子代选择器 */
    ul>li {
      background-color: red;
    }

    /* 并集选择器 */
    div,
    .three {
      width: 1000px;
      height: 100px;
    }

    /* 交集选择器 */
    div.three {
      background-color: #d4f70e;
    }
    
    /* 结构伪类选择器 */
    ul li:first-child {
      background-color: #d665cd;
    }

    ul li:last-child {
      background-color: #17ca94;
    }

    ul li:nth-child(2) {
      background-color: #77198a;
    }

    /* 伪类选择器 */
    ul li:nth-child(3):hover {
      background-color: #471ab1;
    }

    /* 属性选择器 */
    div[class=four] {
      background-color: hotpink;
    }
    
    /* 伪元素选择器 */
    ul::after {
      display: block; /*默认是行内元素*/

      height: 100px;
      background-color: pink;
      content: '好好学习，天天向上'; /*必须有，否则不显示*/
    }
    
    a {
      /*清除a的文本样式*/
      text-decoration: none; 
      color: black;
    }
  </style>
</head>
<body>
  <div>好好学习，天天向上</div>
  <div class="one">好好学习，天天向上</div>
  <div id="two"><p>好好学习，天天向上</p></div>
  <div class="three">>好好学习，天天向上</div>
  <div class="four">好好学习，天天向上</div>
  <ul>
    <li></li>
    <li>好好学习，天天向上</li>
    <li>好好学习，天天向上</li>
    <li>好好学习，天天向上</li>
  </ul>
  <a href="">其余如动画、精灵图、字体图标等见md笔记</a>
</body>
</html>