ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2022-7-10 第三小组-甘源册 学习笔记

2022-07-11 20:06:38  阅读:90  来源: 互联网

标签:10 2022 甘源册 height width background div border 选择器


1.CSS层叠样式表

  • 功能:网页美化

  • 样式通常存储在样式表中,把样式添加到HTML元素中,可以把样式显示在HTML中

<!-- 定义CSS样式方法 -->
<!--1. 行内样式,内联样式 ————(1)如果当前样式不需要复用,可以用;(2)优先级-->
   <p style="background: rgb(109, 219, 118);">lasf</p>
   <span style="background: yellow;">kmkk</span>

<!--2. 内页样式(嵌入样式) -->
   <style>
           /* 根据标签来命名 */
           /* 选择器selector */
           /* 标签选择器 可以让页面上所有的p标签都有样式 */
       p{
           background: red;
      }    
           /* 声明一个样式并起个名字 */
           /* 类选择器 声明样式的时候需要用一个英文的点.*/
           /* 类选择器优先级高于标签选择器 */
       .sd{
           background: yellowgreen;
      }
           /* id选择器 声明样式需要用一个#,对应元素的id要匹配*/
       #ss{
           background: blue;
      }
   </style>
<p >faslf</p>
   <p id="ss">faslf</p>
   <p class="sd">faslf</p>
/*3. 外部样式(推荐) */
.sd{
  background: yellowgreen;
}
div{
  background: rebeccapurple;
}
<!-- 引入外部css样式 -->
  <link rel="stylesheet" href="css/ch.css">
<p class="sd">  fsafsd </p>
  <div>dafag</div>

 

1.1层次选择器

  1. 并列选择器

    <style>
           div,p{
               color: rgb(12, 193, 243);
          }
       </style>
    <div>我是div</div>
       <p>我是p</p>
  2. 对div里边的p进行操作(后代选择器)

    <style>
           div p{
               color: aquamarine;
          }
       </style>
    <div>
           <p>fsa</p>
           <p>gsag</p>
           <span>
               <p>fas</p>
           </span>
       </div>
       <p> fsafsa</p>

     

  3. 子类选择器

     /* 选中div里面的直接子元素p */
           div>p{
               color: black;
          }

     

  4. 相邻选择器(div+p:选中紧跟着div的p)

        div+P{
    color;blue;
    }

1.2属性选择器

<style>
       /* 属性的名 [type]选中页面上所有带有type的标签
                  [type=text]选中页面是所有type属性等于text的标签
                  [title~=flower]选中页面上所有的title属性包含flower单词的所有元素 */
      [title~=flower]{
           height: 300px;
      }

   </style>

1.3伪类选择器

 <style>
       /* 默认样式 */
       a:link{
           color: red;
      }
       /* 鼠标悬停样式 */
       a:hover{
           color: aquamarine;
      }
       /* 元素被激活 */
       a:active{
           color: antiquewhite;
      }
       /* 点过的样式 */
       a:visited{
           color: rgb(30, 28, 28);
      }

1.4nth-child

 <style>
li:nth-child(3){
           color: royalblue;
      }
  tr:nth-child(2N){
           background: red;
      }
   
    /* :checked   选中所有被选中的元素*/

2.层叠性

  • 层叠性

    • 如果样式冲突,遵循就近原则,哪个样式离结构近就用哪个

    • 如果样式不冲突,就不层叠

  • 继承性

    • 子标签会继承父标签的某些样式。(文本元素,字号,背景颜色。。。。。。)

  • 优先级:类选择器>标签选择器>id选择器

  • 权重

    • 继承的样式权重为0

    • 行内样式权重最高(标签里的style)

    • 如果权重相同,就近原则

    • (!important)改变权重 权重无限大(比行内样式还大)

3.CSS常用的单位

  • px像素:绝对单位;一个像素代表一个小白点。如100px*100px的正方形,宽度100个点,高度100个点。

  • em:相对单位,它会参考它的父级元素。字体用的比较多,例:父级元素字体是16px,要设置元素的字体大小为2em,当期元素的字体大小就是32px。

  • rem:相对单位。是由页面决定的。当我们改变了浏览器的字号设置,页面的字号也会随之发生变化。一般应用在老人版。

  • %百分比:相对单位。相当于父级元素的比例。

4.CSS属性

4.1字体属性

<style>
       div{
           /* 字体大小 */
           font-size: 100px;
           /* 字体样式 */
           font-family: '楷体';
           /* 行高 字体大小是行高的一半 垂直居中*/
           line-height: 200px;
           /* 粗细 */
           font-weight: bold;
           /* 字体的修饰 */
           /* 下划线 */
           text-decoration: underline;
           /* 字体倾斜 */
           font-style: italic;
           
      }
       a:link{
           /* 取消下划线 */
           text-decoration: none;
           color: black;
      }
       a:hover{
           text-decoration: underline;
           color: blue;
      }
   </style>

4.2背景

