搜索
首页web前端html教程css3新增属性API_html/css_WEB-ITnose

写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀。

  • -moz-  主要是firefox火狐
  • -webikt-主要是chrome谷歌和Safari
  • -o-主要是用于苹果机上的浏览器如Opera
  • 下面主要从颜色、文本、选择器等方面来总结一下CSS3新增的属性

    颜色

    css1和css2只能通过以下三种方式来表示颜色

  • 颜色名称 
  •     eg:color:red

  • HEX方式
  •     (语法:#RRGGBB或#RGB   各点的取值范围为00-FF)

  • RGB方式
  •     (语法:RGB(R,G,B)  各点的取值范围为0~255或者0%~200%)

    css3针对上述模式不能表示透明,增加了如下表示方法

    RGBA模式

    语法:RGBA(R,G,B,A)     R红色 G绿色 B蓝色 A透明

    各点取值跟RGB类似   A的取值为0~1之间

    eg:rgba(255,0,0,0.5)表示半透明红色

    HSL模式(色轮模式)

    语法:HSL(H,S,L)    H色调  S饱合度  L亮度

    H取值为0~360之间  其中0或者360表示红色  120表示绿色 240表示蓝色

    S和L取值都是0%到100%之间

    HSLA模式

    语法及各点取值跟HSL模式一下,唯一不同在于后面的A表示透明度

    eg:hsl(360,50%,50%,0.5) 红色

     

    其次在css3中可以使用color:transparent和使用滤镜filter:alpha(opacity=50)    (不过滤镜仅仅限于IE)

    文本

    css1和css2当中常用的文本属性有

    css3当中常用的文本属性有

    下面分别来介绍一个css3文本属性

    text-overflow属性

    作用:设定内容溢出状态下的文本处理方式。

    取值:

    clip: 默认值

      当对象内文本溢出时不显示省略标记(...),而是将  溢出的部分裁切掉。

     ellipsis:

       当对象内文本溢出时显示省略标记(...)。 

    注意:该属性需要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用,否则无法看到效果

    text-align属性

    作用:设定文本对齐方式

    取值:

      left :默认值 内容左对齐。

      center:内容居中对齐。

      right: 内容右对齐。

      justify: 内容两端对齐。写本文档时仅Firefox能看到正确效果

      start: 内容对齐开始边界。(CSS3)

      end: 内容对齐结束边界。(CSS3)

    text-transform属性

    作用:设定文本的大小写等形式的转换

    取值:

      none:  默认值 无转换

      capitalize:   将每个单词的第一个字母转换成大写

      uppercase:  转换成大写

      lowercase:  转换成小写

        full-width:  将左右字符设为全角形式(CSS3)不支持

        full-size-kana:将所有小假名字符转换为普通假名(CSS3)不支持         例如:土耳其语。

    text-decoration属性

    作用:设定文本修饰线。

    取值:

    [ text-decoration-color]:不支持

      指定文本装饰的颜色。

    [ text-decoration-line ]:不支持

       指定文本修饰线条的种类。相当于CSS1时的text-decoration属性

    [ text-decoration-style ]:不支持

      指定文本装饰的样式。

     blink: 指定文字的装饰是闪烁。  仅opera和firefox

    例如:text-decoration : overline   CSS1实例

    text-decoration : #F00 double overline   CSS3实例

    text-decoration-line属性

    作用:设定文本修饰线的位置。

    取值:

    none:默认值

      指定文字无装饰

    underline:

      指定文字的装饰是下划线

    overline:

      指定文字的装饰是上划线

    line-through:

      指定文字的装饰是贯穿线

    text-decoration-color属性

    作用:设定文本修饰线的颜色

    取值:指定颜色。

    text-decoration-style属性

    作用:设定文本修饰线的样式。

    取值:

  • solid:默认值   实线
  • double:双线
  • dotted:点状线条
  • dashed:  虚线
  • wavy:  波浪线
  • text-shadow属性

    作用:设定文本的阴影效果

    取值:

    none:默认值  无阴影  

  • 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
  • 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
  • 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 0:不模糊,10px:模糊程度10像素
  •   设置对象的阴影的颜色。
  •  

    text-fill-color属性

    作用:文本填充颜色,指定文字填充部分的颜色

    取值: 颜色

    备注:使用该属性需要使用浏览器似有前缀

    text-stroke属性

    作用:文本边框颜色,指定文字描边部分的颜色

    取值:

  • [ text-stroke-width ]: 
  •     设置或检索对象中的文字的描边厚度

  • [ text-stroke-color ]:   
  •     设置或检索对象中的文字的描边颜色

    备注:使用该属性需要使用浏览器似有前缀

    text-stroke-width属性

    作用:指定文字描边部分的宽度,text-stroke的派生属性

    取值:长度

    备注:使用该属性需要使用浏览器似有前缀

    text-stroke-color属性

    作用:指定文字描边部分的颜色,text-stroke的派生属性

    取值:颜色

    备注:使用该属性需要使用浏览器似有前缀

    tab-size属性

    作用:设定一个tab缩进键,在页面中的显示长度。

    取值: 默认值:8  (长度或者整数值)

    解释一下:整数值 : z-index:1  此处的1就是整数值,不需要单位,类似倍数。

         长度: margin:10px 此处的10px是长度值。


    注意:该属性只在

    标签之内(预格式化状态)显示才会有效。因为浏览器会自动忽略空白字符。    <p>      opera和火狐浏览器需要使用浏览器私有前缀。</p>   <h4 id="word-wrap属性">word-wrap属性</h4>   <p>作用:溢出文本(特指类英文文字)的处理方式。</p>   <p>取值:</p>   
  • normal: 默认值 
  •     允许内容顶开或溢出指定的容器边界。

  • break-word: 内容将在边界内换行。
  •     如果需要,单词内部允许断行。

    选择器

    元素选择器

    关系选择器

    伪类选择器

    属性选择器

    伪对象选择器

     css1和css2

    css1&css2元素选择器

    css1&css2关系选择器

    css1&css2伪类选择器

    css1&css2属性选择器

    css1&css2伪对象选择器

    css3关系选择器

    css3伪类选择器

    css3属性选择器

    css3伪对象选择器

     

    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

    公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

    如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

    本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

    如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

    本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

    HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

    文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

    &lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

    本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

    &gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

    本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

    我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

    本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

    &lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

    本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前By尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    4 周前By尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前By尊渡假赌尊渡假赌尊渡假赌

    热工具

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

    Atom编辑器mac版下载

    Atom编辑器mac版下载

    最流行的的开源编辑器

    Dreamweaver Mac版

    Dreamweaver Mac版

    视觉化网页开发工具

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新(2018.2.1 )专业的PHP集成开发工具

    SecLists

    SecLists

    SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。