css3新增属性API

写在前面:由于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:默认值  无阴影

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

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是长度值。

注意:该属性只在<pre>标签之内(预格式化状态)显示才会有效。因为浏览器会自动忽略空白字符。

opera和火狐浏览器需要使用浏览器私有前缀。

word-wrap属性

作用:溢出文本(特指类英文文字)的处理方式。

取值:

  • normal: 默认值

    允许内容顶开或溢出指定的容器边界。

  • break-word: 内容将在边界内换行。

    如果需要,单词内部允许断行。

选择器

元素选择器

关系选择器

伪类选择器

属性选择器

伪对象选择器

css1和css2

css1&css2元素选择器

css1&css2关系选择器

css1&css2伪类选择器

css1&css2属性选择器

css1&css2伪对象选择器

css3关系选择器

css3伪类选择器

css3属性选择器

css3伪对象选择器

时间: 2024-10-05 00:41:58

css3新增属性API的相关文章

CSS3新增属性text-overflow(省略符)实战开发详解

有人会问,为什么我把text-overflow拿出来单独讲解.以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段. 但是CSS3引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻. 这篇文章,我讲带领大家做一个<今日头条>新闻导航列表,带领大家领略text-overfow的强大魅力.先看一下效果: 好了,看完了效果,现在正式开始今天的开发旅程吧! 首先我们先创建html页面,代码如下所示(红色文字即是我们Dem

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时,都感觉无从下手.一般有两种情况: 1) 不知道关于文本到底有哪些样式属性: 2) 即使借助开发工具的自动提醒,依然不清楚样式属性的具体意思,以及具体用法. 今天这篇文章,我将带领大家一起来领受CSS3在文本样式应用方面的超强能力.通过精彩的实例,来使大家重新认识CSS3文本样式,真心希望大家通过此篇文章,即使不能做到精通CSS3的文本样式的应用,也会做到熟练应用. 实例: 如何利用CSS3制作燃烧的字体? 以前,如果我们网页上想要显示一个燃烧着的文本,大家

CSS3新增属性css版

最近学习CSS3,以下CSS文件中的内容来自CSS手册. 可直接调用此CSS查看效果. 若有遗漏,待发现后补充进去. @charset "utf-8"; /* ------------------------- 此文档收集并介绍CSS3新增属性 ------------------------ /*----------border-color--------- 设置对象边框的颜色. --------------------- 浏览器支持:Firefox3.0+ ------------

h5新增标签、css3新增属性

- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcaption 图例的说明 main time 日期和时间值 mark 高亮的引用文字 datalist 提供给其他控件的预定义选项 keygen 秘钥对生成器控件 output 计算值 prog

h5新增标签及css3新增属性

- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcaption 图例的说明 main   time 日期和时间值 mark 高亮的引用文字 datalist 提供给其他控件的预定义选项 keygen 秘钥对生成器控件 output 计算值 pr

CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]

在CSS3中新增了 [attribute*=value] .[attribute^=value] 和[attribute$=value] 三个选择器,使得属性选择器有了通配符的概念. 下边是一个使用这三个属性的完整示例代码,及运行后的页面展示效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title

css3新增属性02

CSS3 选择器 基础选择器 通配符选择器 * ID选择器 #Id class选择器 .classname 元素选择器 tagName 群组选择器 slecter,selecter 层次选择器 后代选择器 selecter selecter 子元素选择器 selcter>selecter 相邻兄弟选择器 selecter+selecter 通配兄弟选择器 selecter~selecter 属性选择器 selecter[attr] 包含attr属性的元素 selecter[attr=val] a

HTML5时代看css3新增属性

写在前面的话: 由于CSS3标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各家自标准前加了一个前缀, 如:-moz-主要是firefox火狐 -webikt-主要是chrome谷歌 -o-主要是用于苹果浏览器 一.box-shadow(阴影效果) 使用: box-shadow:20px 10px 0 #000: -moz-box-shadow:20px 10px 0 #000: -webkit-box-shadow:20px 10px 0 #000: 支持:

CSS3 新增属性

1Css3概述 从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题. 从前端技术的角度可以把互联网的发展分为三个阶段:第一阶段是web1.0以内容为主的网络 前端主流技术是HTML和CSS,第二阶段是web2.0的Ajax应用,热门技术是javascrip/DOM/ 异步数据请求.第三阶段是即将迎来的HTML5+CSS3时代,这两者相辅相成,使互联网又进入一个崭新的时代. 2什么是CSS,什么是CSS3? 非常简单,CSS代表"Casading Style Sheets