<style>
       div{
           height: 800px;
           width: 800px;
           /* 背景颜色 */
           /*
              颜色:(1)英文,(2)rgb函数(red,green,blue),(3)rgba比rgb多个透明度,(4)十六进制0~f
          */
           background-color: rgb(177, 132, 220,0.4);
           /* 背景图片 */
           background-image: url(../img/1.jpg);
           /* background: url(../img/1.jpeg); */
           /* 背景图片的显示方式   不平铺 */
           background-repeat: no-repeat;
           /* 背景图片大小 */
           background-size: 100%;
      }
   </style>

4.3英文属性

<style>
       p{
           /* 字母间距 */
           letter-spacing: 20px;
      }
       img{
           width: 500px;
           height: 250px;
      }
       div{
           height: 500px;
           width: 400px;
           border: 1px red solid;
      }
       img:hover{
           width: 400px;
           height: 500px;
      }
   </style>

 

4.4序列

<style>
       li{
           /*矩形 */
           list-style-type: square;
           /* 空心圆 */
           list-style-type:circle;
           /* 类型   小写罗马数字 */
           list-style-type: lower-roman;
           /* 位置 */
           list-style-position:inside;
           /* 自定义类型 */
           list-style-image: url(../img/1.jpeg);
      }
   </style>

 

4.5边框

<style>
       div{
           height: 200px;
           width: 200px;
           /* 边框线的样式 */
           border-style: dotted;
           /* 边框线的宽度 */
           border-width: 10px;
           /* 边框线的颜色 */
           border-color: aqua;
           /* 上边三个合一 */
           border: 10px red solid;
           /* 边框下线 */
           border-bottom: 10px solid #011100;
           /* 边框左线 */
           border-left: 10px solid rgb(88, 253, 6);
           border-right: 10px solid rgb(14, 34, 219);
           /* 圆角 */
           border-radius: 1000px;
      }
       table tr td{
           border-right: 1px solid red;
      }
       table{
           border-collapse:collapse;
           border-spacing: 0;
           border-left: 1px solid red;
           border-top: 1px solid red;
      }
       table tr{
           border-bottom: 1px solid red   ;
      }
   
   </style>

 

4.6区块属性

<style>
       div{
           height: 300px;
           width: 300px;
           background: yellow;
           /* 显示方式块级变为行级 */
           display: inline;
      }
       span{
           height: 200px;
           width: 200px;
           background: orange;
           /* 显示方式行级变为块级 */
           display: block;
           /* 显示方式隐藏 */
           /* display: none; */
           /* 内联块 */
           display: inline-block;
      }
   </style>

 

4.7盒子模型

<style>
       .div1 {
           /*
              盒子模型:
              width: height: 表示内容区的宽和高;
              margin 外边距:元素距离上一个元素的位置
              padding 内边距:本元素内部空出的距离
              border 边框线的宽度
          */
           height: 300px;
           width: 300px;
           background: yellowgreen;
           padding: 10px;
           margin: 100px;
           /* 设置盒子模型的尺寸计算方式 */
           box-sizing: border-box;
      }

       .div2 {
           height: 300px;
           width: 300px;
           background: blue;
           padding: 10px;
           margin: 100px;
      }
   </style>


<div class="div2">我的</div>
   <div class="div1">我是div</div>

4.8定位(重点难点)

<style>
       .a{
           height: 300px;
           width: 300px;
           background: blue;
           position: absolute ;
           left: 200px;
           top: 200px;
      }
       .b{
           height: 100px;
           width: 1800px;
           background: red;
           position: fixed;
           
      }
       .fa{
           height: 1600px;
           width: 600px;
           background: skyblue;
           position:absolute;
           /* 元素隐藏 */
           /* visibility: hidden;             */
      }
       .dd{
           height: 200px;
           width: 200px;
           border: 5px solid red;
           /* 溢出样式
              hidden 隐藏
              scroll 滚动条
              visible 显示 */
           overflow:visible;
      }
   </style>

父相子绝 (父级相对定位子级绝对定位)

  • position 定位

    • absolute:绝对定位

      • 当前文档流可以理解为飘起来了

      • 参照物是已经定位的父级元素

    • relative 相对定位

      • 参照物是已经定位的父级元素

      • 占有原有位置,不会漂浮

    • static 文档流(默认)

    • fixed 浮动

      • 浮动,定住了

4.9浮动(难点)

 <style>
       .a{
           height: 300px;
           width: 300px;
           background: red;
           float: left;

      }
       .b{
           height: 300px;
           width: 300px;
           background: blue;
           float: right;

      }
       .fa{
           /* 浮动
              浮动的元素会脱离原本的文档流,会造成父元素的高度坍塌
              包围平图片和文本的div不占领空间,使用了浮动元素,后面紧跟它的元素错乱    
          */
           height: 800px;
           width: 800px;
           background: greenyellow;
           /* 清除浮动 */
           clear: both;
        }
        li{
           list-style: none;
           width: 100px;
           height: 30px;
           float: left;
           background: red;
           /* position: fixed; */
        }
   </style>

知识点掌握情况:理解

心路历程:(≧∇≦)

标签:10,2022,甘源册,height,width,background,div,border,选择器
来源: https://www.cnblogs.com/gycddd/p/16467638.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有