CSS(选择器)

CSS 层叠样式表

    Casecading Style Sheet

    作用 : 用于美化页面

    如何使用 ? 三种引入方式

      内联样式 : 在标签的 style 属性中添加样式代码 ,

弊端: 不能复用

      内部样式 : 在 head 标签里面添加 style 标签 , 通过选择器选择到元素添加样式,

好处 : 可以当前页面复用弊端: 只能当前页面复用

      外部样式 : 在单独的 css 样式文件中写样式代码 , 在

html 页面中通过 link 标签引入 , 可以多页面复用 而

且可以将 html 代码和 css 代码分离

   三种引入方式的优先级 :

    内联优先级最高 , 内部和外部优先级一样 , 后执行覆盖先执行的

CSS 选择器

  1. 标签名选择器

      格式 : 标签名 { 样式代码 }

      选取页面中所有同名标签

  2. id 选择器 格式 : #id{ 样式代码 }

      选取页面中某一个元素时使用 , 需要给元素添加 id 属性

 3. 类选择器

      格式 : .class{ 样式代码 }

当需要选择多个不相关的元素时可以给元素添加相同的class 属性

然后通过类选择器选择.

 4. 分组选择器

     格式 : div,#abc,.xyz{ 样式代码 }

     可以将多个选择器合并成一个选择器

 5. 任意元素选择器

     格式 : *{ 样式代码 }

选择器续

  1. 子孙后代选择器

     格式 : div div span{ 样式代码 }

     匹配 div 里面的 div 里面的所有 span( 包括后代 span)

  2. 子元素选择器 格式 : div>div>span{ 样式代码 }

     匹配 div 里面的 div 里面的子元素 span

  3. 属性选择器

     格式 : 标签名 [ 属性名 =' 值 ']{ 样式代码 }

     匹配指定属性名和值的元素

  4. 伪类选择器

     选择的是元素的状态

     元素有哪些状态 :

     未访问状态 link

     访问过状态 visited

     悬停状态 hover

     点击状态 active

选择器回顾

  1. 标签名 div{}

  2. id 选择器 #id{}

  3. 类选择器 .class{}

  4. 分组选择器 div,#id,.class{}

  5. 任意元素选择器 *{}

  6. 属性选择器 标签名 [ 属性名 =' 值 ']{}

  7. 子孙后代选择器 div span{}

  8. 子元素选择器 div>span{}

  9. 伪类选择器 a:link/visited/hover/active

颜色赋值的几种方式

    三原色 红绿蓝 RGB Red Green Blue 每个颜色取值范围0-255

    颜色单词赋值 red/green/blue/yellow......

        6 位 16 进制赋值 # ffff 00 00

        3 位 16 进制赋值 #f00

        3 位 10 进制赋值 rgb(255,0,0)

        4 位 10 进制赋值 rgba(255,0,0,0-1) a=alpha 透明度值越小越透明

背景图片

    background-image:url(" 路径 ") 设置背景图片

    background-size:200px 400px 设置背景图片宽高

    background-repeat:no-repeat 禁止重复

    background-position: 横向百分比 纵向百分比 ; 设置背景图片位置

字体相关样式

   文本修饰 text-decoration:

      overline 上划线

      underline 下划线

      line-through 删除线

      none 去掉下划线

水平对齐方式 text-align:left/right/center

     字体颜色 color:red;

     行高 line-height:20px; 多行文本控制间距 单行文本可以实现垂直居中

     阴影 text-shadow: 颜色 x 偏移值 y 偏移值 浓度 ( 值越大越模糊)

     字体大小 font-size:20px 默认 16

     加粗 font-weight:bold 加粗 /normal 去掉加粗

     斜体 font-style: italic;

     字体设置 font-family: xxx,xxx,xxx; font:20px

      xxx,xxx,xxxx;

元素的显示方式 display

    display:block; 块级元素 : 独占一行 可以修改元素宽高, 包括 :div,h1-h6,p

    display:inline; 行内元素 : 共占一行 不可以修改宽高 , 包括:span,b,i,small, 超链接 a

    display:inline-block; 行内块元素 : 共占一行 , 可以修改宽高, 包括 : img,input 等

盒子模型 盒子模型 = 宽高 + 外边距 + 边框 + 内边距

   作用 : 用来控制元素的显示效果

   宽高 : 控制元素的显示尺寸

   外边距 : 控制元素的显示位置

   边框 : 控制边框效果

   内边距 : 控制元素边缘距内容的距离

盒子模型之宽高

   通过 width/height 控制元素的宽高 , 赋值方式 :

     1. 像素

     2. 上级元素的百分比行内元素不能修改宽高

盒子模型之外边距

