CSS层叠样式表-蒲公英云

CSS

作用
如何在 html 页面中添加 css 样式
CSS 选择器
颜色赋值方式
背景图片
文本和字体相关的样式
display:元素的显示方式
盒子模型
- 盒子模型之 Content 内容
- 盒子模型之 Margin 外边距
- 盒子模型之边框 border
- 盒子模型之内边距 padding
- 部分标签会带盒子模型中的某些样式
CSS 三大特性
居中相关
定位
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 浮动定位
溢出设置
显示层级
行内元素垂直对齐方式 vertical-align

作用

在这里插入图片描述

如何在 html 页面中添加 css 样式

在这里插入图片描述

CSS 选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* id 选择器 */
    #bx {
      color: blue;
    }
    /* 类选择器 */
    .c1 {
      color: green;
    }
    /* 分组选择器 */
    h1, #bx, .c1 {
      background-color: yellow;
    }
    /* 属性选择器 */
    input[type='text'] {
      color: red;
    }
    input[type='password'] {
      color: blue;
    }
    /* 任意元素选择器 */
    * {
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="text">
<input type="password">
<h1>这是h1</h1>
<p id="bx">冰箱</p>
<p class="c1">洗衣机</p>
<div>苹果</div>
<div class="c1">香蕉</div>
</body>
</html>

颜色赋值方式

在这里插入图片描述

背景图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h1 {
      color: red;
      color: #00ff00;
      color: #00f;
      color: rgb(255,0,0);
      color: rgba(255,0,0,0.5);
    }
    #d1 {
      width: 200px;
      height: 200px;
      background-color: purple;
      /* 设置图片 */
      background-image: url("../b.png");
      /* 设置图片大小 */
      background-size: 100px 100px;
      /* 禁止重复 */
      background-repeat: no-repeat;
      /* 设置背景图片位  横向偏移值  纵向偏移值 */
      background-position: 50px 100px;
      /* 通过百分比控制位置 */
      background-position: 50% 50%;
    }
    #d2 {
      width: 611px;
      height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
      background-repeat: no-repeat;
      background-size: 318px 319px;
      background-position: 90% 70%;
    }
    #d3 {
      width: 375px;
      height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
      background-repeat: no-repeat;
      background-size: 292px 232px;
      background-position: 80% 85%;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div></div>
<h1>颜色测试</h1>
</body>
</html>

文本和字体相关的样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      width: 200px;
      height: 50px;
      border: 1px solid red;
      /* 水平对齐方式 */
      text-align: center;
      /* 文本修饰    overline 上划线       underline 下划线      line-through 删除线  */
      text-decoration: line-through;
      /* 多行文本可以控制行间距， 单行文本可以控制垂直居中 */
      line-height: 50px;
      /* 文本阴影：颜色 x偏移值 y偏移值 浓度(值越小，越清晰) */
      text-shadow: red 10px 10px 3px;
      /* 字体大小 */
      font-size: 30px;
      /* 字体加粗 */
      font-weight: bold;
      /* 斜体 */
      font-style: italic;
      /* 设置字体 */
      font-family: cursive;
    }
    h1 {
      /* 去掉加粗 */
      font-weight: normal;
      /* 设置字体大小和字体 */
      font: 20px cursive;
    }
    a {
      /* 去掉下划线 */
      text-decoration: none;
    }
  </style>
</head>
<body>
<h1>这是h1</h1>
<a href="">超链接</a>
<div>文本和字体相关</div>
</body>
</html>

display:元素的显示方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      width: 100px;  /* 默认宽度为上级元素的宽度 */
      height: 100px;   /* 默认高度为内容高度 */
      border: 1px solid red;
    }
    span {
      border: 1px solid blue;
      /* 行内元素默认宽高为内容宽高，不能通过 width/height 修改宽高 */
      width: 100px;
      height: 100px;
      /* 如果必须修改行内元素的宽高需要将显示方式改成块级或行内块 */
      display: inline-block;
    }
    img {
      width: 100px;
      height: 100px;
      display: none;   /* 隐藏元素 */
    }
    a {
      color: white;
      width: 132px;
      height: 40px;
      display: block;
      line-height: 40px;
      /* 设置圆角 */
      border-radius: 3px;
      text-align: center;
      text-decoration: none;
      background-color: #0aa1ed;
    }
  </style>
