本文详细介绍了HTML和CSS的基础知识，包括视觉设计中的box-shadow、颜色理论（RGB、HSL和渐变）、transform属性（scale、skew、rotate）以及animation动画。同时，讲解了无障碍设计，如alt属性、标题标签（h1-h6）、main、article、section、header、footer、nav、audio、figure和figcaption等元素的使用，强调了可访问性和语义化的重要性。最后，探讨了响应式网页设计，如媒体查询、图片自适应、排版响应以及弹性盒子和网格布局的原理和实践。
应用视觉设计
视觉设计结合了排版、色彩理论、图形、动画、页面布局等，以表达独特的信息。
一、box-shadow
box-shadow 属性以及它的依次取值 offset-x、offset-y、blur-radius、spread-radius 和颜色值。 其中 blur-radius和 spread-radius是可选的。
二、颜色
1、RGB和分裂补色
电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。 这在现代色彩理论中叫三原色光模式（RGB Color Model）。 红色（R）、绿色（G）和蓝色（B）叫作三原色。 如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）， 我们在上一个挑战里已经见过这些颜色了。 这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。 例如，品红色是红色和蓝色相加产生，它是绿色的补色。
三次色是由原色和二次色相加产生的颜色， 例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。 将这六种颜色中相邻的颜色相加，便产生了十二色色环。
设计里面有很多种颜色搭配方法。 涉及到三次色的一种配色方法是分裂补色搭配法。 选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比，又不失和谐。
下面是使用分裂补色搭配法创建的三个颜色：
| 颜色 | HEX 颜色码 |
|---|---|
| 橙色 | #FF7F00 |
| 蓝绿色 | #00FFFF |
| 树莓红 | #FF007F |
补色搭配能形成强列的对比效果，让内容更富生机。 但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。 通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。
2、HSL
颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 hsl() 做为颜色的描述方式。
色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 hsl()里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
饱和度是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。
亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。
hsl()使 CSS 更改颜色色调更加方便。 比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。 另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。 回忆下 hsl() 里面的 s和 l 分辨代表饱和度和亮度。 饱和度代表灰色的占比，亮度代表白色和黑色的占比。 这在你想获取一个基准色的变种的情景下会十分有用。
所有元素的默认 background-color都是 transparent
3、线性渐变
linear-gradient()
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
第一个参数指定了颜色过渡的方向——它的值是角度，90deg表示垂直渐变（从左到右），45deg表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序。
例如：
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
repeating-linear-gradient()
和 linear-gradient()很像，主要区别是会重复指定的渐变
background: repeating-linear-gradient(90deg, yellow 0px, blue 40px, green 40px, red 80px);
渐变开始于 0 像素位置的 yellow，然后过渡到距离开始位置 40 像素的 blue。 由于下一个渐变颜色的起始位置也是 40 像素，所以颜色直接渐变成第三个颜色值 green，然后过渡到距离开始位置 80 像素的 red。
background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);
产生黄黑渐变：
三、transform属性
1、scale()
CSS 属性 transform里面的 scale()函数可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大到了原来的 2 倍：
p {
transform: scale(2);
}
transform属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。 当使用伪类选取元素的指定状态（如 :hover），我们可以通过 transform属性非常方便地给元素添加交互。如：
p:hover {
transform: scale(2);
}
2、skex()
skewX()：使选择的元素沿着 X 轴（横向）翻转指定的角度。
下面的代码沿着 X 轴翻转段落元素24度。
p {
transform: skewX(24deg);
}
翻转前：
翻转后：
skewY()：使选择的元素沿着 Y 轴（纵向）翻转指定的角度。
3、rotate()
下面的代码图形原地旋转24度。
p {
transform: rotate(24deg);
}
四、animation
animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。
1、animation
（1）animation-name用来设置动画的名称，也就是要在@keyframes里用到的名称。
（2）animation-duration设置动画所花费的时间。
（3）animation-fill-mode规定动画在播放之前或之后，其动画效果是否可见。
| 值 | 描述 |
|---|---|
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
（4）animation-iteration-count控制动画循环的次数。如果想让动画一直运行，可以把值设置成 infinite。
（5）animation-timing-function用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。
有一些预定义的关键字可用于常见的选项：
默认值是 ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括 ease-out：动画以高速开始，以低速结束；ease-in，动画以低速开始，以高速结束；linear：动画从头到尾的速度是相同的。
选学内容：cubic-bezier()函数，即贝塞尔曲线，可以更细致地控制动画的速度曲线。
2、@keyframes
@keyframes可以通过设置特定时间点的行为来创建动画。 为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。 如果用一部电影来做类比，那么 CSS 里面的0%关键帧就像是电影里面的开场镜头；100%关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。 在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。100%关键帧的 CSS 属性就是元素最后的样子。
3、示例分析
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
id 为 anim的元素，我们在代码中将它的 animation-name设置为 colorful，同时设置 animation-duration为 3 秒。 然后我们把 @keyframes规则添加到名为 colorful 的动画属性上。 在动画开始时（0%）的背景颜色
最低0.47元/天 解锁文章
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
