CSS世界-第一、二章

版权声明:本文为博主原创文章,转载时请标明出处 https://blog.csdn.net/weixin_41056807/article/details/86497322

第一章 概述

1.1 CSS世界的“世界观”

1.2 世界都是创造出来的

1.3 CSS完胜SVG的武器——流
1.3.1
什么是“流”:实际上是css世界中的一种基本的定位和布局机制。
css世界构建的基石是HTML,而HTML最具有代表的2个基石<div>和<span>正好是css世界中块级元素和内联级元素的代表
1.3.2
流是如何影响整个css世界
1.3.3
什么是流式布局?
利用元素“流”的特性实现的各类布局效果。“流”本身具有自适应特性。
流体布局不等于自适应布局
表格布局也可以设置为100%自适应,但是表格和“流”不是一路的,并不属于“流体布局”
div+css布局:实际上就是这里的“流式布局”

1.4 CSS世界的开启从IE8开始
1.5 table自己的世界
1.6 CSS新世界——CSS3
css3:
布局更为丰富:

  • 移动端
  • 弹性盒子布局flexible box layout
  • 栅格布局grid layout
    视觉表现长足进步
  • 圆角,阴影和渐变让元素更为质感
  • transform变换让元素有更多可能
  • filter滤镜和混合模式让web轻松变成Photoshop
  • animation让动画更简单

第二章 需提前了解的 术语和概念

2.1务必了解css世界的专业术语

  • 属性
  • 值:常见类型:整数型,数值,百分比,长度值,颜色值,还有字符串值,位置值等类型。在css3中还有角度值频率值时间值等类型
  • 关键字 如:transparent,solid,inherit(作为泛关键字也就是所有css属性都可以拥有的关键字)
  • 变量 css中变量有限,css3中currentColor就是
    这里简单介绍一下,详细请转入
currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,例如:

.xxx { border: 1px solid currentColor; }

虽然改变的是文字颜色,但是图标颜色也一起变化了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icon {
            display: inline-block;
            width: 6px; height: 10px;
            background-image: url("images/tick.png");
            background-color: currentColor; /* 该颜色控制图标的颜色 */
        }
        .link:hover { color: #333; }/* 虽然改变的是文字颜色,但是图标颜色也一起变化了 */
    </style>
</head>
<body>
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
</body>
</html>

在这里插入图片描述
鼠标放到上面
在这里插入图片描述
可以看到效果在

  • 长度单位 (2%后面的%不是长度单位) 关系:
<number> +长度单位 =<length>
  • 功能符 是值以函数的形式指定,主要用来表示颜色(rgb(),rgba()),背景图片地址url(),元素属性值,计算calc(),过渡效果等。
  • 属性值 是由 值+关键字+功能符 组成
  • 声明 是属性名+属性值
  • 声明块 是花括号{}包裹的一系列声明
  • 规则或规则集
  • 选择器 类选择器,ID选择器,属性选择器,属性选择器,伪类选择器,伪元素选择器
  • 关系选择器 常见符号 空格, > ,~,+
    有后代选择器(空格),相邻后代选择器(>),兄弟选择器(~),相邻兄弟选择器(+)
  • @规则 是指以@开头的一些规则,如@media,@font-face,@page,@support

猜你喜欢

转载自blog.csdn.net/weixin_41056807/article/details/86497322
0条评论
添加一条新回复