第一天

 

伪类元素：::before   ::after   必须添加content属性    默认是行级元素，如果想设置宽高必须转换成块级元素 ，无顺序。

其他伪类选择器：p::first-letter ：获取到p标签中第一个字符      p::first-line ：获取到p标签中第一行内容   p::selection：当前选中内容的样式(背景颜色，字体颜色)

属性选择器：

i[class=”red”]  类名为red

li[abc^=”red”]  选择 abc 属性值以 "def" 开头的所有元素

li[abc$=”red”] 选择 abc 属性值以 "def" 结尾的所有元素

li[abc*=”red”]  选择 abc 属性值中包含子串 "def" 的所有元素

兄弟伪类：

+：获取当前元素的相邻的满足条件的元素

~：获取当前元素满足条件的兄弟元素

.first + li{
     查找与first相邻的li元素;
}first ~ li{
      查找出所有和first是兄弟关系的li标签
}

::nth-child(2) 和::nth-of-type(2)区别  nod奇数  odd偶数

<div class="box">
    <p class="red">1</p>
    <p>2</p>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

<style>
    .box::nth-child(2){
        color:red;     //找到的时p标签的第二个元素
    }   
     .box::nth-of-type(2){
        color:blue;     //找到的分别是p,span标签的第二个元素
    } 
    p[class="red"]{
        color:red;//类名为red设置字体颜色为红色
    }    
</style>

//当元素中只有一种标签的时候，:first-child、ele:first-of-type与ele:last-child、ele:last-of-type 表示的含义是相同的

<tbody>
         <tr><td>1</td><td>apple</td></tr>
         <tr><td>2</td><td>orange</td></tr>
         <tr><td>3</td><td>lemon</td></tr>
         <tr><td>4</td><td>mango</td></tr>
         <tr><td>5</td><td>watermelon</td></tr>
         <tr><td>6</td><td>grape</td></tr>
</tbody>
<style>
    ...
    tbody tr:nth-child(-n+3){
        background: yellow;    //将前3个tr标签设置为黄色
    }
</style>

<style>
    ...
    tbody tr:nth-child(n+3){
        background: yellow;    //从tbody中第三个tr标签开始全设置成黄色
    }
</style>

<style>
     .box div:nth-of-type(2){
        background:pink;   //将box中第二个div元素设置成pink色。
    }
</style>

文字环绕两种方法：

第一种：利用图片属性实现   

        设置标签的属性align=”right”即可，如果想让图片居左，文字在右环绕，可以将align属性设置为left，其中 vspace 表示图片与文字的上下距离，hspace表示左右距离。

<p style="width:400px;">
    <img src="images/bkjj.jpg" align="right" width="120" hspace="5" vspace="5">
    HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局
</p>

第二种：利用CSS属性实现 

     修改float=”right / left” 即可实现图片在右,左文字在左环绕；修改float=”none” 即可实现图片与其标题独占一行，如下图：

<div style="width:400px;">
    <div style="float:left; clear: both;" align="center">
        <img src="images/bkjj.jpg" width="120" alt="" hspace="8"><br /> 图像标题
    </div>
    CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局
</div>

修改float=”right” 即可实现图片在右，文字在左环绕；修改float=”none” 即可实现图片与其标题独占一行，如下图：

首字下沉： 

p::first-letter{
    font-size:40px;
    float:left;
    color:red;
}

opacity 和rgba的区别:

相同点：取值都是0~1
不同点：opacity具有继承性，父元素设置opacity,子元素默认有opacity特性,父元素的Padding border content均有opacity特性
       rgba(255,255,255,0~1);
       //ragba(红色值，绿色值，蓝色值，透明度)；可以设置border，background-color; color;
        

阴影:

文字阴影：text-shadow：左上 为负  右下为正

添加阴影 text-shadow:offsetX offsetY blur color
offset:背景偏移的长度，blur:光分散的长度，背景及光的颜色
/*多层阴影的效果*/
text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;
/*立体浮雕效果*/
 text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;

在CSS3里可以使用RGBA和HSLA两种色彩模式：
    RGBA指的是“红色、绿色、蓝色和Alpha透明度
    hsla中 前三个参数则分别代表色调（0-360）、饱和度（0%-100%）和亮度（0%-100%）。透明度的取值从                        
    0（完全透明）到1（完全不透明）
    text-shadow: 0px 0px 8px hsla(30,100%,30%,0.6);

添加盒模型   box-sizing:border-box   改变/添加 padding  border  content-box值盒子大小不发生变化

添加边框圆角：border-radius:左上，右上，右下，左下    如果只设置一个默认四个角取值相同  ，两个对角相同

文本阴影：text-shadow:offsetX offsetY blur color

边框阴影：box-shadow : h  v  blur  spread  color  inset(边框内阴影加，外阴影无需添加)

                                        h:水平方向的偏移值
                                        v:垂直方向的偏移值
                                        blur:模糊--可选，默认0
                                        spread:阴影的尺寸，扩展和收缩阴影的大小--可选 默认0
                                        color:颜色--可选，默认黑色
                                        inset:内阴影--可选,默认是外阴影

                  添加阴影：坐上为负值，右下为正值。

背景颜色渐变 ：linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...)

background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);