CSS学习记录

wyu72961
1 阅读10分钟

1.什么是CSS

  • 如何学习
  1. CSS是什么
  2. CSS怎么用（快速入门）
  3. CSS 选择器（重点 + 难点）
  4. 美化网页（文字，阴影，超链接，列表,渐变....）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效效果）

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS ：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动....

image.png

1.2、发展史

CSS1.0

CSS2.0 DIV（块） + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画.... 浏览器兼容性~

CSS的3种导入方式

语法一：

image.png 语法二：

image.png

  • 行内样式

image.png

优先级：就近原则

拓展：外部样式两种写法

  • 链接式：
    <link rel="stylesheet" href="css/style.css">
  • 导入式： @import 是CSS 2.1特有的！
    <style>
    @import url("css/style.css");
    </style>

css的优势:

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录!

2.选择器

2.1、基本选择器

  1. 标签选择器：选择一类标签 标签{}

image.png 2. 类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

image.png 3、Id选择器：全局唯一！ #id名{} image.png

  • 优先级 id>class>普通标签

2.2、层次选择器

  • 1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选则器*/
body p{

background: red;

}
.box li { ... }：会选择 class="box"的元素内部所有的 <li>标签，
无论这些 <li>是直接子级，还是嵌套在 <ul>、<div>等更深的层级里。
  • 2、子选择器，一代，儿子
/*子选择器*/
body>p{

background: #3cbda6;

}
  • 3、相邻兄弟选择器 同辈
/*相邻弟选择器: 只有一个，相邻（向下） */

.active + p{

background: #a13d30;

}
  • 4、通用选择器

image.png

2.3 结构 伪类选择器

“伪类”是指元素在特定状态、位置或条件下的一种“逻辑上的分类”

常见伪类示例：

  1. 动态/用户交互伪类（由用户行为触发状态）：

    • :hover- 鼠标悬停时
    • :active- 鼠标点击按下的瞬间
    • :focus- 获得焦点时（如表单输入框被点击）
    • :visited- 链接已被访问过
    • :link- 未被访问的链接

  2. 结构伪类（由元素在文档树中的位置决定）：

    • :first-child- 是其父元素的第一个子元素
    • :last-child- 是其父元素的最后一个子元素
    • :nth-child(n)- 是其父元素的第 n 个子元素
    • :nth-of-type(n)- 是其父元素内同类型标签的第 n 个
/*<!--选择ul的第一个子元素-->*/
ul li:first-child{
    background-color: red
}
/*选择ul的最后一个子元素*/
ul li:last-child{
    background-color: green
}

image.png

image.png

2.4属性选择器

  • =：完全等于
  • *=:含有
  • ^=:以什么为开头
  • $=:以什么为结尾
/*存在id属性的a标签改背景颜色为红色*/
a[id]{
    background-color: red;
}
/*id属性为first的的a标签改背景颜色为红色*/
a[id=first]{
    background-color: green;
}
/*class属性含有links的的a标签改背景颜色为黄色
=：完全等于
*= 含有  */
a[class*="links"]{
    background-color: #7c6775;
}
/*href属性为http开头的的a标签改背景颜色
^=:以什么为开头  */
a[href^="http"]{
    background-color: #d20cd8;
}

3. 美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户的体验

span标签：重点要突出的字，使用 span 套起来

image.png

3.2 字体样式

  • font-family: 楷体;/字体样式/
  • font-size: 50px;/字体大小/
  • font-weight: bold;/字体粗细/

image.png

image.png

image.png

image.png

3.3 文本样式

1、颜色

image.png

2、文本对齐的方式

text-align: center;/*文本居中（居左，右）*/

3、首行缩进

text-indent: 2em;/*首行缩进*/

4、行高

line-height: 1.5em;/*行高*/

image.png

5、装饰

text-decoration: underline;/*CSS 文本装饰属性*/

主要功能（常用值）：

  1. **none**​ (默认)

    • 功能：清除所有文本装饰，比如去掉链接自带的下划线。
    • 示例：a { text-decoration: none; }

  2. underline

    • 功能：在文本下方添加一条装饰线。
    • 示例：h1 { text-decoration: underline; }

  3. overline

    • 功能：在文本上方添加一条装饰线。
    • 示例：.special { text-decoration: overline; }

  4. line-through

    • 功能：在文本中间添加一条删除线（常用于表示原价或已删除内容）。
    • 示例：del { text-decoration: line-through; }

  5. **blink**​ (已废弃，不推荐使用)

    • 功能：让文本闪烁（大多数现代浏览器已不再支持）。

image.png

image.png

image.png

3.4 阴影

image.png image.png

3.5 超链接伪类

image.png

3.6 列表

/*list-style:*/
/*none 去掉原点*/
/*circle 空心圆*/
/*decimal 数字*/
/*square 正方形*/
ul li{
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7 背景

  • 背景图片
div{
    width: 100%;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/img.png");
    /*默认为平铺样式*/
}
.div1{
    /*仅水平平铺*/
    background-repeat: repeat-x;
}
.div2{
    /*仅竖直平铺*/
    background-repeat: repeat-y;
}
.div3{
    /*不平铺*/
    background-repeat: no-repeat;
}

image.png

3.8 渐变

image.png

4 盒子模型

4.1 什么是盒子模型

  • margin: 外边距

  • padding: 内边距

  • border: 边框

4.2 边框

1、边框的粗细

2、边框的样式

3、边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    a,h2,ul,p,body{
      margin: 0;/*标签总有一个自带的内外边距,样式，我们一般初始化时都清除掉*/
      padding: 0;
      text-decoration: none;
    }
    #box{
      width: 300px;
      border: 1px solid red;/*粗细，样式，颜色*/
h2{
  text-align: center;
  font-size: 16px;
  background: red;
}
      form{
        background-color: #e63737;
      }
      div:nth-of-type(1) input{
          border: 2px solid black;
      }
      div:nth-of-type(2) input{
        border: 2px dashed black; /*dashed:虚线*/
      }
       
    }
  </style>
