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为目标区域的时候,选中它
相关文章
|
2天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
15 1
[HTML、CSS]细节与使用经验
|
3天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
14 1
[HTML、CSS]知识点
|
5天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
5天前
|
前端开发 搜索推荐 算法
|
5天前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
5天前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
|
9天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
12 1
|
9天前
|
前端开发
css简写属性
css简写属性
18 0
|
9天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。