跳至主要內容

02.属性值

12a2024/10/3大约 11 分钟HTML5前端

02.属性值

2.1 关键字

  • CSS定义了一些文字作为关键字
    • 全局关键字：包括initial、inherit、unset、revert，所有CSS属性都能使用，部分特殊样式只接收这些值
      • initial：使用默认值，每个用户都可以在浏览器设置默认属性值
      • inherit：使用父元素样式属性值
      • unset：对于父元素有定义且此值可继承的时候相当于inherit，不然相当于initial
      • revert：将样式设置为浏览器的默认内置样式(新属性)

      css中有样式all，对除direction和unicode-bidi外的所有CSS样式统一修改，配合全局关键字可以快速修改大量样式

    • 非全局关键字：部分样式有专有的关键字，比如：none、normal和underline，要注意这些关键字在不同的样式上表现很可能不同

2.2 URL、字符串和来自HTML标签的属性值

  • URL：在CSS中使用URL引入其他文件，一般是图片视频或其他.css文件
    • 通过使用url(url地址)可以引入其他网络文件，也允许使用相对地址，引入对应的文件
    • 导入图片一般用于通过background设置背景

通过使用@import url(....);的方式可以导入其他的css文件，引入css文件中的内容

  • 字符串：字符串是以"或'开头和结尾的任意字符序列，开头和结尾的引号需要相同
    • 如果中间需要使用与开头相同的引号，需要使用\转义
    • 在字符串中无法直接换行，如果在CSS部分需要使用字符串换行以优化排版，可以使用\，但不会显示在页面上
    • 如果希望显示在页面上换行需要使用\A(大小写均可)，此字符后不应该跟随16进制的相关表示字符(0-f)，如果需要跟随考虑使用排版换行
    • 如果希望字符串换行显示在页面上，还需要使用white-space: pre;即设置保留换行、缩进和空白效果
  • HTML属性的获取：对于一个元素而言，标签上可能会有许多HTML属性值，比如：id，通过使用attr(id)可以获取对应属性值

2.3 图片

  • 图像值引用的是图像，主要有三种图像值

    • url(...)：通过URL引入图片文件

    • image-set(...)：设置一批图片，根据设备的分辨率使用不同的图片，相当于img标签上的srcset

      background-image: image-set(
    "test.png" 1x,
    "test-2x.png" 2x,
    "test-print.png" 600dpi
);

      由于image-set是CSS4草案中提出的属性值，如果希望在未适配的老版本浏览器上兼容显示图片使用可以在background设置为image-set，在background-image中使用url引入默认图片

    • gradient：渐变效果图像，具体使用见渐变

2.4 长度单位

2.4.1 绝对长度单位

  • 绝对长度单位很好理解，但一般很少使用，主要有以下几个：
    • 英寸in
    • 厘米cm
    • 毫米mm
    • 1/4毫米q
    • 点p：标准印刷单位，1in=72p1in=72p
    • 派卡pc：标准印刷单位,1pc=12p1pc=12p
    • 像素px：规定1in=96px1in=96px，但现在，浏览器会直接使用屏幕像素，缩放页面也会导致不同
  • 绝对长度单位在定义文档打印时有用，因为打印机使用的单位是英寸、点和派卡
  • 关于像素长度：由于屏幕不同，一个像素的宽高可能不同且不为1/96in，现在每英寸像素数通常已经大于96，如果希望打印可以据此缩放输出
  • 分辨率单位：随着媒体查询@media的出现，出现了描述显示器分辨率的新单位

    • dpi：一英寸长度能显示的像素点数

    • dpcm：一厘米长度能显示的像素点数

    • dppx：CSS中的每个px显示的像素点数，现在的CSS3标准1ppx相当于96dpi(标准规定px是这样换算的)

      /* 媒体查询，样式只对分辨率超过500dpi的显示器有效 */
@media (min-resolution: 500dpi){
    /* 样式 */
}

