02-CSS3核心技术

原创 于 2025-10-26 17:13:23 发布 · 537 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #前端 #html

02-CSS3核心技术

选择器

选择器语法选择范围实例
后代选择器A B所有后代（跨层级）ul li {color: pink;}
子代选择器A>B直接子元素（仅一层）div>span {color: pink;}
邻接兄弟选择器A+B紧邻的下一个同级元素h2+p {}标题后的第一个p元素
通用兄弟选择器A~BA之后的所有同级元素h2~p {} 标题后的所有p元素

字体样式

属性描述常见取值示例
color设置文本内容的颜色颜色名称（red，blue）
十六进制（#ff0000）、RGB（rgb（255，0，0））、RGBA（rgba（255，0，0，0.5））		color: red;
color: #3366cc
font-family设置文本的字体系列无衬线字体font-family: “Microsoft YaHei”, sans-serif;
font-size设置文本的大小pxfont-size: 16px;
font-style设置文本的样式normal（正常）、italic（斜体）font-style: normal;
font-weight设置文本的粗细数值（100-900）、关键字（normal，bold）font-weight: 400;
fout-weight: 700;
text-decoration设置文本的装饰效果none（无装饰）
underline（下划线）
overline（上划线）
line-through（中划线）		text-decoration:underline;
text-decoration:line-through;

font可简写，语法为：font: font-style font-weight font-size/line-height font-family;

其中font-size和font-family 必须写

示例：font: 14px/1.5 “宋体”;

文本布局

属性名作用核心取值注意事项示例
text-align设置文本的水平对齐方式left、right、center、justify、（两端对齐）仅对块级元素生效p {text-align: center; }
text-indent设置首行文本的缩进量长度值（如20px、2em）仅对块级元素生效p { text-indent: 2em;}
letter-spacing设置文本中字符之间的间距数值负值可使字符重叠（需谨慎使用）h1 {letter-spacing: 2px;)
line-height设置文本行与行之间的垂直间距像素或者倍数1.5 当前字体大小1.5倍行高等于高，单行文字垂直居中p {line-height: 1.6; }

伪类选择器

状态伪类选择器

根据用户交互或状态变化选择。

  • :link 未访问链接

  • :visited 已访问链接

  • :hover 鼠标悬停链接

  • :focus 获得焦点伪类

    示例：

    .search {
      width: 100px;
      height: 20px;
      transition: .5s;
    }

    /* :focus 获得焦点伪类  */
    .search:focus {
      background-color: red;
      width: 200px;
    }

结构伪类选择器

根据元素的位置选择。

  • :first-child 选择第一个小li

  • :last-child 选择最后一个小li

  • :nth-child(3) 选择第3个小li

  • :nth-child(odd) 选择奇数个元素

  • :nth-child(even) 选择偶数个元素

  • :nth-child(5n) 选择5的倍数个元素

  • :nth-child(n+3) 选择第3个以后的元素

  • :nth-child(-n+2) 选择第2个之前的元素

    示例：

    /* 选择第2个之前的元素 */
    .ul2 li:nth-child(-n+2) {
      color: blue;
    }

表单伪类选择器

针对表单元素的状态。

  • border-collapse: collapse; 合并相邻边框
  • border: 1px solid #f1f1f1; 边框 1像素 实线 颜色
  • margin: 0 auto; 让表格在页面中水平居中显示
  • text-align: center; 让表格里面的文字水平居中
  • {

​ margin: 0;

​ padding: 0;

​ } 去掉内外边距

  • button:disabled {

    ​ /* 透明度，让整个按钮透明 0~1 */

    ​ opacity: .4;

    ​ } 表单禁用伪类选择器

  • input:checked+label {

    ​ color: #ff6900;

    ​ } 表单被选中伪类选择器

伪元素选择器

选择元素的特定部分。

.nav 类选择器

:hover 伪类选择器

::before 伪元素选择器

  • ::first-line 选择首行
  • ::first-letter 首字母
  • ::placeholder 选择input或者textarea占位符
  • ::before 元素内插入伪元素，作为第一个元素
  • ::after 元素内插入伪元素，作为最后一个元素

before和after 是插入的伪元素，特性类似内联元素。

