w3c教程    html-w3c教程 .   css-w3c教程 .

菜鸟教程   html-菜鸟教程 .  css-菜鸟教程 .

深圳市数值软件有限公司  深圳市数值软件有限公司 . 数值软件 .   数值 .

HTML: 超文本标记语言 (Typer TExt Markup Language) ,一套标记标签,描述网页,由浏览器解析,<>;

html 常用标签:

head(头部) -> title(标题), l ink(导入css样式),  base(页面链接的默认地址或目标),

meta(元数据,网页搜索关键词等),<meta content="3;https://www.sz-tools.cn/">3秒后跳转数值,骚操作, 

script(导入js),   style(定义css样式) ;

 body(主体) -> h1~h6(标题),   p(段落),  b,strong(加粗标签),  strike(文字加中线),  em(文字斜体),  sup,sub(上下角标),

     br,hr(换行,水平线),  div,span(块,内联标签),hgroup(标题分组),  blockquote,q(长短引用),

    table,form(表格表单),  ul,ol,dl 列表,  img,video,audio(图片视频音频),  iframe,frameset(内联框架);

布局 -> header,  session,   footer,  nav,  aside,  main,  article, div,  span;

总结:html相对来说如买是非常简单的,看看文档,逛逛博客,基本都问题不大,在实战中再精进咯.

CSS: 层叠样式表(Cascading Style Sheets),

• 选择器 -> 群组选择器[p,body,img,div{}], 兄弟选择器[p+p{}], 属性选择器[p[title]{}], 后代选择器[body ul li{}] ,
  子元素选择器[div > p{}], ID选择器[#hjDiv{}], 类选择器[.hjDiv{}], 伪元素选择器[E::first-line,E::before{}],
  伪类选择器[E::first-child,E::visited,E::focue,E::enabled{}]     注:后代选择器空格分隔,子选择器只对直接后代有影响;
• 盒子模型 -> border[width,style,color], border-radiud, box-shadow, padding, margin, box-sizing[border-box,content-box];
• 文档流 -> 网页是多层级结构,更底下的一层称为文档流,是网页的基础,创建的元素默认都是在文档流中排序的.
  浮动float 会脱离文档流,不再占位,可能发生覆盖.也会伴随有高度塌陷问题.  .clearfix ,clear after伪类可解决高度塌陷 ::after{content:\'\';clear:both};
• 定位 -> 相对定位(relative,偏移量,相对对象),定位(absolute脱离文档流,相对坐标原点),固定定位(脱离文档流,fixed,参照对象是浏览器可视窗口);
• 行内元素, 块元素, 空元素

 叠加性:同一个元素可被多条样式规则制定;

 继承性:后代元素可继承前辈元素的一些样式和属性<背景,盒子,布局属性不会被继承>;

 优先级:权重越高,优先级越高;

background属性 ->color, image, repeat, attachment, position, size 

• background-image:url("图片的网址") ; //背景图
• background: url("图片的网址") ;           //背景
• background-color:#色码 :                    //背景颜色
• background-position: 0% 0% ;            //定位,可能值:top left , center left ~
• background-repeat:repeat ;                //重复 
• background-size: 50% ;                      //尺寸,50%是缩放图片,cover拉大填满背景区,container缩放适合背景区, 80px 40px 调整宽高像素.
• background-color: #eee;
  background-image:url(hj.gif);
  background-repeat:repeat-x;
  background-attachment:scroll;           //scroll是背景图像随对象内容滚动为默认值
  background-position:top right;
  可缩写为->   background: #eee url(hj.gif) repeat-x top right;

布局 -> 固定宽度, 流动, 弹性 .

• 固定宽度:布局大小不会随用户调整浏览器大小而变化,一般是900-1350px像素宽,960px最常见;
• 流动布局:大小会随用户浏览器窗口大小而改变,能更好的适应屏幕大小,但可能随着页面宽度的变化,
  文本行的长度和页面元素之间的位置关系都可能变化,页面变形;
• 弹性布局:在浏览器窗口变宽或变窄时,布局跟着变化,而且所有内容元素的大小等也跟着变化,相对较复杂,现主流是弹性布局.

行内元素<inline>的一些属性 ->

• 不会有width,height属性,由内容撑开,但高度可通过line-height调整;
• padding属性只有padding-left与padding-right生效,-top,-bottom会改变元素范围,但不会对其他元素造成影响;
• margin属性只有margin-left与margin-right有效,-top,-bottom无效,
• overfolw溢出属性无效.vertical-align属性无效.

动效 -> transition, transforms, animation

•  transition:过渡,用于平滑的改变CSS值,如

  change{
  　　width: 200px;
  　　height: 200px;
  　　background: green;
  　　transition: background 5s;
  }
  change:hover{
  　　background: blue;
  }

   transition属性是以下几个属性的缩写. transition-property , transition-duration , transition-delay , transition-timing-function ;+

• transform: 用来产生变化,如选择,缩放等,但是transform的变化是没有过渡效果的.一般是与transition一起使用,这样就能产生渐变的动效,如
  旋转,移动等.
  

  .change{
      transition: all 3s ease;
  }
  .change:hover{
      transform: rotate(720deg) scale(2,2);
  }

         2D旋转 -> translate(x,y)   rotate  scale(a,b)  skew(deg,deg)^skewX,skewY ; transform变换的参照点默认是中心点,可通过transform-origin(a,b)
         来改变参照点的位置,a,b的值可以是百分比,px等或者是 left right center top bottom .
         3D转换 -> translate3d(x,y,z) 3D移动  scale3d(x,y,z) 3D缩放  rotate3d(x,y,z,angle) 3D旋转  prespective(n) 透视视图

• animations: 动画,使用关键帧@keyframes创建动画 

  @keyframes hj{
      from{  //start css
      }
      to{     //end css
      }
  }
  //or
  @keyframes hj{
      0%{    //start css
      }
      50%{   //center css
      }
      {  //end css
      }
  }

  使用关键帧先定好动画变换过程中的关键样式,然后再使用连续变化或不连续变化实现动画效果,可简写

  div{
      width: 200px;
      height: 200px;
      background: green;
      animation: hj 5s;
  }
  
  @keyframes hj{
      from {
          background:green;
      }
      to {
          background:blue;
      }
  }

  主要属性 -> animation-name @keyframes动画的名称 animation-duration周期 animation-timing-function动画的速度曲线<linear,ease,ease-in~~~>

  animation-delay延时  animation-iteration-count播放次数 animation-direction正反向 ~~~
  简写 ->

   animation: name duration timing-function delay iteration-count direction fill-mode play-state; 
  
   animation: hj 3s linear 2s infinite alternate both running;

   

工具

EnjoyCSS 生成器大大简化了自定义类声明,能加快工作流,简单易用.

css3生成器  简单易用,可以玩玩~

css3 maker 简单易用,可以玩玩~

在线工具--开源中国

OverAPI--齐全的API文档