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为目标区域的时候,选中它
相关文章
|
6天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
29天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
117 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
26天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
63 34
|
30天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
77 33
|
28天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
32 2
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `<input>` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
2月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `<input>` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `<input>` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
2月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `<input>` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`<input type="number" step="3">`可使输入值以3为单位递增或递减。

热门文章

最新文章