图解CSS3核心技术与案例实战(by 大漠)阅读笔记

本文是关于CSS3核心技术的阅读笔记,涵盖了渐进增强、选择器、边框等核心概念。重点讲解了强大的CSS3选择器,如后代选择器、伪类选择器,以及边框的新特性,如border-radius、box-shadow和border-image。
摘要由CSDN通过智能技术生成

第一章

对于尚不完全支持CSS3的浏览器,将引入渐进增强的概念。 渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

1.css3新特性

a.强大的css3选择器

新增属性选择器、伪类选择器、过滤选择器

b.添加图片视觉效果

圆角(border-radius)、阴影(text-shadow、border-shadow)、渐变背景、半透明、图片边框(border-image)

c.容器变换

tranform: rotate skew scale translate

d.过渡效果

transtion: property duration timing-function delay;

e.动画

animate
keysframe

f.颜色与透明度

rgba
hsl(hue saturation lightness)
hsla(hue saturation lightness alpha)

g.web字体和web font图标

font-face的引入

h.媒体查询与响应式布局

@media的运用

第二章 CSS3选择器

1. 新增选择器

属性选择器
伪类选择器
过滤选择器

2. CSS3选择器分类

a. 基本选择器
b. 层次选择器
c. 伪类选择器(动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素伪类选择器、结构伪类选择器、否定伪类选择器)
d. 伪元素
e. 属性选择器

2.1 基本选择器

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值