CSS(5)__CSS基本用法<选择器和一些特效>

1.关于CSS3

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

文本，背景，动画，2d 3d转换伸缩布局，多列布局

 

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀 浏览器
-webkit chrome和safari
-moz firefox
-ms IE
-o opera

CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。

2：选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

2.1 属性选择器

其特点是通过属性来选择元素，具体有以下5种形式：

选择器 含义
E[attr] 存在attr属性即可
E[attr=val] 属性值完全等于val
E[attr*=val] 属性值里包含val字符并且在“任意”位置
E[attr^=val] 属性值里包含val字符并且在“开始”位置
E[attr$=val] 属性值里包含val字符并且在“结束”位置

选择具有att属性的E元素

<style>
img[alt] {
margin: 10px;
}
</style>


<img src="image1.jpg" alt="" />
<img src="image3.jpg" />

选择具有att属性并且属性值等于val的元素

<style>
input[type="text"] {
border: 2px solid #000;
}
</style>


<input type="text" />
<input type="submit" />

 2.2选择器属性

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）

<style>
div[class~="a"] {
border: 2px solid #000;
}
</style>


<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

选择具有att属性且属性值为以val开头的字符串的E元素。

<style>
div[class^="a"] {
border: 2px solid #000;
}
</style>


<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

选择具有att属性且属性值为以val结尾的字符串的E元素。

<style>
div[class$="c"] {
border: 2px solid #000;
}
</style> 


<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

选择具有att属性且属性值为包含val的字符串的E元素。

<style>
div[class*="ab"] {
border: 2px solid #000;
}
</style>


<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

2.2 伪类选择器  

以某元素（E）相对于其父元素或兄弟元素的位置来获取无素；其元素必须与父元素匹配。

选择器 含义
E:first-child 其父元素的第1个子元素
E:last-child 其父元素的最后1个子元素
E:nth-child(n) 其父元素的第n个子元素
E:nth-last-child(n) 其父元素的第n个子元素(倒数)
E:nth-of-type(n) 同一父元素的第n个E元素

n遵循线性变化，其取值0、1、2、3、4、...

n可是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；

注：指E元素的父元素，并对应位置的子元素必须是E

 li:first-child {          
  color: red;<sty
        }
<ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
</ul>
<ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
</ul>


