html-day12css新增属性及选择器

简介: html-day12css新增属性及选择器

html-day12css新增属性及选择器


1.优雅降级和渐进增强

优雅降级:一开始先针对高版本完成所有功能和酷炫效果,后面再单独针对低版本浏览器进行处理,
         以保证其完成最基本的功能即可。【向下兼容】
渐进增强:先针对低版本浏览器完成基本功能,然后再针对高版本浏览器添加更多功能和酷炫的效果。 【向上兼容】

2.css3新增的属性

1.文字阴影
    text-shadow:x的偏移  y的偏移  模糊程度  阴影的颜色;
2.盒子阴影
    box-shadow:x的偏移 y的偏移 模糊程度  延伸半径 阴影的颜色  inset;
        inset代表内阴影,不加它就是外阴影;
        延伸半径可以不要
3.圆角半径
    border-raduis:*px | *%;
    如果是*%,代表是宽度和高度的百分比。
    注意:如果要是正圆,必须宽高一样
4.背景图的大小
    background-size:宽度 高度;
    注意:如果和background属性混用,必须复合background属性在前
5.英文大小写转换
    text-transform:capitalize首字母大写 | lowercase小写 | uppercase大写;

3.字体图标

1.使用阿里巴巴矢量图标库 【iconfont】
2.使用自定义字体
    @font-face{
        font-family:'自定义字体的名字';
        src:url('字体文件的路径');
    }
    使用的时候,设置对应内容的字体类型为自定义的字体名字

4.选择器

1.属性选择器
    选中有attr属性的元素e                           e[attr] 
    选中有attr属性且属性值为v的元素e                 e[attr='v'] 
    选中有attr属性且属性值以v开头的元素e             e[attr^='v'] 
    选中有attr属性且属性值以v结尾的元素e             e[attr$='v'] 
2.结构伪类选择器
    e:first-child                       选中第一个子元素e
    e:last-child                        选中最后一个子元素e
    e:nth-child(n)                      选中第n个子元素e
    e:nth-last-child(n)                 选中倒数第n个子元素e
        n是一个乘法因子:可以是数字;英文-odd奇数,even偶数;可以是数学表达式;
    e:only-child                        选中唯一的子元素e    [用于场景判定]
    注意:child系列强调的是该元素在其父元素的所有子元素中的排序。
          type系列强调的是该元素在同类型兄弟元素之间的排序。 【将child换成of-type就是对应type的写法】
3.UI状态伪类选择器
    e:disabled              选中不可用的元素e
    e:enabled               选中可用的元素e
    e:checked               给选中的元素e
4.否定伪类选择器
    e:not(f)                选中e中所有不满足条件f的剩余元素
5.目标伪类选择器
    e:target                当e为目标区域的时候,选中它
相关文章
|
1天前
|
前端开发 开发者 UED
深入理解CSS属性“flex:1”的奥秘
深入理解CSS属性“flex:1”的奥秘
|
2天前
|
移动开发 前端开发 搜索推荐
【CSDN创作优化1】个人简介优化 html font属性
【CSDN创作优化1】个人简介优化 html font属性
7 0
|
2天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
2天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
18 0
HTML5/CSS3粒子效果进度条代码
|
2天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
9 1
|
2天前
|
前端开发
CSS选择器
CSS选择器
13 1
|
2天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
2天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
2天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
2天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。