</head>
<body>
<a href="">查看详情</a>
<img src="../b.png">
<img src="../b.png">
<img src="../b.png">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

盒子模型

在这里插入图片描述

盒子模型之 Content 内容

在这里插入图片描述

盒子模型之 Margin 外边距

在这里插入图片描述

盒子模型之边框 border

在这里插入图片描述

盒子模型之内边距 padding

在这里插入图片描述

部分标签会带盒子模型中的某些样式

在这里插入图片描述

CSS 三大特性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三大特性</title>
  <style>
    div {
      color: red;
    }
    p {
      /* important 将样式的优先级提升到最高 */
      color: green !important;
    }
    #p1 {
      color: blue;
    }
  </style>
</head>
<body>
<p id="p1">p1</p>
<div>
  div
  <p>p2</p>
  <span>span</span>
  <a href="">超链接</a>
</div>
</body>
</html>

居中相关

在这里插入图片描述

注意:
元素设置为行内元素，会受上级元素 text-align: center 影响,如果设置的时块级元素，元素自身不会受到上级元素 text-align: center 影响，元素会继承上级元素的 text-align: center 让元素的内容居中，如果需要单独让块级元素自身居中的话，需要通过外边距 margin: 0 auto 来设置居中

定位

在这里插入图片描述

静态定位

在这里插入图片描述

相对定位

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三大特性</title>
  <style>
    div {
      color: red;
    }
    p {
      /* important 将样式的优先级提升到最高 */
      color: green !important;
    }
    #p1 {
      color: blue;
    }
  </style>
</head>
<body>
<p id="p1">p1</p>
<div>
  div
  <p>p2</p>
  <span>span</span>
  <a href="">超链接</a>
</div>
</body>
</html>

绝对定位

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    #d1 {
      /* 设置绝对定位 */
      position: absolute;
      /* 元素相对于窗口做偏移 */
      right: 0;
      top: 0;
    }
    #big {
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 100px 0 0 100px;
      position: relative;   /* 以当前元素为参照物 */
    }
    #big > div {
      width: 100px;
      height: 100px;
      background-color: green;
      margin: 50px 0 0 50px;
    }
    #big > div > div {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<div id="big">
  <div>
    <div></div>
  </div>
</div>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

固定定位

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
  <style>
    #d1 {
      width: 1000px;
      height: 100px;
      background-color: red;
      /* 设置固定定位 */
      position: fixed;
      top: 0;
      left: 0;
    }
    body {
      padding-top: 100px;  /* 让 body 里的内容往下移动 100px */
    }
    #d2 {
      width: 50px;
      height: 200px;
      background-color: blue;
      position: fixed;
      right: 40px;
      bottom: 50px;
    }
  </style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<img src="../b.png" alt="">
<img src="../b.png" alt="">
<img src="../b.png" alt="">
<img src="../b.png" alt="">
<img src="../b.png" alt="">
<img src="../b.png" alt="">
<img src="../b.png" alt="">
</body>
</html>

浮动定位

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动定位</title>
  <style>
    body > div {
      width: 200px;
      border: 1px solid red;
        /* 当元素的所有子元素全部浮动后，元素自动识别的内容高度为 0，
           这样会导致后面的元素顶上来，最终呈现出异常的效果，
           给元素添加 overflow: hidden
        */
        overflow: hidden;
    }
    #d1 {
      width: 50px;
      height: 50px;
      background-color: red;
        float: right;
    }
    #d2 {
      width: 50px;
      height: 50px;
      background-color: green;
        float: right;
    }
    #d3 {
      width: 50px;
      height: 50px;
      background-color: blue;
        float: right;
    }
  </style>
</head>
<body>
<div>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</div>
</body>
</html>