2.2.2、E:last-child：其父元素的最后一个子元素，且子元素必须是E
p:last-child{color:#f00;}


<div>
<h2>我是一个标题</h2>
<p>我是一个p</p>
</div>


2.2.3、E:nth-child(n)：其父元素的第n个子元素，且子元素必须是E
<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>


<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数






HTML示例代码：


<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
<p>第4个p</p>
<p>第5个p</p>
</div>


CSS Case 1：
p:nth-child(2){color:#f00;}
很明显第2个p会被命中然后变成红色


CSS Case 2：
p:nth-child(3){color:#f00;}
这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。


CSS Case 3：
p:nth-child(4){color:#f00;}
这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素




2.2.4:E:nth-last-child(n) 其父元素的倒数第n个元素
<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
</div>
如上HTML，假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：
p:nth-last-child(2){color:#f00;}
而不是：
p:nth-last-child(1){color:#f00;}
因为倒数第1个p，其实是倒数第2个子元素。
2.2.5 nth-of-type(n)


odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
实例 2
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
p:nth-of-type(3n+0)
{
background:#ff0000;
}
2、空伪类
E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）
p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}
<p>我是一个段落</p>
<p> </p>
<p></p>


4、排除伪类
E:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：
form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

2.3伪元素选择器

文本的第一个字母或字（如中文、日文、韩文等）
 p {
            width: 200px;
            padding: 5px 10px;
            border: 1px solid #ddd;
            font: 14px/1.5 simsun;
        }
 p::first-letter {
            float: left;
            font-size: 40px;
            font-weight: bold;
            line-height: 1;
        }
  <h1>杂志常用的首字下沉效果</h1>
    <p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>


2、E::first-line 文本第一行；
  p {
            width: 200px;
            padding: 5px 10px;
            border: 1px solid #ddd;
            font: 14px/1.5 simsun;
        }
        
        p::first-line {
            color: #090;
        }
<h3>第一行文字的颜色与其它不同</h3>
    <p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>


3、E::selection 可改变选中文本的样式；
 p::selection {
            background: #000;
            color: #f00;
        }
    <h1>选中下面的文字，看看它的颜色</h1>
    <p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>


4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
 p::before {
            background: #fff;
            color: red;
            content: "如果你的能看到这段文字，说明你的浏览器支持E:before和E::before";
            font-size: 14px;
        }
        
        p::after {
            background: #fff;
            color: pink;
            content: "如果你的能看到这段文字，说明你的浏览器支持E:after和E::after";
            font-size: 14px;
        }
<p>我是一个段落</p>
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解
":" 与 "::" 区别在于区分伪类和伪元素

2.4颜色

颜色的表达方式 red、rgb() 、#ffff00 

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
Red、Green、Blue、Alpha即RGBA
R、G、B 取值范围0~255,A为透明度参数，取值在0~1之间，不可为负值。


Hue、Saturation、Lightness、Alpha即HSLA
不同的颜色表示方法其取值也不相同，具体如下：
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
RGBA、HSLA可应用于所有使用颜色的地方。
 background-color: rgba(100, 200, 20, 0.5);
     background-color: hsla(100, 80%, 80%, 0.5);


关于CSS透明度：
1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、transparent 不可调节透明度，始终完全透明
  div {
            background: red;
        }
        
     .test {
            /*            background: opacity;*/
            background: transparent;
        }


 <div class="test">看看各带color的属性设置为transparent时的效果</div>


p:nth-of-type(5) { visibility:hidden;} 隐藏，原来位置会被保留
p:nth-of-type(6){ display:none;} 隐藏，原来位置不会被保留

2.4 文本

1：text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

Font line-height  text-indent（首行缩进）  text-align：center  text-decoration

 text-indent：50px; 可以为负值。

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果

2：文本阴影：

text-shadow可以用来设置文本的阴影效果。

语法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；      
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；有单位：px
Color：是指阴影的颜色，其可以使用rgba色。
比如，我们可以用下面代码实现设置阴影效果。
 .demo {
            width: 340px;
            padding: 30px;
            font: bold 55px "微软雅黑";
            background: #C5DFF8;
            text-shadow: 2px 2px 0 red;
        } 

2. 边框

其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，我们需要重点掌握。

1.圆角边框

border-radius

圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图

为了方便表述，我们将四个角标记成1、2、3、4，如2代表右上角，CSS里提供了border-radius来设置这些角横纵轴半径值。

支持简写模式，具体如下：

1、border-radius: 10px; 表示四个角的横纵轴半径都为10px；

2、border-radius: 10px5px; 表示1和3角横纵轴半径都为10px，2和4角横纵轴半径为5px；

3、border-radius: 10px 5px8px; 表示1角模纵轴半径都为10px，2和4角横纵轴半径都为5px，3角的横纵轴半径都为8px；

4、border-radius: 10px 8px6px 4px; 表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；

 .circle {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 四个圆角值都设置为宽度或者高度的一半，显示一个圆*/
     border-radius:50%;/*  设置为50%，显示一个椭圆（宽高不一样时）*/
            border-radius: 50px;
        }
        
        .square {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border-radius: 20px;
        }
        
        .irregular {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
            border-radius: 10px 5px 20px 15px;
        }
        /*        上半圆，高度为宽度的一半，边框只加上半部分*/
        
        .half-circle {
            width: 100px;
            height: 50px;
            /*  空心  border: 1px solid red;*/
            background-color: green;
            border-radius: 50px 50px 0 0;
        }
        
        .left-circle {
            width: 50px;
            height: 100px;
            background-color: gold;
            border-radius: 50px 0 0 50px;
        }

2. 边框阴影

box-shadow

与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

如box-shadow: 5px 5px 5px #CCC

1、水平偏移量 正值向右 负值向左；

2、垂直偏移量 正值向下 负值向上；

3、模糊度是不能为负值；

4、inset可以设置内阴影；

注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，实际开发中可以大胆使用。

/* 外阴影*/   
        .outset {
            width: 100px;
            height: 100px;
            /*  x 偏移量  y偏移量  阴影模糊半径   阴影扩展半径  阴影颜色*/
            box-shadow: 10px 2px 20px;
        }


        /*        内阴影*/    
        .inset {
            width: 100px;
            height: 100px;
            /*  x 偏移量  y偏移量  阴影模糊半径   阴影扩展半径  阴影颜色*/
            box-shadow: 10px 2px 20px inset;
        }


        /*        阴影x为负数*/  
        .negative1 {
            width: 100px;
            height: 100px;
            box-shadow: -10px 2px 6px red;
        }
        /*        阴影y为负数*/     
        .negative2 {
            width: 100px;
            height: 100px;
            box-shadow: 4px -10px 6px red;
        }


        /*        多阴影*/  
        .multi {
            width: 100px;
            height: 100px;
            /*如果需要添加多个阴影只需要用逗号隔开*/
            box-shadow: 4px 2px 20px red, -4px -2px 6px green, 0px 0px 12px 5px blue inset;
        }

3. 渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。1.1   线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。

1、必要的元素：

a、方向

b、起始色

c、终止色

2、关于方向

设置渐变方向，可以用关键字如to top、to right，也可以用角度（正负值均可）如45deg、-90deg等，当以角度做为参数时，可参照下图来使用，0deg从下往上，90deg从左向右，进而可以推算出180deg从上向下。

 

 /* 默认是从上到下的渐变*/   
        #grad {
            height: 100px;
            background: linear-gradient(red, blue);
        }
        /* 从左到右的渐变*/     
        #right-grad {
            margin-top: 50px;
            height: 100px;
            background: linear-gradient(to right, red, blue);
        }
        /*        从左上角到右下角*/    
        #angles-grad {
            margin-top: 50px;
            height: 100px;
            background: linear-gradient(to bottom right, red, green);
        }
        /*        多种颜色的渐变*/   
        #colorful-grad {
            margin-top: 50px;
            height: 100px;
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        }
  /* 带透明度渐变*/ 
        #transparency-grad {
            margin-top: 50px;
            height: 100px;
            background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 0, 1));
        }
        /*        重复颜色的渐变*/    
        #repeat-grad {
            margin-top: 50px;
            height: 100px;
            /*表示百分之10的地方是红色，百分之30的地方是绿色*/
            background: linear-gradient(to right, red 10%, green 30%);    

