前端笔记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   无               从左下角到右上角(斜对对角)
  •  

posted @ 2021-11-21 15:47  七柯核桃  阅读(76)  评论(0)    收藏  举报