前端笔记CSS3

CSS3

浏览器私有前缀

私有前缀                     对应浏览器
-webkit-                    Chrome和Safari
-moz-                       Firefox
-ms-                        IE
-o-                         Opera

---

CSS3选择器

1.属性选择器

选择器                 说明
E[attr^="xxx"]        选择元素E，其中E元素的attr属性是以xxx开头的任何字符
E[attr$="xxx"]        选择元素E，其中E元素的attr属性是以xxx结尾的任何字符
E[attr*="xxx"]        选择元素E，其中E元素的attr属性是包含xxx的任何字符

2.子元素伪类选择器

选择器            说明
E:first-child    选择父类元素下的第一个子元素（该子元素类型为E，以下类同）
E:last-child     选择父元素下的最后一个子元素
E:nth-child(n)   选择父元素下的第n个子元素或奇偶元素，n取值有三种：数字、odd和even，其中n从1开始
E:only-child     选择父类元素下唯一的子元素，该父元素只有一个子元素

 

3.结构伪类选择器

4.UI伪类选择器(单冒号是伪类，双冒号伪元素)

• :focus

  具有“获取焦点”和“失去焦点”特点的元素只有两种

  1）表单元素（按钮、单选框、复选框、文本框、下拉列表）

  2）超链接

  判断一个元素是否具有焦点很简单，我们打开一个页面后按Tab键，能够被选中的就是带有焦点特性的元素。

  input:focus
  {
      outline:1px solid red;
  }

   

• ::selection

  可以使用::selection选择器来定义页面中被选中文本的样式

  ::selection
  {
      color:white;
      
  }

• :checked(暂时只有Opera浏览器支持:checked,兼容性很差)

  我们可以使用:checked选择器来定义单选框或复选框被选中时的样式。

  input:checked{
      
  }

• :enabled和:disabled

  在CSS3中，我们可以使用:enabled选择器来定义表单元素“可用”时的样式，也可以使用:disabled选择器来定义表单元素“不可用”时的样式。

  input:enabled
  {
      outline:1px solid red;
  }
  input:disabled
  {
      
  }

• :read-write和:read-only

  在CSS3中，我们可以使用:read-write选择器来定义表单元素“可读写”时的样式，也可以使用:read-only选择器来定义表单元素“只读”时的样式。

  input:read-write
  {
      outline:1px solid red;
  }
  input:read-only
  {
      
  }

5.其他伪类选择器

• :root

  我们使用:root选择器来定义整个页面的背景色为灰色，然后将body元素的背景色定义为红色。其中，下面两句代码是等价的

  :root{}
  html{}

• :empty

  我们可以使用:empty选择器来选择一个“不包含任何子元素和内容”的元素，也就是选择一个空元素。

  td:empty
  {
      
  }

  像HTML5的2048小游戏就可以用到:empty选择器。此外在实际开发中，对于表格中内容为空的单元格，我们往往为其设置不同的颜色，这样也会使得用户体验更好

• :target

  我们可以:target选择器来选取页面中的某一个target元素。所谓的target元素，指的是id被当成页面的锚点链接来使用的元素

  :target h3
  {
      color:red;
  }

  当我们点击锚点链接时，对应的target元素下面的h3字体颜色就会变成红色。在实际开发中，:target选择器一般都是结合锚点链接来使用的，这样可以实现用户体验更好的导航效果。

• :not()

  我们可以使用:not()选择器来选取某一个元素之外的所有元素

  ul li:not(.first)
  {
      color:red;
  }

---

文本样式

属性                   说明
text-shadow           文本阴影
text-stroke           文本描边
text-overflow         文本溢出
word-wrap             强制换行
@font-face            嵌入字体

• text-shadow文本阴影

  text-shadow:x-offset y-offset blur color;

  凹凸效果

  div
  {
      text-shadow:-1px 0 0 #333,
                  0 -1px 0 #333,
                  1px 0 0 #333,
                  0 1px 0 #333;
  }

  定义多个阴影

  我们可以使用text-shadow属性为文本定义多个阴影，并且针对每个阴影使用不同的颜色。当定义多个阴影时，text-shadow属性是一个以英文逗号隔开的值列表

  text-shadow:0 0 4px red, 0 -5px 4px green, 2px -10px 6px biue;

• text-stroke文本描边

  text-stroke:width color;

• text-overflow文本溢出

  text-overflow:取值；

  属性取值：ellipsis文本溢出，显示省略号，并隐藏多余的文字

  clip文本溢出时，不显示省略号，而是将溢出的文字裁切掉

   

  实际上，单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果，我们还需要结合white-space和overflow这两个属性来实现，下面是完整的语法：

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;

  overflow:hidden;white-space:nowrap;和text-overflow:ellipsis;这三个是固定搭配的，我们直接搬过去用就可以了

• 强制换行：word-wrap、word-break

  word-warp属性有两个取值

  word-wrap:取值;   //normal 自动换行（默认值） break-word强制换行

  word-break属性有三个取值

  word-break:取值;  //normal 自动换行（默认值） break-all允许在单词内换行  keep-all只能在半角空格或连字符处换行

• 嵌入字体：@font-face

  我们可以使用@font-face方法来加载服务器端的字体，从而使得所有用户都能正常显示该字体。

  @font-face
  {
      font-family:字体名称;
      src:url(文件路径);
  }

颜色样式

• opacity

  opacity:数值;

  opacity属性取值是一个数值，取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明

• rgba颜色

  语法

  rgba(r,g,b,a)

  R，指的是红色值（Red）；G，指的是绿色值（Green）；B，指的是蓝色值（Blue）；A，指的是透明度（Alpha）

   padding-right: 0.1px;">color:rgba(255,0,0,1.0)   //字体

• CSS3渐变

  线性渐变

  background:linear-gradient(方向，开始颜色，结束颜色)

  线性渐变的“方向”取值有两种:一种是使用角度（单位为deg）;另外一种是使用关键字，如下表所示。

  属性值           对应角度         说明
  to top          0deg            从下到上
  to bottom       180deg          从上到下（默认值）
  to left         270deg          从右到左
  to right        90deg           从左到右
  to top left     无               从右下角到左上角（斜对角）
  to top right    无               从左下角到右上角（斜对对角）

•