什么是外边距 : 元素距上级元素或相邻兄弟元素的距

离称为外边距

赋值方式 :

    margin-left/right/top/bottom:10px; 单独某一个 方向赋值

    margin:10px; 四个方向赋值

    margin:10px 20px; 上下 10px 左右 20px

    maring: 0 auto; 居中

    margin: 10px 20px 30px 40px; 上右下左顺时针

    元素上下相邻时 , 彼此添加外边距取最大值

    元素左右相邻时 , 彼此添加外边距 两个元素的外边距 相加

盒子模型之外边距

    什么是外边距 : 元素距上级元素或相邻兄弟元素的距

离称为外边距

   赋值方式 :

     margin-left/right/top/bottom:10px; 单独某一个方向赋值

     margin:10px; 四个方向赋值

     margin:10px 20px; 上下 10px 左右 20px

     maring: 0 auto; 居中

     margin: 10px 20px 30px 40px; 上右下左顺时针

  元素上下相邻时 , 彼此添加外边距取最大值

  元素左右相邻时 , 彼此添加外边距 两个元素的外边距 相加.

 粘连问题 : 当元素的上边缘和上级元素的上边缘重叠

时 , 给元素添加上外边距会出现粘连问题 , 给上级元素

添加 overflflow:hidden 解决

行内元素上下外边距无效

盒子模型之边框

  赋值方式 :

  四个方向赋值 :

    border: 粗细 样式 颜色 单独给某一个方向添加边框 :

    border-left/right/top/bottom: 粗细 样式 颜色

  圆角 :

    border-radius:10px; 值越大越圆 , 超过宽高一半时为圆形

盒子模型之内边距

   什么是内边距 ?

   元素边缘距内容的距离为内边距

   作用 : 用于控制元素内容的位置

   赋值方式 : 和外边距类似

   padding-left/right/top/bottom:10px; 单独某一个方向赋值

   padding:10px; 四个方向赋值

   padding:10px 20px; 上下 10 左右 20

   padding:10px 20px 30px 40px; 上右下左顺时针

给元素添加内边距会影响元素所占宽高

CSS 的三大特性

   1. 继承性 : 元素可以继承上级元素文本和字体相关的样

式 , 部分标签自带效果不受继承影响 , 比如 : 超链接字体

颜色 ,h1-h6 字体大小等

    2. 层叠性 : 多个选择器有可能选择到同一个元素 , 作用的

样式不同的话 全部层叠有效 , 如果作用的样式相同 则

由优先级决定哪个生效

   3. 优先级 : 作用范围越小 优先级越高 id>class> 标签名>继承

元素的定位方式

    包括 : 静态定位 , 相对定位 , 绝对定位 , 固定定位 , 浮动定位

定位方式之静态定位

   静态定位又称为文档流定位 , 是元素默认的定位方式

   格式 : position:static;

       特点 : 元素以左上为基准 , 块级元素从上往下排列 , 行

       内元素从左向右排列

   如何控制元素的显示位置 ?

      通过外边距控制位置

定位方式之相对定位

    格式 : position:relative;

    特点 : 元素不脱离文档流 ( 不管元素显示到什么位置 , 原来的位置会一直占着)

    如何控制元素的位置 ? 通过 left/right/top/bottom 相对于元素初始位置做偏移

定位方式之绝对定位

   格式 : position:absolute;

   特点 : 元素脱离文档流 ( 不占原来的位置 )

   如何控制元素位置 ?

   通过 left/right/top/bottom 相对于窗口或某一个上级

   元素做位置偏移 , 如果想相对于某个上级元素需要在上级元素中添加相对定位

定位方式之固定定位

   格式 : position:fifixed

   特点 : 元素脱离文档流

   如何移动元素

   通过 left/right/top/bottom 相对于窗口 做位置偏移

定位方式之浮动定位

   格式 : float:left/right;

   特点 : 元素脱离文档流 , 从当前所在行 向左或向右浮

   动 , 当撞到上级元素边缘或其它浮动元素时停止 .

   一行装不下会自动换行 , 换行时有可能被卡主 当元素的所有子元素全部浮动时 ,

    此时自动识别的高度为0, 通过给元素添加 overflflow:hidden 解决

   应用场景 : 当需要将纵向排列的元素改成横向排列时使用

溢出设置 overflflow

   visible 超出部分显示 ( 默认 )

   hidden 超出部分不显示

   scroll 超出部分滚动显示

行内元素的对齐方式 vertical-align

   top: 上对齐

   bottom: 下对齐

   middle: 中间对齐

   baseline: 基线对齐 ( 默认 )

显示层级

    z-index:1; 默认值为 0, 值越大 显示越靠前