• css扩展 区别总结(rgba()和opacity、CSS伪类与CSS、px与em、link 和@import)


     1、rgba()opacity的透明效果有什么不同?

    a. opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色。

    b. 设置rgba透明的元素的子元素不会继承透明效果!

    2. CSS伪类与CSS伪对象的区别

    CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西

    根本区别在于:它们是否创造了新的元素(抽象)

    伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类

    伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中

    3. CSS样式中常使用pxem,各有什么优劣,在表现上有什么区别?

    px是相对长度单位,相对于显示器屏幕分辨率而言的。

    em是相对长度单位,相对于当前对象内文本的字体尺寸。

    px定义的字体,无法用浏览器字体放大功能。

    em的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。

    4. CSS link @import 的区别是什么?

    a. link属于HTML标签,而@import是CSS提供的,且只能加载 CSS

    b. 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载

    c. import只在IE5以上才能识别,而link是HTML标签,无兼容问题

    d. link方式的样式的权重 高于@import的权重

    扩展:

    1、 @import 的几种引入方式

    @import 默认引入less方式读取,出css之外: example:

    • @import "foo"; // foo.less 导入为less文件 
    • @import "foo.less"; // foo.less 导入为less文件
    • @import "foo.php"; // foo.php 导入为less文件
    • @import "foo.css"; // 语句保持原样,导入为css文件
    属性作用释义
    reference 使用该less文件但是不输出它 使用@import (reference) 导入外部文件,导入的样式不会添加到编译输出,除非该样式被引用。
    inline 包括在源文件中输出,但是不作处理 当一个css文件可能无法被less所兼容时
    less 将该文件视为less文件,无论扩展名是什么  
    css 将文件视为css文件,无论扩展名是什么  
    once 该文件仅可导入一次 (默认) 文件只会被导入一次,后续的导入相同文件的语句会被忽略。
    multiple 该文件可以多次导入 文件重复被引入多次
    optional 当没有发现文件时仍然编译 避免导入不存在的less文件,如果没有这个参数会报 File Error 错误

    2、伪选择器包括:伪类选择器和伪对象选择器,以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格,否则解析为包含选择器

    伪类 说明
    :focus 定义对象在成为输入焦点(该对象的onfocus事件发生时)的样式
    :first-child 定义对象的第一个子对象的样式
    :first   定义页岩 容器第一页使用的样式,仅适用于@page规则
    :left 定义页面容器位于装订线左边的所有页面使用的样式,仅适用于@page规则
    :right 定义页面容器位于装订线右边的所有页面使用的样式,仅适用于@page规则
    :lang 定义对象使用特殊语言的内容样式
    伪对象 说明
    :after 与content属性一起使用,定义在对象后的内容
    :before 与content属性一起使用,定义在对象前的内容
    :first-letter 定义对象内第一个字符的样式
    :first-line  

    定义对象内第一行的样式

  • 相关阅读:
    [置顶] 寻找数组中的值
    详解 Java 的八大基本类型,写得非常好!
    从入门到放弃的 Java 架构师面试题!
    通往大牛之路,百度Java面试题前200页!
    HTML与CSS简单页面效果实例
    JS面向对象
    JS瀑布流效果
    CSS常用操作-图片
    CSS常用操作-导航栏
    CSS常用操作-对齐
  • 原文地址:https://www.cnblogs.com/wenaq/p/13513647.html
Copyright © 2020-2023  润新知