</head>
<body>
<div id="box">
  <h2>会员登录</h2>
  <form action="">
    <div>
      <span>姓名</span>
      <input type="text" placeholder="请输入姓名">
    </div>
    <div>
      <span>密码</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

4.3 内外边距

  • 盒子大小的计算：margin+padding+border+内容大小

image.png

4.4 圆角

image.png

4.5 阴影

image.png 这个值由四个部分组成：

  1. 10px​ (第一个值)：水平阴影偏移量。正值阴影在元素右侧，负值在左侧。这里是 10px，表示阴影向右偏移 10 像素。
  2. 10px​ (第二个值)：垂直阴影偏移量。正值阴影在元素下方，负值在上方。这里是 10px，表示阴影向下偏移 10 像素。
  3. **20px**​ (第三个值)：阴影模糊半径。这个值越大，阴影的边缘就越模糊、越扩散。值为 0时阴影是硬边缘。这里是 20px，表示阴影有 20 像素的模糊效果。
  4. #e63737​ (第四个值)：阴影颜色。这里使用的是一个十六进制的颜色值，是一种暗红色。

5 浮动

5.1标准文档流

块级元素：独占一行

1 h1~h6 p div 列表…

行内元素：不独占一行

1 span a img strong…

行内元素 可以被包含在 块级元素中，反之，则不可以~

5.2display

image.png

5.3 float

image.png

5.4父级边框元素塌陷问题

-当子元素设定为浮动元素后，与其父元素不在一个图层，导致父元素塌陷，缩小为一条线 image.png 解决方案

  1. 增加父元素的高度，直接大到足够包含浮动起来的子元素
  2. 父元素里面最后加一个清除float的div 在父元素末尾添加一个空的 <div style="clear: both;"></div>，其工作原理如下：
  • 定位规则：clear: both;的CSS规则规定：一个设置了 clear: both;的非浮动块级元素，它的上边框外边缘必须出现在它前面所有左浮动和右浮动元素的下边框外边缘**之下。
  • 强制位移：为了满足这条规则，这个空div会被强制向下推，直到它自己“认为”它已经位于所有浮动元素的下方。
  • 连锁反应：这个空div是父元素的最后一个子元素。当它被向下推，移到了浮动盒子的下方时，父元素在计算自身高度时，就必须包含这个被推下去的子元素。
  • 结果：为了能容纳这个位于最底部的、被 clear属性强制下移的空div，父元素的高度就被“撑开”了，从而“间接”包裹住了内部所有的浮动子元素。

image.png 3. 在父元素上设置 overflow属性（值为 hidden、auto或 scroll）

  • overflow属性（除了默认值 visible之外）有一个鲜为人知但至关重要的副作用：它会为该元素创建一个新的块格式化上下文
  • overflow的原意是为了处理超出父元素大小的子元素，可以隐藏、加scroll条等
  1. 父类添加一个伪类 和div一个原理
  • ::after是一个强大的CSS工具，它允许开发者在不修改HTML结构的前提下，通过CSS添加视觉或功能性的内容。在清除浮动的上下文中，它创建了一个看不见的“撑杆”，巧妙地解决了父元素高度塌陷的问题，是现代CSS布局中的标准解决方案。 image.png

image.png

在2026年的今天，除非有老旧浏览器的兼容性需求，否则应该使用 ::表示伪元素，:表示伪类。这样代码更符合现代标准，可读性更好，也便于其他开发者理解意图。

小结:

  1. 浮动元素后面增加空div

    简单，代码中尽量避免空div

  2. 设置父元素的高度

    简单，元素假设有了固定的高度，就会被限制

  3. overflow

    简单，下拉的一些场景避免使用

  4. 父类添加一个伪类：after（推荐）

    写法稍微复杂一点，但是没有副作用，推荐使用！

对比

  • display

    方向不可以控制

  • float

    浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题-

6、定位

6.1、相对定位

  • top bottom left right
  • 相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
/*相对定位：relative
top:-10px 距离原位置的上边框离开-10px的距离，也就是接近10px*/
position: relative;
top:-10px;
left:10px

image.png

6.2、绝对定位

1、没有父级元素定位的前提下，相对于浏览器定位；父级元素有元素定位指有relative或absolute

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

6.3 fixed固定定位

div:nth-of-type(1){/*绝对定位 相对于浏览器边界*/
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  right: 0;
  bottom: 0;
}
div:nth-of-type(2){/*固定定位 不随滚动条而滚动*/
    width: 50px;
    height: 50px;
    background: #95ec93;
    position: fixed;
    right: 0;
    bottom: 0;
}

image.png

6.4、z-index

  • 图层，最低0 最高999
  • z-index属性只对设置了定位属性（position值为 relative、absolute、fixed或 sticky）的元素有效。对于 position: static;（默认值）的元素无效。 image.png 层叠规则（从下到上）
  1. 根元素背景/边框（<html>）
  2. 负z-index的定位元素（值越小越靠下）
  3. 块级元素（非定位的div、p等）
  4. 浮动元素
  5. 行内元素（非定位的span、a等）
  6. z-index: auto或0的定位元素
  7. 正z-index的定位元素（值越大越靠上）
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;  /* 遮罩层 */
}

.modal-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;  /* 内容要在遮罩层之上 */
}

image.png

avatar
文章
阅读
粉丝