首页 前端知识 【前端学习笔记】CSS基础三

【前端学习笔记】CSS基础三

2024-08-16 22:08:11 前端知识 前端哥 492 598 我要收藏

一、CSS变量

CSS变量,也称为CSS自定义属性,是CSS3的一部分,允许开发者在CSS中定义和使用变量。这些变量可以存储值,然后在整个文档中重复使用这些值。使用CSS变量可以提高样式表的可维护性,并且使得主题和设计变量的更改更加容易。

1.基本使用

  • 声明一个自定义属性,属性名以两个减号(--)开始,属性值可以是任何有效的CSS值,并且这个属性和其他属性一样可以写在规则集之内,变量可以在定义它们的选择器及其后代元素中使用。如果需要全局变量,可以定义在:root伪类中。通常放在:root伪类选择器中。:root伪类代表文档的根元素,通常是<html>元素。
  • 在使用CSS变量时,使用 var() 函数包裹所需变量的变量名即可。除了变量名之外,var() 还有第二个参数——备用值。在发现变量值不可访问的情况下,将使用备用值来代替它。(浏览器支持变量,并且该变量设置为无效值,则使用浏览器的默认值)
  • 可以在运行时通过JavaScript动态更新变量的值,从而改变整个文档的样式。获取:window.getComputedStyle(element).getPropertyValue('--color'),设置:element.style.setProperty('--color', 'blue'); (这里的getComputedStyle是用于获取指定元素计算后实际渲染后的所有样式属性,然后再用getPropertyValue获取具体的值,而element.style是元素对象的属性,可以设置。
  • CSS 变量可以通过 CSS 层叠机制进行继承。
  • 可以在媒体查询中重新设置变量,这些重新设置的值可以在任何地方使用,这是预处理器变量无法实现的。
  • CSS变量的变量名(即属性名)对大小写是敏感的,不能使用CSS现有属性名。

2.SASS变量

SASS 变量在定义时需在变量名前加上“$”,在使用变量时直接使用定义的变量名即可,SASS 的问题就在于它是一个预处理器,所以,任何在 SASS 中声明的变量都需要经过编译才能执行。不能在运行时更改变量值

预处理器SASS中的变量范围就是嵌套的大括号块。而由于 CSS 变量是属性,所以它们的作用域是基于 DOM 的。这意味着 CSS 变量是按元素解析的,而不是按作用域解析的。

CSS变量是动态分配的。它们在页面的整个生命周期中会保持活动状态,当更新它们时,所有引用它们的地方都会更新。因为它们是属性,所以可以通过任何更新 CSS 属性的机制来更新它们:样式表、内联样式,甚至 JavaScript。

3.CSS函数

CSS中的函数通常用于在样式表中执行特定的操作,比如颜色混合、转换单位、获取属性值等。以下是一些常见的CSS函数:

  1. RGBA/HSLA

    • rgba(red, green, blue, alpha):定义一个RGBA颜色值,其中alpha是透明度。
    • hsla(hue, saturation, lightness, alpha):定义一个HSLA颜色值。
    background-color: rgba(255, 255, 255, 0.5);
    background-color: hsla(120, 100%, 50%, 0.5);
    
  2. 颜色调整函数

    • color():CSS4中新增的函数,用于创建颜色值,可以指定颜色空间。
  3. 变换函数

    • translate(x, y):在2D空间中移动元素。
    • rotate(angle):旋转元素。
    • scale(x, y):缩放元素。
    • skew(x-angle, y-angle):倾斜元素。
    • matrix(a, b, c, d, e, f):应用2D变换矩阵。
    transform: rotate(45deg) scale(1.5);
    
  4. 渐变函数

    • linear-gradient(angle, color-stop1, color-stop2, ...):创建线性渐变。
    • radial-gradient(shape, color-stop1, color-stop2, ...):创建径向渐变。
    background-image: linear-gradient(to right, red, yellow);
    
  5. 阴影函数

    • box-shadow(x-offset, y-offset, blur-radius, spread-radius, color):添加盒子阴影。
    • text-shadow(x-offset, y-offset, blur-radius, color):添加文本阴影。
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 2px #000;
    
  6. 形状函数

    • circle(radius):定义圆形。
    • ellipse(radii):定义椭圆形。
    • inset(rectangle):定义内嵌矩形。
    shape-outside: circle(50%);
    
  7. 图像函数

    • url(image-url):引用外部图像。
    • image-set(image1x, image1.5x 1.5x, image2x 2x):为不同分辨率定义多个图像。
    background-image: url('background.jpg');
    
  8. 属性函数

    • attr(attribute-name):从元素的属性获取值。
    content: attr(data-title);
    
  9. 环境变量

    • env(variable-name):访问浏览器环境的变量。
  10. 自定义函数

    • CSS本身不支持自定义函数,但可以通过calc()var()等函数实现类似效果。
    width: calc(100% - 20px);
    color: var(--main-color);
    
  11. 数学函数

    • calc(expression):执行CSS表达式计算。
    • min(max, value1, ...):取最大值中的最小值。
    • max(min, value1, ...):取最小值中的最大值。
    width: calc(50% + 20px);
    

这些函数可以提高CSS的灵活性和表达能力,使得样式的编写更加动态和响应式。随着CSS规范的不断发展,未来可能会引入更多的函数。

二、SASS

1.基本定义

Sass 是一个 CSS 预处理器,完全兼容所有版本的 CSS。实际上,Sass 并没有真正为 CSS 语言添加任何新功能。

在 Sass 中支持两种类型的注释:

// 注释一

/* 注释二 */

需要注意,当 Sass 编译成CSS时,第一种注释不会编译到CSS中(只在Sass文件中可见),第二种注释会编译到CSS中。

  1. 变量:使用$符号定义变量,可以存储值并在样式表中重复使用。
  2. 嵌套:通过嵌套这些代码,可以得到类似HTML结构的CSS代码,使代码更具可读性(父子元素)。在编写Sass时,要嵌套嵌套太深,尽量不要超过三层,超过之后就会导致代码难以维护,并且在编译为CSS时就会出现不必要的选择器,就会导致CSS文件变大。在嵌套里,& 总是指向它上面的元素,可以用于伪类和伪元素。
  3. 混合(Mixins):类似于函数,可以创建一组可重用的样式声明。
  4. 函数:SASS提供了一些内置函数,也可以自定义函数来执行计算或操作。
  5. 继承:可以使用@extend指令来扩展一个选择器的样式到另一个选择器。
  6. 操作符:SASS支持各种操作符,可以进行数值计算。
  7. 条件语句和循环:SASS允许使用@if、@else和@for、@each、@while等控制指令。
  8. 模块化:Sass 支持使用 @import 导入其他 Sass (.scss)文件,可以将样式表拆分成多个模块,更方便地组织和管理样式。

2. 继承与嵌套:

在 Sass 中,虽然可以使用 @extend 来实现样式的继承,但继承和嵌套是两个不同的概念。嵌套主要用于层级结构的表达和简化选择器的书写,而继承则是通过 @extend 关键字实现样式规则(属性和值)的复用。

.btn{
}
.zi-btn{
	@extend .btn;
}

3. 混合Mixins:

允许开发者定义一组样式规则,并在需要时将其包含(include)到其他选择器中,类似于函数的概念。
定义混合:
使用 @mixin 关键字定义一个混合,并在其中包含一组 CSS 规则。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

border-radius 是混合的名称,$radius 是接受的参数。也可以带默认值:@mixin border-radius($radius:10px){}

包含混合:
使用 @include 关键字将混合包含到具体的选择器或样式中。

.box {
  @include border-radius(10px);
  background-color: #f0f0f0;
}

.box 类选择器包含了 border-radius 混合,并传入了参数 10px。

4.函数

在 Sass 中,函数是一种强大的工具,用于执行各种操作和计算,包括颜色处理、数学运算、字符串操作等。函数可以帮助开发者在样式表中执行复杂的逻辑和操作。

内置函数
Sass 提供了一些内置的函数,用于处理颜色、数学计算、字符串操作等常见任务。使用时直接传参调用:width: ceil(10.5px);

  1. 颜色函数:lighten()、darken()、rgba() 等用于调整颜色的亮度和透明度。
  2. 数学函数:round()、ceil()、floor() 等用于数值的四舍五入、向上取整、向下取整。
  3. 字符串函数:str-length()、to-upper-case()、to-lower-case() 等用于处理字符串的长度和大小写转换。

自定义函数:
Sass 还支持自定义函数,允许开发者根据需要创建自己的函数来执行特定的操作。自定义函数使用 @function 关键字定义,可以接受参数并返回一个值。

@function percentage($value, $total) {
  @return ($value / $total) * 100%;
}

.container {
  width: percentage(500px, 1000px); // 输出 50%
}

5.操作符

在 Sass 中,操作符用于执行各种数学和逻辑运算,这些操作符与大多数编程语言中的操作符类似,但在 Sass 中还包括一些用于处理颜色和字符串的特殊操作符。
+ - * / % == != > < >= <= and or not

6.模块化

在一个.scss文件中定义好了变量、mixins、函数等,可以在另一个.scss文件使用。

@use 'scss1' as s1;/*引入并加别名*/
div {
@include s1.button-style(#3498db);/*mixins or 函数*/
@extend .btn;/*继承*/
background-color: s1.$primary-color;/*变量*/
}

7.逻辑语句

Sass 提供了类似于编程语言的条件语句,包括 @if、@else if 和 @else,以及一些函数和操作符来帮助进行条件判断。


 $color: green;
.button {
  @if $color == red {
    background-color: $color;
  } @else if $color == green {
    background-color: $color;
  } @else {
    background-color: black;
  }
}

/*if()函数*/
.button {
  background-color: if($color == red, $color, blue);
}

/*逻辑运算符组合*/
$size: 10px;
$color: red;

.box {
  @if $size > 5px and $color == red {
    border: 1px solid black;
  }
}

三、@规则

CSS 中的 @规则(At-rules)是一种特殊的语法结构,以 @ 开头,用于定义特定的样式规则或指令,而不是直接应用于 HTML 元素。这些规则通常用于引入外部资源、定义动画、媒体查询、字体引入等特殊功能。

1.@import

@import 规则用于在 CSS 文件中引入其他 CSS 文件或资源。

@import url("styles.css");

2. @media

@media 规则用于根据不同的媒体类型和特定的条件来应用样式。

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

媒体查询:指的是在 @media 规则中定义的条件部分,通常由媒体类型和一个或多个媒体特性组成。(Media Queries)是CSS3中引入的一种机制,允许开发者根据设备特性和环境条件来应用不同的样式规则。通过媒体查询,可以检测并响应设备的特性,如屏幕宽度、高度、设备类型(打印设备、屏幕设备等)、视口宽度等,从而使得网页可以在不同的设备和浏览器上提供最佳的用户体验。

@media media_type and|not|only (media_feature) {
  /* CSS 规则 */
}
  • media_type:媒体类型,例如 screen(屏幕)、print(打印机)、speech(语音合成器)等。
  • media_feature:媒体特性,例如 width(宽度)、height(高度)、orientation(方向)、aspect-ratio(宽高比)等。

3. @font-face

@font-face 规则用于定义自定义字体,允许浏览器下载和使用 Web 字体。

@font-face {
  font-family: "MyCustomFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff");
}

4. @keyframes

@keyframes 规则用于定义动画序列中的关键帧。允许定义动画过程中一系列关键帧的状态。通过这些关键帧,可以创建复杂的动画效果,指定动画在不同时间点的样式。

@keyframes color-change {  
  0% {  
    background-color: red;  
  }  
  50% {  
    background-color: yellow;  
  }  
  100% {  
    background-color: blue;  
  }  
}

要应用这个动画到一个元素上,需要使用 animation 属性,如下所示:

div {  
  width: 100px;  
  height: 100px;  
  animation-name: color-change;  
  animation-duration: 4s;  
  animation-iteration-count: infinite;  
}

这里将 color-change 动画应用到了一个 div 元素上。animation-duration 属性定义了动画的持续时间,animation-iteration-count 属性定义了动画的迭代次数(infinite 表示无限次)。

5. @supports

@supports 规则用于检测浏览器是否支持某些 CSS 特性。

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

6. @page

@page 规则用于定义打印文档时的页面样式。与屏幕显示的样式不同,@page 规则允许控制打印页面的布局和外观,例如页面大小、边距、页眉、页脚等。

@page {
  size: A4;
  margin: 1cm;
}

7. @charset

@charset 规则用于指定 CSS 文件的字符集编码。

@charset "UTF-8";

8. @namespace

@namespace 规则用于定义 XML 或 SVG 文档中的命名空间。

@namespace url("http://www.w3.org/1999/xhtml");

8.@container

@container 允许开发者根据容器(而非视口或屏幕)的尺寸变化来设置内部元素的样式。这种机制被称为“容器查询”,它使得开发者能够更精细地控制页面布局,特别是当页面内部元素的尺寸变化时。

基本用法:

  1. 首先,需要定义一个容器元素,例如<div>,并为其指定一个唯一的名称或标识符。
  2. 然后,使用@container规则来定义当容器尺寸变化时应该如何调整内部元素的样式。

假设有一个名为.container的

元素,它内部有一个

元素。当.container的宽度小于800px时,改变

元素的字体颜色。可以这样实现:

.container {  
  container-name: myContainer; /* 为容器指定名称 */  
}  
  
@container myContainer (max-width: 800px) {  
  p {  
    color: gray; /* 当容器宽度小于800px时,<p>元素的字体颜色变为灰色 */  
  }  
}

9.@scope

@scope是一个指令,用于定义一组规则,这些规则只在特定的上下文或作用域内有效。这个指令通常用于组织和封装Sass代码,使得样式更加模块化和可重用。

@scope <scope-name> {
  // 定义作用域内的样式规则
}

其他常见的 @规则:

  • @counter-style:定义计数器样式。
  • @document:根据文档 URL 条件应用样式。
  • @font-feature-values:定义字体特性值。
  • @viewport:定义视口相关规则,用于移动端布局控制。

每种 @规则 都有其特定的语法和用途,能够使 CSS 样式表更加灵活和功能强大,适应不同的设计需求和环境条件。

四、变换

1.过渡(transition)

过渡(transition)是 CSS 中用来控制 CSS 属性变化过程的一种机制,通过平滑过渡一个 CSS 属性的变化,使得变化显得更加流畅和自然。通常用于控制例如颜色、位置、大小等属性的变化效果。

过渡使用 transition 属性来定义,其基本语法如下:

.selector {
  transition: property duration timing-function delay;
}
  • property:指定需要过渡的 CSS 属性名称,例如 widthcoloropacity 等。
  • duration:指定过渡效果的持续时间,单位可以是秒(s)或毫秒(ms)。
  • timing-function:指定过渡效果的时间函数(可选),控制过渡速度的变化曲线,例如 easelinearease-in-out 等。
  • delay:指定过渡效果延迟执行的时间(可选),单位也可以是秒(s)或毫秒(ms)。
.button {
  width: 100px;
  height: 50px;
  background-color: blue;
  transition: width 0.3s ease-in-out;
}

.button:hover {
  width: 150px;
}

在这个例子中,当鼠标悬停在 .button 元素上时,width 属性从初始的 100px 平滑过渡到 150px,过渡效果持续时间为 0.3s,使用了 ease-in-out 的时间函数。

  • property:可以同时过渡多个属性,用逗号分隔。例如 transition: width 0.3s, height 0.3s; 表示同时过渡 widthheight 属性。
  • duration:过渡的持续时间,可以分别为每个过渡指定不同的时间,例如 transition: width 0.3s, height 0.5s;
  • timing-function:可以指定多个过渡的时间函数,每个时间函数对应对应于对应的属性,例如 transition: width 0.3s ease-in, height 0.5s ease-out;
  1. transition-property:指定要执行过渡的属性
    • 多个属性间使用,隔开;
    • 如果所有属性都需要过渡,则使用all关键字;
    • 大部分属性都支持过渡效果;
    • 注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡;
  2. transition-duration:指定过渡效果的持续时间
    • 时间单位:s和ms(1s=1000ms)
  3. transition-delay:过渡效果的延迟,等待一段时间后在执行过渡
  4. transition-timing-function:过渡的时序函数
    • linear匀速运动
    • ease 默认值,慢速开始,先加速后减速
    • ease-in 加速运动
    • ease-out 减速运动
    • ease-in-out 先加速后减速
    • cubic-bezier()来指定时序函数 https://cubic-bezier.com
    • steps()分步执行过渡效果,可以设置第二个值:
    • end,在时间结束时执行过渡(默认值)
    • start,在时间开始时执行过渡
  5. transition:可以同时设置过渡相关的所有属性
    • 只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟时间

2.动画

动画和过渡类似,都是可以实现一些动态的效果,不同的是

  • 过渡需要在某个属性发生变化时才会触发
  • 动画可以自动触发动态效果

设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤:

@keyframes animation_name {
  from {
    /* 初始状态 */
  }
  to {
    /* 结束状态 */
  }
}

@keyframes animation_name {
  0% {
    /* 初始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}

再用动画 animation 属性:

.selector {
  animation: animation_name duration timing-function delay iteration-count direction fill-mode;
}
  • animation-name 指定动画的关键帧名称
  • animation-duration:指定动画效果的持续时间
  • animation-delay:动画效果的延迟,等待一段时间后在执行动
  • animation-timing-function:动画的时序函数
  • animation-iteration-count 动画执行的次数
    • infinite 无限执行
  • animation-direction 指定动画运行的方向
    • normal 从from向to运行,每次都是这样,默认值
    • reverse 从to向from运行,每次都是这样
    • alternate 从from向to运行,重复执行动画时反向执行
  • alternate-reverse 从to向from运行,重复执行动画时反向执行
  • animation-play-state 设置动画的执行状态
    • running 动画执行,默认值
    • paused 动画暂停
  • animation-fill-mode 动画的填充模式
    • none 动画执行完毕,元素回到原来位置,默认值
    • forwards 动画执行完毕,元素会停止在动画结束的位置
    • backwards 动画延时等待时,元素就会处于开始位置
    • both 结合了forwards和backwards

3.平移

平移(Translation)通常是指通过 transform 属性来改变元素的位置,从而实现元素在二维或三维空间中的移动效果。平移可以沿着 X 轴、Y 轴或 Z 轴进行,而不会影响文档流或元素的其他属性。
通过 transform 属性的 translate() 函数可以进行平移。它接受一个或两个参数,分别表示 X 轴和 Y 轴上的位移量。

  • translateX() 沿着由方向平移
  • translateY() 沿着y轴方向平移
  • translateZ() 沿着z轴方向平移平移元素
  • translate3d(50px, 100px, 0); (沿 X 轴移动 50px,Y 轴移动 100px,Z 轴不移动

(百分比是相对于自身计算的)

4.旋转

transform 属性,允许元素在二维或三维空间中绕着指定的中心点进行旋转。通过旋转可以使元素沿着x、y或z旋转指定的角度。元素的旋转中心点是其自身的中心。可以使用 transform-origin 属性指定旋转的中心点位置,例如 transform-origin: top left; 将旋转中心点设置在元素的左上角。

  • rotateX(45deg):绕 X 轴顺时针旋转元素 45 度
  • rotateY()
  • rotateZ()

5.缩放

二维缩放可以通过 scale() 函数实现,它接受一个或两个参数,分别表示在水平和垂直方向上的缩放比例。

  • scalex(1.5) 水平方向缩放:水平方向放大1.5倍
  • scaleY(0.5) 垂直方向缩放:垂直方向缩小0.5
  • scale() 双方向的缩放:先水平再垂直

scale3d() 函数实现三维缩放,它接受三个参数,分别表示在 X 轴、Y 轴和 Z 轴上的缩放比例。

6.倾斜(skew)

skewX(angle):沿 X 轴方向倾斜元素。
skewY(angle):沿 Y 轴方向倾斜元素。
skew(ax, ay):分别沿 X 和 Y 轴方向倾斜元素。

7.matrix矩阵变换

matrix(a, b, c, d, e, f) 函数的基本语法如下:

a (缩放X轴):水平方向上的缩放因子。
b (倾斜Y轴):垂直方向上的倾斜因子,与水平缩放有关。
c (倾斜X轴):水平方向上的倾斜因子,与垂直缩放有关。
d (缩放Y轴):垂直方向上的缩放因子。
e (平移X轴):沿着X轴的平移距离。
f (平移Y轴):沿着Y轴的平移距离。

8.transform 属性

用于对元素进行各种变换,包括平移(移动)、旋转、缩放、倾斜等。通过 transform 属性,可以实现页面元素在二维或三维空间内的变换效果,而不会影响文档流或元素的其他属性。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15829.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!