2.4.2 相对长度单位

  • 相对长度单位是指这些单位的长度是相对其他东西而言的，根据不受控制的因素而变化，比如：屏幕分辨率、视区宽度
    • em和ex：em和ex是早期排版使用的单位，前者是字母m的宽度,后者是字母x的高度。CSS未使用这个em的定义，而是将em定义为对当前元素font-size的倍数(当前元素将从父元素继承值，然后乘此倍数)
    • rem：与em一样，基于字号的大小，区别在于em是相当于元素自身的字号，而rem指的是html标签(根元素)的字号
    • ch：0的进距，进距是0的宽度加上侧边的间距，即有5ch的宽度和"00000"的宽度一致(IE11上此值计算有误，只包含0的宽度)
    • vh与vw：根据视区窗口宽度和高度动态变化的单位，将视区的宽度视为100vw，视区的高度视为100vh，如果浏览器窗口被改变大小，值也会发生变化
      • vmax和vmin：1vmax和1vmin等于视区宽度或高度的1%，取宽度和高度的较大值和较小值
    • fr：片段fraction开头字母，是grid布局的新单位，如果两列宽度为1fr和2fr，那么后者是前者的两倍，两列会占满空间

2.4.3 auto的妙用

  • auto是许多css样式的可选值，对于不同的属性而言，auto的含义也不相同
  • 初始值auto，auto的字面意思是自动，表明该元素会根据父节点容器计算，比如width默认值就是auto。如果是block布局且未使用浮动，效果是占满父容器
  • 盒模型中的auto：虽然CSS盒模型中的每个属性对盒子尺寸有着决定性的作用，但是能取值为auto的属性主要有width、height和margin(目前除了max-width和max-height外都可以使用auto)
    • width取值为auto：width的属性值对应的显示效果可能因为其他属性而不同，主要受display和box-sizing和是否在文档流的影响
      • 在block布局和inline布局，auto会自动换行尽可能地保证不撑破容器
      • 对于flex布局和grid布局(包括inline-的布局)不会自动换行，因此还会撑破容器

    如果width为auto，box-sizing的属性值对最终的元素宽度有影响(box-sizing决定元素宽度是否包含边框和内边距大小)，display对最终显示效果有影响

    • height取值为auto：元素的height到值为auto表现行为和width取值为auto有所差异

      • 不管是block布局还是inline布局，元素设置height为auto的时候，height将会根据内容所占的高度来计算
      • 对于flex布局和grid布局(包括inline-的布局)，元素设置height为auto的时候，height将尽量占满父容器(会根据margin控制边距)

    • margin取值为auto：如果元素自身有设置width或max-width，可以通过margin:auto控制居中

      /* 自动设置外边距，auto为自动控制边距，尽可能通过margin占满容器 */
/* 如果只有一边设置了margin，则只有一边有边距，可实现另一边对齐 */
/* 如果两边都设置了margin，则两边平分空白空间，可实现居中对齐 */
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

2.4.4 百分比的用法

  • 百分比是css中的支持的另一种值，它是相对父元素的属性的比例，主要有以下几种情况：

    元素样式设置为百分比对照属性
    宽width和高height分别对应父元素的宽和高，如果父元素根据内容扩展，百分比相当于auto
    边距margin和padding四个方向都对应父元素的宽
    字体font-size对应父元素的字体大小
    背景大小background-size对应元素自身的宽和高
    圆角border-radio对应元素自身的宽和高
    行高ling-height对应元素自身的字体大小
    fix四边定位，如top对应窗口视窗宽高
    absolute四边定位，如top对应向外找到的第一个，非static定位元素宽高
    relative四边定位，如top对应父元素宽高
    转换translate()x和y轴对应当前元素宽高

2.4.5 计算值

  • 为了方便进行不同单位之前的数学运算，CSS提供calc()，在括号中支持简单数学式计算，允许使用的运算符包括基本的加减乘除运算(+，-，*，/)和括号

    calc()的标准中不存在对括号()的定义，不过现在浏览器都支持在calc中添加括号改变优先级，浏览器应该也会继续支持

    /* 比如：想让段落的宽度比父元素宽度的90%小2em */
