Python---前端之路---CSS 选择器、颜色、边框、动画、影音

本文链接：https://blog.youkuaiyun.com/weixin_43965642/article/details/87807929

CSS：非常详细的学习网站：http://www.w3school.com.cn/cssref/index.asp  选择器、颜色、边框、动画、影音... ...
   css引入方法(掌握)
       内联式
           通过标签的 style 属性, 在标签上直接写样式
           实例
               <div style="width:100px; height:100px; background:red;">
               这是个div标签
               </div>
       嵌入式
           通过 style 标签, 在网页上创建嵌入的样式表
           实例
               <head>
               <style type="text/css">
               div {
               width: 100px;
               height: 100px;
               background: red;
               }
               </style>
               </head>
       外联式
           <link rel="stylesheet" type="text/css" href="css/样式文件名.css">
   css四种基本选择器（掌握）
       通用选择器 ( * ) 不用记
           * {
           属性名: 值;
           属性名: 值;
           ...
           }
           说明
               通用选择器, 匹配任何元素:
       标签选择器 ( 标签名 ) 掌握
           标签名 {
           属性名: 值;
           ...
           }
           说明
               标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
               一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意
       类选择器 ( class ) 掌握
           .类名 {
           属性名: 值;
           ...
           }
           说明
               通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类
               应用灵活, 可复用, 是css中应用最多的一种选择器
       id 选择器 ( id ) 掌握
           #ID名 {
           属性名: 值
           }
           说明
               通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。
   css其它选择器（了解）
       组合选择器
           多元素选择器不用记
               格式
                   E,F {
                   属性名: 值;
                   属性名: 值;
                   ...
                   }
               说明
                   同时匹配所有 E元素和 F元素, E和F之间用逗号分隔:
           后代选择器(层级) 掌握
               格式
                   E F {
                   属性名: 值;
                   属性名: 值;
                   ...
                   }
               说明
                   主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
           子元素选择器不用记
               格式
                   E > F {
                   属性名: 值;
                   属性名: 值;
                   ...
                   }
               说明
                   E > F 匹配所有 E元素的子元素F
           毗邻选择器不用记
               格式
                   E + F {
                   属性名: 值;
                   属性名: 值;
                   ...
                   }
               说明
                   匹配所有紧随 E元素之后的同级元素F (向下寻找)
       属性选择器
           所有具有此属性的
               第一种属性选择器的使用
               [attr] {
               属性名: 值;
               属性名: 值;
               ...
               }
               [title] {
               }
           属性值为指定值得
               第二种属性选择器的使用
               使用方法:
               E[attr=val] {
               属性名: 值;
               属性名: 值;
               ...
               }
       特殊选择器
           伪类选择器不用记
               格式
               说明
                   常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态
   块的大小位置设置
       边框.宽高
           属性   作用   举例
           width   设置元素(标签)的宽度   width: 200px;
           height   设置元素(标签)的高度   height: 200px;
           border   设置元素四周的边框   border: 1px solid pink;
           border-top   设置元素顶部边框   border-top: 1px solid/ dashed pink;
           border-left   设置元素左边边框   border-left: 1px solid pink;
           border-right   设置元素右边边框   border-right: 1px solid pink;
           border-bottom   设置元素底部边框   border-bottom: 1px solid pink;
       position 定位
           static 默认值. 没有定位:
           relative 生成相对定位元素，对于当前自己
           absolute: 生成绝对定位元素，对于父级
           fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。
           元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
       背景填充
           background-color 背景颜色
           background-image 背景图片
           background-repeat 背景重复
           background-size 背景大小
       透明度：opacity 0-1之间
       元素溢出 overflow属性 css元素超出指定的块范围可以使用下拉
           1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
           2、hidden 内容会被修剪，并且其余内容是不可见的。
           3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
           4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
       元素层级：z-index int范围决定被覆盖时值更大的显示在顶层
       display属性（块内联元素）inline-block
           none 元素隐藏且不占位置
           block 此元素会被显示为块元素
           inline 此元素会被显示为内联元素
           inline-block 行内联元素 ( 了解 )
       浮动: ( float ) 体验极差！！！
           我们有时候为了让一行能够显示多个元素, 会设置元素的float属性
           使用
               实例
               float：riget   reget向左浮动
               margin-right：100px 距离左边的距离，向左浮动就距离左边，向右浮动就距离右边
   块与块间隔的设置
       margin: 用于控制元素与元素之间的距离, margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到互相隔开的目的
           块居中：margin:0px auto;
       padding: 用于控制内容与边框之间的距离
           padding-top：20px; /* 设置顶部内间距20px */
           padding-left:30px; /* 设置左边内间距30px */
           padding-right:40px; /* 设置右边内间距40px */
           padding-bottom:50px; /* 设置底部内间距50px */
           padding后面还可以跟3个值，2个值和1个值
               padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
               padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
               padding：20px; /* 设置四边内边距为20px */
           简洁写法：padding：20px 40px 50px 30px;
       border(边框): 围绕在内边距和内容外的边框
           border-top:10px solid red;
           参数说明
               10px表示线框的粗细；solid表示线性
           四个边如果设置一样 border:10px solid red;
       content(内容): 盒子的内容, 显示文本和图像
           设置宽高 width height
               width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
               height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
       当你指定一个CSS元素的宽度和高度属性时, 你只是设置内容区域的宽度和高度.
       完全大小的元素, 你还必须加上内边距, 边框和外边距.
   文本常用样式属性
       color   设置文字的颜色   color: red;
       font-size   设置文字的大小   font-size: 12px;正常文字16px
       font-family   设置文字的字体   font-family: 'Microsoft Yahei'; (微软雅黑)
       font-weight   设置文字是否加粗 font-weight: bold; (bold:加粗 normal: 正常)
       line-height   设置文字的行高   line-height: 24px; (文字高度加上文字上下间距共计24px) 可以用于垂直居中
       text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
       text-decoration   设置文字的下划线 text-decoration:none; (取消下划线)
       text-indent 设置文字首行缩进，如：text-indent:32px; 设置文字首行缩进32px