content属性是必须，不能省略，没有内容空引号即可。

示例：

div::before {
    /* content用单引号双引号都可以 */
      content: '我是';
      color: red;
    }

属性选择器

[属性] 匹配包含指定属性的元素

[属性=值] 匹配属性值等于指定值的元素

[属性^=值] 匹配属性值以指定字符串开头的元素

[属性$=值] 匹配属性值以指定字符串结尾的元素

[属性*=值] 匹配属性值任意位置包含指定子串的元素

示例：

/* 属性选择器 */
    /* 1. 选择包含属性 */
    a[class] {
      color: red;
    } 

    /* 2. 选择属性等于值  完全匹配 */
    a[class="font"] {
      color: red;
    }

    /* 3. 选择属性值以xx开头 */
    a[class^="font"] {
      color: red;
    }

    /* 4. 选择属性值以xx结尾 */
    a[class$=t14] {
      color: red;
    }

    /* 5. 选择属性值包含xx */
    a[class*="font"] {
      color: red;
    }

    input[type="text"],
    input[type="password"] {
      /* 去掉轮廓线 */
      outline: none;
    }

CSS三大特性

1、继承性：子元素继承父级的某些样式，比如文字类。

2、层叠性：如果权重相同的情况下，后面的样式会覆盖前面的样式，就近原则。

3、优先级：哪个选择器权重高，优先执行哪个样式。

选择器类型示例权重值
!importantcolor: red !important;无限大
内联样式
(1,0,0,0)
ID 选择器#myld(0,1,0, 0)
类/属性/伪类.class, [type=“text”](0,0,1,0)
类型(标签)/伪元素div, ::after(0,0,0,1)
通配符/继承*,继承的样式(0, 0, 0, 0)

盒子模型

边框设置

solid实线 dashed虚线 dotted点线

示例：

border: 1px solid #d9e0ee;

border-top: 3px solid #ff8400;

圆角边框

  • 圆形 设置圆角为宽度和高度的一半

    示例：border-radius: 50%;

  • 胶囊按钮 设置圆角为 宽度或者高度较小值的一半

    示例：width: 200px;

    ​ height: 40px;

    ​ border-radius: 20px;

  • 不同角的圆角设置

    • border-radius: 10px;
    • border-radius:10px 20px; 左上 右下是10px，右上 左下20px
    • border-radius 10px 20px 30px; 左上是10px，右上左下是20px，右下30px
    • border-radius: 10px 20px 30px 40px; 左上10px，右上20px，右下30px，左下40px

内边距（padding）

padding:10px; 上下左右4个内边距都是10pX

padding: 10px 20px; 上下内边距是10px，左右内边距是20pX

padding:10px 20px 30px; 上是10px，左右是20px，下是30pX

padding:10px 20px 30px 40px; 上10px，右20px，下30px，左40px(顺时针)

padding-left: 10px; 左10px（可以设置单边）

外边距（margin）

用法同内边距（padding）。

注意：

1.行内元素左右外边距生效，上下外边距无效。
2.行内元素设置宽度和高度无效。
3.行内元素设置内边距和边框生效。

水平居中

块级盒子：margin: 0 auto; （0可省略）

行内盒子：套一个块级盒子再设置水平居中 text-align: center;

合并与塌陷

  • 合并：两个兄弟盒子均有外边框时，两个上下外边距将合并为一个外边距，其大小等于最大的单个外边距。
  • 塌陷：嵌套关系(父子)的区块元素上下外边距会出现塌陷情况。给子盒子设置上下外边距会让父盒子塌陷移动。
    • 给父亲添加上边框或者内边距 border: 1px solid #000; /padding-top: 20px;
    • 父级有上padding padding-top: 1px;（加一点点看不出来，但不如上一种方法）
    • 给父级添加 overflow: hidden;

尺寸计算

在这里插入图片描述

box-sizing 用于定义元素的 盒模型计算方式，控制元素的 width 和 height 是否包含 padding 和 border。

示例：

body *, body *::before, body *:after {box-sizing::border-box}

背景渐变与文字渐变

  • 线性渐变（方向可控）：linear-gradient(方向,颜色1 位置,颜色2 位置…)

