Navigation

    GitHub中文社区
    • GitHub排行榜

    论坛

    • Login
    • Categories
    • Recent
    • Tags
    • Popular

    HTML&CSS学习笔记

    技术交流
    1
    1
    347
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • DDy666
      DDy666 last edited by

      选择器

                  *选择所有的标签
      
                  标签选择器:直接通过标签名选择
      
                  类名选择器:直接通过类名选择标签 类名前面一定需要加点  .+class名字
      
                  后代选择器:被包裹的都称为后代 div p 使用空格隔开 一般不能超过四级
      
              
      
          清除样式 
      
               *{
                   margin: 0px;
      
                   padding:0px;
      
                   list-style: none;
      
               }
      
          div绝对水平居中 
      
               margin-left:auto;
      
               margin-right: auto;
      
           浮动可以让标签变成水平排列 float:left水平靠左 float:right水平靠右
      
           一个标签浮动,同级(同一个父级)标签必须浮动
      
          
      
              在标准流中(不浮动),父级可以检测到子级的高度
      
              如果父级不够宽的时候,子级会自动落下来
      
              子级浮动,父级检测不到高度。浮动塌陷
      
                  解决:
      
                  1、给父级增加高度
      
                  2、给父级加overflow:hidden;
      
             
      
           取类名相当于人名,可以有多个 类名需要使用英文开始,不能和标签名一样 
      
              img{
                  /* 图片的值,只需要设置一个方向即可,另外一个值,计算机自动计算 */
      
                  width: 20px;
      

      标签分类:

             第一种:单双标签
      
              双标签:<标签></标签>
      
              单标签:<标签>或<标签 /> 
      
             第二种:行内标签和快级标签
      
              行内标签:和其他标签并排排列 span b u i a
      
                      行内标签设置宽高无效,上下外边距无效,左右有效
      
                      上下内边距有效,不占位。左右有效且占位
      
              块级标签:独占一行ul li h1-h6 p div
      
              行内块:在一行排列,设置宽高有效 img input td tr table
      
              标准流:行内标签水平,块级标签垂直。
      
              做网站的时候,首先需要考虑的是标准流。再次是浮动。
      
              浮动以后,脱离标准流,变成行内块
      

      外边距塌陷

              标准流中:
      
              1、左右外边距可以叠加,上下外边距的值取决于最大的
      
              2、父标签内部有一个子标签。如果给子标签增加margin-top父级会跟着下来。
      
              解决方法:
      
              1、不要使用margin-top 给父级增加padding-top
      
              2、给父级增加overflow:hidden
      

      浮动以后的值上下左右都可以叠加

          多个类名中间使用空格 
      
          <a href="" class="left my" >
      

      css书写方式

      第一种:内联 
      
      第二种:外链 不需要加style标签对(做项目的时候)
      
      第三种:行内样式(不推荐使用)
      

      <!-- logo一般要放在h1里面 -->

      <h1>

      div{
          /* 文字颜色 */
      
          color:red;
      
          /* 文字大小 */
      
          font-size: 20px;
      
          /* 行高 */
      
          line-height: 30px;
      
          /* 字体 */
      
          font-family: "楷体";
      
          /* 文字居中 */
      
          text-align: center;
      
          /* 盒子模型 margin padding border width height */
      
          /* 浮动 ,让标签水平排列 */
      
      }
      

      固定定位的标签 position: fixed 不会随着窗口的滚动而滚动

          参照物是当前的窗口 left  top bottom right
      
          左右只能存在一个,上下只能存在一个
      
          固定定位,脱离标准流,变成行内块
      

      相对定位 position: relative相对自身位移,一般用来做微调

      top left right bottom参照物是自身

      占位:占的是原来的位置

      绝对定位 position: absolute一般实现的效果是一个标签放置在另一个标签的上面

      子级绝对定位,父级相对定位。可以把子级固定在父级的任何位置 left top right bottom

      绝对定位:不占位

      绝对定位以后,标签变成行内块

          /* 文字垂直居中,设置行高等于当前标签的高度 */
      
          line-height: 40px;
      
          /* 增加圆角,值越大圆角越明显 值是50%的时候就是圆形*/
      
          border-radius: 50%;
      
          /* 旋转 deg度数单位  正值顺时针,负值逆时针 */
      
          transform: rotate(30deg);
      

      display

              inline把标签转化为行内标签
      
              inline-block把标签转化为行内块
      
              block 把标签转化为块级标签
      
              none隐藏标签
      
              转化完了以后,只是为了工作方便。原来标签的语义没有变化
      

      css层叠性和继承性

      选择器权重 *<标签名1g<类名1kg

      选择器权重可以叠加

      层叠性:

          css同样的样式,权重一样的话后写的生效
      
          权重不一样,取决于权重高的
      

      继承性:

          与文字有关的样式,都可以继承
      
          如果一个标签没有某一个与文字有关的样式(一定要考虑到内置的一些样式),会向上寻找,直到找到该样式,
      

      css3样式

          /* linear-gradient(to 方向,色值,色值) */
      
          /* background: linear-gradient(to top,red,#ffff00,blue); */
      
          background: lime;
      
          /* 投影 
      
              第一个值水平方向 正值右边 负值左边
      
              第二个值垂直方向
      
              第三个值虚实程度
      
              第四个值影子大小
      
              第五个值影子颜色 可以书写成透明色
      
          *
      

      html5常用标签 用法和div一模一样,只是语义更重了

          <header>头部</header>
      
          <nav>导航</nav>
      
          <main>主要内容</main>
      
          <section>大区域内容</section>
      
          <aside>侧边栏</aside>
      
          <footer>底部</footer>
      
          <article>文章</article>
      

      转化模块

           转换模块,对于行内标签没有效果 占得是原来的位置 
      
          /同样的样式后写的生效 
      
           旋转 
      
          transform: rotate(30deg);
      
          缩放 0-1缩小 大于1的时候放大
      
          transform: scale(0.3);
      
          位移,第一个值代表水平方向,第二个值垂直方向 
      
          transform: translate(100px,100px);
      
           可以书写多个值,使用空格隔开 
      
          transform: scale(0.3) rotate(12deg) translate(100px ,100px);
      
          旋转以后,整个坐标系也跟着改变 
      
          transform: translate(100px,100px) rotate(90deg);
      
          transform: rotate(90deg) translate(100px,100px) ;
      

      过度模块

          /* 过渡模块,中间变化过程可见 all代表所有的可以专门设置一个样式 */
      
          /* 第一个值代表样式 第二个值动画持续时间 第三个值延迟时间(可选) */
      
          /* transition: all 2s 2s; */
      
          transition: background 1s 0s,transform 1s 1s,border-radius 1s 2s,width 1s 2s;
      
          }
      
          /* 选择器:hover鼠标移入以后才生效 */
      

      动画模块

      /* 使用动画 动画名字 动画持续时间 次数(可以书写具体的次数) infinite无穷 linear平缓过渡*/

                  animation:circle 2s infinite linear;
      
                  /* transform-origin: x y; 旋转中心点 第一个值代表水平 left center right,第二个值代表垂直top center bottom*/
      
              }
      
              /* 定义动画 
      
                  @keyframes 动画名字{
                      书写各个状态的样式条
      
                      状态就是百分比来划分
      
                  }
      
              */
      
              /* :nth-of-type(n)可以选择到具体的某一个 */
      
              /* 定位以后的标签,如果叠加的话,后写的在上面
      
                  定义以后的标签,可以通过z-index调整图层顺序
      
                  默认值0值越大越靠上。可以是负值但是不建议
      
              */   
      
              
      
             
      
              /* 加此样式,才可以进入三维坐标 */
      
              transform-style: preserve-3d;
      1 Reply Last reply Reply Quote 0
      • First post
        Last post