p {
  width: calc(90% - 2em);
}

2.5 角度、时间和频率

  • 角度常见在2D和3D变形中，在其他地方也能用到
  • 角度单位：
    • deg：度数，完整圆周是360360度
    • grand：百分度，完整圆周是400400百分度
    • rad：弧度，完整圆周是2π2\pi，约等于6.28弧度
    • turn：圈数，完整圆周是11圈
  • 注意在hsl颜色中，角度始终使用deg为单位，不需要添加单位
  • CSS支持ms和s时间，用于指定动画时间
  • CSS通过频率控制听说文本时的声音的音调，高频对应高音，允许Hz和kHz，其中的H允许小写

2.6 位置

  • 位置是许多属性的取值，用于定位内容
    • 可填入以下值
      • 长度，百分比是以对应方向的元素尺寸(长/宽)计算的，长度值可以为负数或超过参考框大小
      • 关键字：上top、下bottom、左left、右right，对应贴着四个参考框边界放置，还有center对应50% 50%
    • 支持一到四个值，如果只有一个长度值，第二个值为50%；如果提供关键字值，第二个值为另外方向50%
    • 两个长度值依次对应水平x坐标，垂直y坐标，坐标原点在左上角；两个关键字值要求分别对应不同的方向
    • 三到四个值时，需要提供两个关键字值，另外的值为长度值，意为离前一个关键字对应边界的距离

2.7 形状

  • 形状也是一种属性值，通过函数创建

    需要注意的是超出元素范围的形状将被裁剪

    • inset()：定义了一个向内裁剪的长方形，支持2-4个值，值效果和内边距类似，这些值定义了盒模型的上，右，下与左边界和顶点的偏移量
    /* 生成四边向内裁剪的长方形 */
inset(55% 12% 15px 35px);
    • circle()：使用一个半径和一个位置定义一个圆形，如果提供的是百分比半径值，则对应公式width2+height2/2\sqrt{width^2+height^2}/\sqrt{2}的计算结果的百分比
      • 支持使用各种位置值，默认位置是center
    /* 生成位置在离左上角点下移12rem右移8rem的半径为6rem的圆 */
circle(6rem at 12rem 8rem);

circle(50% at left top);
    • ellipse()：使用两个半径和一个位置定义一个椭圆，如果提供百分比半径值，对应把盒模型的宽与高作为参照
      • 第一个半径对应横轴半径，第二半径对应竖轴半径
      • 半径还支持两个关键字：closest-side使用形状中心到参考框最近的边缘的长度；farthest-side使用形状中心到参考框最远边缘的长度
      • 也支持使用各种位置值，默认位置是center
    ellipse(4rem 50% at right center);
ellipse(closest-side closest-side at 5rem 6rem);

    • polygon()：通过提供三个或更多个坐标对(每一个坐标对代表形状的一个顶点)来绘制多边形

      • 每个坐标对第一个值对应与左上角点的垂直距离，第二个值对应与左上角点的水平距离
      • 可以在开头使用填充规则关键字，nonzero默认，填充所有被包围的空间；evenodd，填充被包围奇数次的空间
      /* 箭头图案 */
polygon(0% 20%,
        60% 20%,
        60% 0%,
        100% 50%,
        60% 100%,
        60% 80%,
          0% 80%);

    • path()：使用一个SVG fill-rule和SVG路径定义来定义一个形状

2.7 自定义属性值

  • CSS允许创建自定义变量(要求变量以--开头)，然后在子元素或自身通过var(变量名)调用它，并且支持对变量使用calc()计算符

    html{
    --gutter: 3ch;
    --offset: 1;
    ul li { margin-left: calc(var(--gutter) * var(--offset));}
    ul ul li {--offset:2;}
    ul ul ul li {--offset:3;}
}

/* 相当于 */
ul li {margin-left:3ch;}
ul ul li {margin-left:6ch；}
ul ul ul li {margin-left:9ch;}
最近更新