​ 示例：

​ background: linear-gradient(to right, #ff6b6b,#4ecdc4);

​ background-image: linear-gradient(90deg, #ff6b6b 30%, #4ecdc4 70%);

​ background: repeating-linear-gradient(45deg, #ff6b6b, #ff6b6b 10px, #4ecdc4 10px, #4ecdc4 20px); 重复线性渐变

​ background: linear-gradient(to right, rgba(255,107,107,0.8), rgba(78,205,196,0.8)); 透明渐变

  • 径向渐变(形状和位置可控)：radial-gradient(形状 大小 at 位置, 颜色停止点1, 颜色停止点2, …)

    ​ 示例：

    ​ background: radial-gradient(circle closest-side at 30% 30%, #ff6b6b, #4ecdc4);

    • 性状：circle（圆形）或 ellipse（椭圆形，默认）
    • 大小（可选）：closest-side、farthest-side、closest-corner、farthest-corner
    • 位置（可选）：使用 at 关键字指定渐变中心点，如 at center、at top left、at 20% 80%
    • 颜色停止点：颜色值，可指定位置百分比，如 #ff0000 0%, #0000ff 100%

  • 文字渐变需添加：

      /* 兼容性写法，照顾谷歌老版本浏览器 -webkit- */
  -webkit-background-clip: text;
  /* 文字范围裁剪背景 */
  background-clip: text;
  /* 文本填充颜色设置为透明 */
  -webkit-text-fill-color: transparent;

背景常用属性：

属性作用常用值示例代码
background-color设置元素背景颜色颜色名称、十六进制、RGB、透明度background-color: #fOf0f0;
background-image设置背景图片url(image.jpg)background-image: url(bg.png);
background-repeat控制背景图片是否重复repeat(默认)、no-repeat、repeat-x、repeat-ybackground-repeat:no-repeat
background-position定位背景图片位置x y(如 center、top，或者 px、%单位)background-position:center;
background-size调整背景图片尺寸默认auto、cover(覆盖)、contain(包含)或者跟px、%background-size:cover;
background-attachment背景是否随页面滚动scroll(默认)、fixedbackground-attachment:fixed;

背景复合写法：background: 颜色 图片 重复 固定 位置/尺寸; 顺序无关

盒子阴影、过渡和初始化

  • 盒子阴影：box-shadow:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色;

    • 多个属性用空格隔开
    • X轴偏移量和Y轴偏移量是必须要写，其余可以省略采取默认值
    • 默认是外阴影，如果改为内阴影要写inset

    示例：

    .nav li {

    ​ box-shadow:0 15px 30px rgba(0,0,0,.1);

    }

  • 过渡：transition:过渡属性 过渡时间;

    • 属性值中间空格隔开
    • 过渡属性如果都要变化可以写 all
    • 过渡时间单位是秒s，比如 0.2s 等

    示例：

    input:hover {

    ​ transition: all 0.3s;

    }

注意：过渡写到盒子身上。 谁做过渡给谁加

  • 初始化：
    /* css初始化 简单重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 清除列表默认样式 */
    ul,
    ol {
      list-style: none;
    }

    /* 清除a标签默认下划线 */
    a {
      text-decoration: none;
    }

    /* 清除input默认轮廓线 */
    input,
    button {
      outline: none;
    }

文本溢出省略

  • 单行文本溢出省略
  /* 单行文本溢出省略 */
  /* 溢出隐藏 */
  overflow: hidden;
  /* 文本溢出显示省略号 */
  text-overflow: ellipsis;
  /* 强制文字一行显示， 不换行 */
  white-space: nowrap;
  • 多行文本溢出省略
/* 多行文本溢出显示省略号   修改盒子高度为 正好显示行数的高度*/
      /* 旧版弹性盒子布局 */
      display: -webkit-box;
      /* 文本垂直排列 */
      -webkit-box-orient: vertical;
      /* 限制显示行数 */
      -webkit-line-clamp: 2;
      /* 隐藏溢出内容 */
      overflow: hidden;
      /* 文本溢出显示省略号 */
      text-overflow: ellipsis;

使用图标

在这里插入图片描述

iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/

绥昭
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值