• 001CSS三大特性


    一、CSS三大特性

    1. 继承性
    1. 给父元素设置一些属性,所有的子元素都可以继承
    2. 并不是所有的属性都可以继承,只有以color、font-、text-、line开头的属性才可以继承
    3. a标签的字体颜色和下划线是不能继承的
    4. h标签的文字大小是不能继承的
    5. 可通过谷歌浏览器开发者工具右边的style标签中查看
    6. 一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体大小等
    2. 层叠性
    1. css处理冲突的一种能力
    2. 层叠性只有在多个选择器同时选中同一个标签,然后又设置了相同的属性,才会发生层叠
    3. 可通过谷歌浏览器开发者工具右边的style标签中查看
    3. 优先级
    1. 当多个选择器同时选中同一个标签,然后又设置了相同的属性,如何层叠就由优先级来确定
    2. 如果是间接选中(继承),谁离目标标签近就听谁的
    3. 如果是直接选中,而且选择器类型相同,那么谁写在后面就听谁的
    4. 如果是直接选中,选择器类型不同,那么就会按照选择器的优先级来层叠:id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认
    4. !important
    1. 用于提升某个直接选中标签的选择器中的某个属性的优先级,可以将被指定的属性的优先级提升为最高
    2. 通配符选择器也可以使用
    3. 只能提升某个被指定的属性,那些没有被标记的不影响
    4. 必须写在分号前面,感叹号也不能省略
    5. 权重的计算
    1. 当多个选择器混合在一起使用时,我们可以通过计算权重来判断谁的优先级最高
    2. 首先数id选择器的个数,谁的多谁的优先级就高
    3. 如果id选择器的个数相同,那么数类选择器的个数,谁的多谁的优先级高
    4. 如果id和类的个数都相同,那么数标签选择器的个数,谁的多谁的优先级高
    5. 如果id、类和标签个数都一样,那么就不进行计算了,谁写在后面听谁的
    注意:必须是直接选中标签

    二、CSS显示模式

    div:一般用于配合css完成网页的基本布局,是一个容器级别的标签
    span:一般用于配合css修改网页中的一些局部信息,是一个文本级别的标签
    区别:div是块级元素,会单独占一行。span是行内元素,一行内可以有多个
    容器级的标签:可以层叠多个标签
    文字级的标签:只能放文字,图片和超链接等
    在企业中一般嵌套都是用div或者按照标签来嵌套

    1. 块级元素:p div h ul ol li dl dt dd

    独占一行,如果没有设置宽高,默认和父元素一样,如果设置了就按设置的来

    2. 行内元素:span b u i s strong em ins del

    行内元素不可以设置宽高,默认和内容一样

    3. 行内块级元素:img

    元素既不独占一行,也能设置宽高

    4. 相互转换

    在每个选择器的属性里都有display这个属性
    display:inline(di+tab):转化为行内元素
    display:inline-block(dib+tab):转化为行内块级元素
    display:block(db+tab):转化为块级元素

    三、CSS背景属性

    1. 背景颜色:background-color:(bc + tab)
    2. 背景图片:background-image:url()(bi + tab)
    3. 背景图片的平铺:background-repeat:(bgr + tab)
      repeat:默认值,在水平和垂直方向都平铺
      repeat-x:只在水平方向平铺
      repeat-y:只在垂直方向平铺
      no-repeat:不平铺
    4. 背景定位:background-position:水平方向 垂直方向(bp + tab)
      水平方向:left/center/right或者具体像素,默认值为left,越往右越大,可设置负数即图片往左移,可只设置水平方向值为center,图片自动居中显示
      垂直方向:top/center/bottom或者具体像素,默认值为top,越往下越大,可设置负数即图片往上移
      具体像素用来与精灵图结合使用
    5. 关联方式:background-attachment:(ba + tab)默认值为scroll,背景图片会随着滚动条滚动而滚动,如果不想让他随着滚动可以将值该为fixed
    6. 连写:background:背景颜色 背景图片 平铺方式 关联方式 定位方式(bg+ + tab)
    7. 背景重叠的应用可以理解为PS当中的图层多个图层重叠显示
    注意:
    1. 同个标签可以同时设置背景颜色和背景图片,默认是图片覆盖颜色
    2. 如果要设置background-repeat属性,必须有background-image属性
    3. 连写中任何一个属性都可以被省略
    4. 由于是背景图片,需要先给div设置一个高度
    5. background-image属性与img标签的区别:
    6. 背景图片仅仅是一个装饰,不会占用位置
    7. 背景图片有定位属性,可以随便改变位置
    8. 插入标签的语义比背景图片更强,容易被搜索引擎搜到
     
  • 相关阅读:
    1 let和const
    ECMAScript 6 扫盲
    回溯法
    13. Ajax技术
    12.JSTL标签
    11.EL(表达式语言)
    10.正则表达式(未完成)
    博客园自定义样式
    9.一次简单的Web作业
    8.JavaScript
  • 原文地址:https://www.cnblogs.com/itcomputer/p/12662939.html
Copyright © 2020-2023  润新知