part2: CSS基础

image.png

HTML中引入CSS 3种方式

image.png

调试

image.png

image.png

选中相应元素后，在灰色的element.style｛｝中直接可以新增样式
新增的样式如果和旧样式属性重复，则旧样式会自动显示删除线。

image.png

CSS通过什么作用到HTML元素？
选择器
五大类选择器

image.png

id选择器特点：
全局唯一

类选择器特点：

image.png

*{} .className{} #idName{} element{} 这四种都是基本类型选择器

image.png

关系型 选择器也是4种

• ~波浪号能够选择其后（不紧跟也是可以的，+ 选择器号必须紧跟）的所有指定兄弟元素，中间可以有其它兄弟隔开
• +加号只能选择紧跟其后的一个兄弟元素，只能选择一个
  
  image.png

伪类选择器分两种

1. 链接状态化伪类
2. 结构化伪类

链接状态化伪类

:link 链接未点击的状态
:hover 鼠标移入当前链接元素的状态
:active 鼠标点击（但未释放）：
:visited 鼠标点击后的状态
:focus 应用于拥有键盘输入焦点的元素。

下图正是点击未释放的链接

image

结构化伪类

image.png

CSS属性中的颜色值

image.png

16进制换算过程

image.png

currentColor

image.png

transparent:设置颜色值为透明

image.png

border三个属性

image.png

border四个方向，三种属性

image.png

border属性对四个边框
其中有些简写：
1个值：此值代表 上右下左 边框的值
2个值 第一个值代表上下 第二个值代表左右边框
3个值 第一个值代码上边框 第二个值代表左右边框 第个值代表下边框
4个值 分析对应上右下左

image.png

练习题：

    
    


    

        
app 下载
        

    

效果如下：

image.png

background

image.png

CSS Sprite：雪碧图（音译），精灵图

示例代码：http://coding.imweb.io/demo/p2/sprite.html

    
    
    


    
雪碧图的应用
    
开心表情
    

    
哭泣表情
    

雪比图的操作就像我们用放大镜去看物体，只不过css是通过操作css的background-position属性来实现，图片要左移，所以一般都是负值才能实现。