CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

在那个黄昏/

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量62

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42267869/article/details/119569664

版权

CSS

在这里插入图片描述

CSS三种导入方式

在这里插入图片描述

2. 选择器

2.1 基本选择器

标签选择器：选择一类标签标签{ }
类选择器 class：选择所有class属性一致的标签，跨标签 .类名{ }
ID选择器：全局唯一 #id名{ }

优先级：id > class > 标签
在这里插入图片描述

2.2 层次选择器

在这里插入图片描述

2.3 结构伪类选择器

在这里插入图片描述

2.4 属性选择器

在这里插入图片描述

3. 美化网页元素

3.1 美化、字体样式

在这里插入图片描述

3.2 文本样式

颜色、对齐方式、行高、缩进、装饰
在这里插入图片描述

3.3 文本阴影超链接伪类

在这里插入图片描述

3.4 列表

在这里插入图片描述

3.5 背景

在这里插入图片描述

3.6 渐变

在这里插入图片描述

4. 盒子模型

4.1 盒子

在这里插入图片描述
margin：外边距
padding：内边距
border：边框

4.2 边框

边框的粗细、颜色、样式
在这里插入图片描述

4.3 外边框

margin、padding
在这里插入图片描述

4.4 圆角边框

在这里插入图片描述

4.5 阴影

在这里插入图片描述

5. 浮动

5.1 display

在这里插入图片描述
行内元素可以被包含在块级元素中，反之则不可以。

display也是一种实现行内元素排列的方式，但是我们很多情况用float

5.2 float

左右浮动float
在这里插入图片描述

5.3 父级边框塌陷问题

在这里插入图片描述

解决方案：

5.4 对比

在这里插入图片描述

6. 定位

6.1 相对定位

在这里插入图片描述

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    #box{
      width: 300px;
      height: 300px;
      padding: 10px;
      border: 2px solid red;
    }

    a{
      width: 100px;
      height: 100px;
      text-decoration: none;
      line-height: 100px;
      background-color: #ffa2fc;
      color: white;
      display: block;
      text-align: center;
    }

    a:hover{
      background-color: skyblue;
    }
    .a2,.a4{
      position: relative;
      left: 200px;
      top: -100px;
    }
    .a5{
      position: relative;
      left: 100px;
      top: -300px;
    }
  </style>
</head>
<body>

<div id="box">
  <a class="a1" href="#"> 链接1 </a>
  <a class="a2" href="#"> 链接2 </a>
  <a class="a3" href="#"> 链接3 </a>
  <a class="a4" href="#"> 链接4 </a>
  <a class="a5" href="#"> 链接5 </a>
</div>

</body>
</html>

6.2 绝对定位

在这里插入图片描述

6.3 固定定位

在这里插入图片描述

6.4 z-index和透明度

z-index：默认是0，最高无限～999
在这里插入图片描述

7. 动画

canvas动画
css动画
菜鸟教程

在那个黄昏/

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSSCSS三种导入方式2. 选择器2.1 基本选择器标签选择器：选择一类标签标签{ }类选择器 class：选择所有class属性一致的标签，跨标签 .类名{ }ID选择器：全局唯一 #id名{ }优先级：id > class > 标签2.2 层次选择器2.3 结构伪类选择器2.4 属性选择器3. 美化网页元素3.1 美化、字体样式3.2 文本样式颜色、对齐方式、行高、缩进、装饰3.3 文本阴
复制链接

扫一扫