css和html第一部分

港控/mmm° 2023-02-23 12:03 41阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href="./css/normalize.css">
    
        
        
        <style>
                 /* 默认样式： - 通常情况，浏览器都会为元素设置一些默认样式 - 默认样式的存在会影响到页面的布局， 通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面） */
    
            /* body{ margin: 0; } p{ margin: 0; } ul{ margin: 0; padding: 0; /* 去除项目符号 * / list-style:none; } */
    
            /* *{ margin: 0; padding: 0; } */
     /* 选择器 */
            *{  color: aliceblue;}
            p{  width: 100px;}
            #content{  width: 12px;}
            .num{ color: #000;}
     /* 复合选择器 */
            /* 交集选择器 作用：选中同时复合多个条件的元素 语法：选择器1选择器2选择器3选择器n{} 注意点： 交集选择器中如果有元素选择器，必须使用元素选择器开头 */
            div.red{ 
                font-size: 30px;
            }
             /* 选择器分组（并集选择器） 作用：同时选择多个选择器对应的元素 语法：选择器1,选择器2,选择器3,选择器n{} #b1,.p1,h1,span,div.red{} */
              h1, span{ 
                color: green
            }
     /* 关系选择器 */
             /* 子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素 > 子元素 */
    
             div.box > span{ 
                color: orange;
            } 
    
            /* 后代元素选择器： 作用：选中指定元素内的指定后代元素 语法：祖先 后代 像是以下第二个类型的这种操作就必须是直属上一个元素 */
             div span{ 
                 color: skyblue
             } 
    
              div > p > span{ 
                 color: red;
             } 
    
             /* 选择下一个兄弟 仅限紧挨着的第一个 语法：前一个 + 下一个 选择 下边 所有的兄弟 语法：兄 ~ 弟 */
    
              p + span{ 
                  color: red;
              }
    
    
              p ~ span{ 
                  color: red;
              }
    /* 属性选择器 */
               /* [属性名] 选择含有指定属性的元素 [属性名=属性值] 选择含有指定属性和属性值的元素 [属性名^=属性值] 选择属性值以指定值开头的元素 [属性名$=属性值] 选择属性值以指定值结尾的元素 [属性名*=属性值] 选择属性值中含有某值的元素的元素 */
            /* p[title]{ */
            /* p[title=abc]{ */
            /* p[title^=abc]{ */
            /* p[title$=abc]{ */
            p[title*=e]{ 
                color: orange;
            }
    /* 伪类选择器 */
            /* 伪类（不存在的类，特殊的类） - 伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素... - 伪类一般情况下都是使用:开头 :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个子元素 特殊值： n 第n个 n的范围0到正无穷 2n 或 even 表示选中偶数位的元素 2n+1 或 odd 表示选中奇数位的元素 - 以上这些伪类都是根据所有的子元素进行排序 :first-of-type :last-of-type :nth-of-type() - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序 - :not() 否定伪类 - 将符合条件的元素从选择器中去除 */
            li:last-child{ 
                color: aquamarine;
            } ul > li:last-child{ 
                color: red;
            } ul > li:nth-child(2n+1){ 
                color: red;
            } ul > li:nth-child(even){ 
                color: red;
            }ul > li:first-of-type{ 
                color: red;
            }
            ul > li:not(:nth-of-type(3)){ 
                color: yellowgreen;
            }
            /* :link 用来表示没访问过的链接（正常的链接） */
             a:link{ 
                color: red;
                
            }
    
            /* :visited 用来表示访问过的链接 由于隐私的原因，所以visited这个伪类只能修改链接的颜色 */
            a:visited{ 
                color: orange; 
                /* font-size: 50px; */
            }
    
            /* :hover 用来表示鼠标移入的状态 */
             a:hover{ 
                 color: aqua;
                 font-size: 50px;
             }
    
             /* :active 用来表示鼠标点击 */
             a:active{ 
                 color: yellowgreen;
                 
             }
    /* 伪元素选择器 */
               /* 伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置） 伪元素使用 :: 开头 ::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 表示选中的内容 ::before 元素的开始 ::after 元素的最后 - before 和 after 必须结合content属性来使用 */
            div::before{ 
                content: '';
             }
    /* 样式的继承 */
              /* 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上 继承是发生在祖先后后代之间的 继承的设计是为了方便我们的开发， 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上， 这样只需设置一次即可让所有的元素都具有该样式 注意：并不是所有的样式都会被继承： 比如 背景相关的，布局相关等的这些样式都不会被继承。 有一种很烦人的情况就是样式继承使得边缘bargin把父元素也给搞下去 这种可以试试 overflow：hidden; 这是一个很神奇的用法 */
    /* 选择器的权重 */
                /* 样式的冲突 - 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定 选择器的权重 内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式 没有优先级 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）, 选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器 如果优先级计算后相同，此时则优先使用靠下的样式 可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式， 注意：在开发中这个玩意一定要慎用！ */
    /* 单位制度 */
              /* 长度单位： 像素 - 屏幕（显示器）实际上是由一个一个的小点点构成的 - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰 - 所以同样的200px在不同的设备下显示效果不一样 百分比 - 也可以将属性值设置为相对于其父元素属性的百分比 - 设置百分比可以使子元素跟随父元素的改变而改变 em - em是相对于元素的字体大小来计算的 - 1em = 1font-size - em会根据字体大小的改变而改变 rem - rem是相对于根元素的字体大小来计算 - 在移动端开发之中用处很大 */
                 .box2{ 
                width: 50%;
                height: 50%;
                font-size: 1rem;
                width: 10em;
                background-color:aqua; 
            }
    /* 色彩 */
                /* 颜色单位： 在CSS中可以直接使用颜色名来设置各种颜色 比如：red、orange、yellow、blue、green ... ... 但是在css中直接使用颜色名是非常的不方便 RGB值： - RGB通过三种颜色的不同浓度来调配出不同的颜色 - R red，G green ，B blue - 每一种颜色的范围在 0 - 255 (0% - 100%) 之间 - 语法：RGB(红色,绿色,蓝色) RGBA: - 就是在rgb的基础上增加了一个a表示不透明度 - 需要四个值，前三个和rgb一样，第四个表示不透明度 1表示完全不透明 0表示完全透明 .5半透明 十六进制的RGB值： - 语法：#红色绿色蓝色 - 颜色浓度通过 00-ff - 如果颜色两位两位重复可以进行简写 #aabbcc --> #abc HSL值 HSLA值 H 色相(0 - 360) S 饱和度，颜色的浓度 0% - 100% L 亮度，颜色的亮度 0% - 100% */
                 .box2{ 
                    background-color: red;
                    background-color: #9CDCFE;
                    background-color: rgb(254, 156, 156);
                    background-color:  rgba(red, green, blue, .3);
                    background-color: hsla(98, 48%, 40%, 0.658);
                 }
    /* 文档流 */
                 /* 文档流（normal flow） - 网页是一个多层的结构，一层摞着一层 - 通过CSS可以分别为每一层来设置样式 - 作为用户来讲只能看到最顶上一层 - 这些层中，最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列 - 对于我们来元素主要有两个状态 在文档流中 不在文档流中（脱离文档流） - 元素在文档流中有什么特点： - 块元素 - 块元素会在页面中独占一行(自上向下垂直排列) - 默认宽度是父元素的全部（会把父元素撑满） - 默认高度是被内容撑开（子元素） - 行内元素 - 行内元素不会独占页面的一行，只占自身的大小 - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素 则元素会换到第二行继续自左向右排列（书写习惯一致） - 行内元素的默认宽度和高度都是被内容撑开 eg：span */
    /* 盒子模型 */
                /* ！！！！ 盒子尺寸 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用） 可选值： content-box 默认值，宽度和高度用来设置内容区的大小 border-box 宽度和高度用来设置整个盒子可见框的大小 width 和 height 指的是内容区 和 内边距 和 边框的总大小 */
                 .box1{ 
                width: 100px;
                height: 100px;
                background-color: #bfa;
                padding: 10px;
                border: 10px red solid;
                box-sizing: border-box;
            }
        
                /* 内容区（content），元素中的所有的子元素和文本内容都在内容区中排列 内容区的大小由width 和 height两个属性来设置 width 设置内容区的宽度 height 设置内容区的高度 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部 边框的大小会影响到整个盒子的大小 要设置边框，需要至少设置三个样式： ！ 边框的宽度border-width border-width: 10px; 默认值，一般都是 3个像素 border-width可以用来指定四个方向的边框的宽度 值的情况 四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左右 一个值：上下左右 除了border-width还有一组 border-xxx-width xxx可以是 top right bottom left 用来单独指定某一个边的宽度 ！边框的颜色 border-color border-color用来指定边框的颜色，同样可以分别指定四个边的边框 规则和border-width一样 border-color也可以省略不写，如果省略了则自动使用color的颜色值 ！ 边框的样式 border-style border-style 指定边框的样式 solid 表示实线 dotted 点状虚线 dashed 虚线 double 双线 border-style的默认值是none 表示没有边框 ~！！border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求 除了border以外还有四个 border-xxx border-top border-right border-bottom border-left */
                  .box2{ 
                  border: solid 10px orange;
                  border-top: 10px solid red;
                  border-left: 10px solid red;
                  border-bottom: 10px solid red; 
                  }
                /* 内边距（padding） - 内容区和边框之间的距离是内边距 - 一共有四个方向的内边距： padding-top padding-right padding-bottom padding-left - 内边距的设置会影响到盒子的大小 - 背景颜色会延伸到内边距上 一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定， 所以在计算盒子大小时，需要将这三个区域加到一起计算 */
                 .num{ 
                    padding-top: 100px;
                 padding-left: 100px;
                 padding-right: 100px;
                 padding-bottom: 100px;
                 }
                  /* 外边距（margin） - 外边距不会影响盒子可见框的大小 - 但是外边距会影响盒子的位置 - 一共有四个方向的外边距： margin-top - 上外边距，设置一个正值，元素会向下移动 margin-right - 默认情况下设置margin-right不会产生任何效果 margin-bottom - 下外边距，设置一个正值，其下边的元素会向下移动 margin-left - 左外边距，设置一个正值，元素会向右移动 - margin也可以设置负值，如果是负值则元素会向相反的方向移动 - 元素在页面中是按照自左向右的顺序排列的， 所以默认情况下如果我们设置的左和上外边距则会移动元素自身 而设置下和右外边距会移动其他元素 - margin的简写属性 margin 可以同时设置四个方向的外边距 ，用法和padding一样 - margin会影响到盒子实际占用空间 box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局 第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动 第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动 第三个值 阴影的模糊半径 第四个值 阴影的颜色 outline 用来设置元素的轮廓线，用法和border一模一样 轮廓和边框不同的点，就是轮廓不会影响到可见框的大小 border-radius: 用来设置圆角 圆角设置的圆的半径大小 四个值 左上 右上 右下 左下 三个值 左上 右上/左下 右下 两个个值 左上/右下 右上/左下 */
                .box2{ 
                    box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ; 
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;
                    /* 上面的就变成了一个圆形了 */
                }
                /* 垂直外边距的重叠（折叠） - 相邻的垂直方向外边距会发生重叠现象 - 兄弟元素 - 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） - 特殊情况： 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大的 - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理 - 父子元素 - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距） - 父子外边距的折叠会影响到页面的布局，必须要进行处理 这里可用的就是overflow：hidden; */