4. 经向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。

 

写在最后

关于渐变不同浏览器有不同的版 本，即语法格式不一样，我们以最新语法为准，可自行查找资料了解即可。

.

 #radial-grad {
            margin-top: 50px;
            height: 100px;
            width: 200px;
            background: radial-gradient(circle, red, yellow, green);
        } 
        #radial-grad1 {
            margin-top: 50px;
            height: 100px;
            width: 200px;
            /*默认是椭圆的径向*/
            background: radial-gradient(ellipse, red 10%, green 30%, blue);
        }

最后,文字跑马灯效果

behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，需要注意的是：如果在<marquee>标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。

  alternate       

   来回滚动

   scroll

   单方向循环滚动   

   slide

   只滚动一次

bgcolor属性-文字滚动范围的背景颜色

direction属性

文字滚动的方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上

width和height属性

width和height属性的作用决定滚动文字在页面中的矩形范围大小。width属性用以规定矩形的宽度，height属性规定矩形的高度。这两个属性的参数值可以是数字或者百分数，数字表示矩形所占的（宽或高）像素点数，百分数表示矩形所占浏览器窗口的（宽或高）百分比。如下所示：

    <marquee width="300px"height="30px" bgcolor="red">我宽300像素，高30像素。</marquee>

loop属性

loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。如下所示：

    <marquee loop="2">我滚动2次。</marquee>

    <marquee loop="infinite">我无限循环滚动。</marquee>

    <marquee loop="-1">我无限循环滚动。</marquee>

crollamount和scrolldelay属性

这两个属性决定文字滚动的速度（scrollamount）和延时（scrolldelay），参数值都是正整数。如下所示：

    <marqueescrollamount="100">我速度很快.</marquee>

    <marquee scrollamount="50">我慢了些。</marquee>

    <marquee scrolldelay="30">我小步前进。</marquee>

<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>