知识点总结

1.伪类：网页元素的各种状态

//未访问状态
a:link{color: red;
            text-decoration: none;}
//访问过后状态
a:visited{color: blue;}
//鼠标悬停状态
a:hover{color: green;
                text-decoration: underline;}
//激活选定状态
a:active{color: pink;}

注：定义顺序必须是此顺序

  //第一个子元素

  p:first-child{ color: red; }

   //最后一个子元素

  p:last-child{ color: red; }

2.背景颜色:background-color 属性定义了CSS中任何元素的背景颜色。

3.背景图片

3.1控制背景平铺

background-repeat 属性用于控制图像的平铺行为。可用的值是:

注： background-repeat 是 background-repeat-x 和 background-repeat-y的简写。

3.2调整背景图像的大小

background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。你也可以使用关键字:

cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况 下，有些图像可能会跳出盒子外 contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽 比不同，则可能在图像的任何一边或顶部和底部出现间隙。

3.3渐变背景

渐变——当它用于背景时——就像图像一样，也可以使用 background-image 属性设置。 网上有许多渐变生成器，比如 这个 可以创建一个渐变，然后复制并粘贴生成它的源代码

linear-gradient 线性梯度渐变，延伸到整个盒子上

radial-gradient 有一个固定的大小，因此会重复

.box{
    width: 300px;
    height: 300px;
    background-image: linear-gradient(to right, rgb(238, 162, 162) 0%, 
                                        rgb(187, 193, 191) 19%, rgb(87, 198, 225) 42%,
                                        rgb(180, 159, 218) 79%, rgb(122, 197, 216) 100%);
}

3.4 背景附加

body{
        height: 3000px;
        background-image: url(../img/2.jpg);    
   ​    //scroll : 使元素的背景在页面滚动时滚动       
   ​    background-attachment:scroll;
   ​    /* fixed : 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。
   ​    local :局部值将背景固定在设置的元 素上，因此当您滚动元素时，背景也随之滚动。*/
   ​            }

3.5 background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下 面。 值：

div{
        width: 500px;
        height: 300px;
        background-image: url(img/kedaya.jpeg);
        padding: 50px;
        border: 10px solid transparent;
        //border-box 背景延伸至边框外沿（但是在边框下层） 
        background-clip: border-box;
        /* padding-box 背景延伸至内边距（ padding ）外沿。不会绘制到边框处。
         content-box 背景被裁剪至内容区（content box）外沿 
         text 背景被裁剪成文字的前景色(这是一个实验性的 API，请尽量不要在生产环境中使用它。)*/
        background-image:url(../img/01.png);                    
​       }

4.溢出的内容

div{
        width: 500px;
        height: 30px;
        //溢出部分 隐藏
        overflow: hidden;
        //空白部分 不换行
        white-space: nowrap;
        //溢出的文本变成省略号
        text-overflow: ellipsis;
            }

5.修改滚动条样式

.lyric-container{  width: 300px;    height: 500px;   overflow: auto;    cursor: url(img/favicon.ico), auto;}

​   /* 滚动条整体部分 */

.lyric-container::-webkit-scrollbar{  width: 15px;   height: 15px;  }

​   /* 定义滚动条的轨道颜色、内阴影及圆角 */             

.lyric-container::-webkit-scrollbar-track{   background: rgb(239, 239, 239);    border-radius:2px; }

​   /* 滚动条里面的小方块 */             

.lyric-container::-webkit-scrollbar-thumb{   background: #bfbfbf;      border-radius:10px; }

​   /*定义两端按钮的样式*/               

.lyric-container::-webkit-scrollbar-button {   background-color:cyan;  }

​   /* 滚动条里面的小方块鼠标悬停的样式 */              

.lyric-container::-webkit-scrollbar-thumb:hover{   background: #333; }

6.鼠标样式

cursor 属性用于定义鼠标样式，可选值有: pointer （手指）、 wait （等待）、 help （问号）、 copy （加号）、 crosshair（十字） 用户也可以自定义一个鼠标样式

自定义：

cursor: url(../img/2.jpg), auto;

心得体会

第二次课程，讲解了上节课 JavaScript的函数，然后是CSS样式的剩余选择器类型讲解，查漏补缺对一些遗忘的书写规范进行记忆。接着是CSS的一些常用属性， width、height、border这些常用属性还比较熟悉，但是如外边距、内边距和盒子模型这些属性在之前虽然会用但也只是复制粘贴的操作，今天的讲解对它们也大概了解了，背景样式的讲解记忆深刻的是渐变背景的学习，最后是溢出内容的处理：隐藏和省略显示。