Python学习笔记Day14 - CSS

目录

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

CSS存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点:

  1. 在标签中使用 style = 'key1:value1;key2:value2;'
  2. 在页面中嵌入 <style type="text/css"> </style> 块
  3. 引入外部css文件（或链接） <link rel="stylesheet" href="css/common.css"/>

多class的优先级，标签上的style优先，然后按编写顺序优先

四种CSS引入方式的优先级:

  1. 就近原则
  2. 理论上：行内>内嵌>链接>导入
  3. 实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高

心得：

  1. 如果同一个css定义分布在两个css文件中，那么样式取后引入的css文件。
  2. 最好将第三方组件的css放在html靠前位置，自定义的css放到html后面位置。

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

编写css样式：

  1. 标签的style属性，代码重用

  2. 写在head里面 style标签中写样式

    • id选择器（用得极少，因为id不重复）
      #i1{}
    • class选择器 （最常用）******
      .c1{}
    • 标签选择器 （选择所有类型标签）
      div{}
    • 层级选择器（加空格） (c1下的div才应用)******
      .c1 .c2 div{}
    • 组合选择器（加逗号） ******
      #c1,.c2,div{}
    • 属性选择器（加[]）******
      对选择到的标签再通过属性筛选
      .c1[n='alex']{}

  3. 注释
    /* */

  4. 边框

    • 宽度，样式，颜色 (border: 4px dotted red;) (solid 实线，dotted 虚线)
    • border-left 只加左边框

  5. 标签字体属性

    • height:48px 高度 百分比10%(高度百分比需要受限于父级标签高度)
    • width 宽度 像素100px，百分比80%
    • text-align:ceter 水平居中
    • line-height:48px 垂直居中，根据标签高度
    • color 字体颜色
    • font-size 字体大小
    • font-weight:bold 字体加粗

  6. float ******应用非常广泛

    • float:left 向左浮
    • float:right 向右浮
    • 让标签浮起来，块级标签也可以堆叠，自动往下换行
    • 有时子级标签浮动时，父级不随着变，需要在最后加一行，撑起父级标签：
      <div style="clear: both;"></div>

  7. display ****常用

    • display: none; -- 让标签消失（隐藏）
    • display: inline; #让块级标签成为行内标签
    • display: block; #让行内标签成为块级标签
    • display: inline-block; #结合块级与行内标签属性
      具有inline属性,默认自己有多少占多少
      具有block属性，可以设置无法设置高度，宽度，padding margin

    重要
    行内标签：无法设置高度，宽度，padding margin
    块级标签：可以设置高度，宽度，padding margin

  8. padding margin (0,auto)

    • 外边距margin-top:10px;
      默认情况下有边距，取消边距<body style="margin: 0 auto;"> 上下0，左右自动居中
    • 内边距padding-top:10px;

  9. 垂直外边距合并问题

    父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己父元素、祖先元素的麻烦。只要给父元素设置个有效的 border或者padding就可以解决。

CSS进阶

  1. css重用

  2. 自适应 和 改变大小自动变形

    左右滚动条的出现
    宽度，百分比
    页面最外层：像素的宽度 => 在最外层先设置绝对宽度，内层设置百分比

    自适应：media

  3. 默认img标签有一个1px的边框

     img{
     border: 0;
 }

  4. position:

    • position:fixed; 固定在页面的某个位置,层叠分层，堆叠成行内标签 # 遮罩层

        bottom:0;30%
  right:0;20%

    • position:relative + absolute 配合使用做相对定位，固定在父级div某一位置

        <div style='position:relative;'>    #relative单独无用 absolute单独用只按第一次定位
      <div style='position:absolute;top:0;left:0;'></div>
  </div>

  5. opcity: 0.5 # 透明度

  6. z-index: 9; # 层级顺序，大的在上层

  7. overflow: hidden, auto # 超过范围隐藏或出现滚动条

  8. :hover # 加在样式后面，当鼠标在标签上时才应用该样式

  9. background 放置图片

    background-image:url('image/4.gif'); # 默认，div比图片大时，图片不断重复放置
    background-repeat: repeat-y竖着堆叠;no-repeat不重复;
    background-position-x: #设置图片偏移
    background-position-y:
    background-position:10px 10px;

  10. cursor:pointer 光标样式

  11. 让背景半透明只有一个办法，就是用rgba颜色
    background: rgba(0, 0, 0, 0.5)

posted @ 2020-07-05 00:33  Jerome12138  阅读(126)  评论(0)  编辑  收藏  举报