html&css的简单了解

html&css

html：

1. 常用的标签：

   div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea

   h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date）

2. 标签的分类：

   单双标签：单标签没有与之对应的结束标签，而双标签有

   行内标签和块级标签：

   • 行内标签：a,span,strong,u,em
   • 行内块标签：img,input,textarea
   • 块级标签：div,p,h1-h6,ul,li,dl,dt,dd

ccs：

1. 继承性：与文本有关的样式，都可以继承

2. css书写方式：

   • 外联：<link rel="stylesheet" href="">
   • 嵌入：<style></style>
   • 内联/行内：<img src="" width="290px" alt="">

3. css选择器：

   • 分类：*、标签、类名、id、交集、并集、后代、子代、nth-of-type
   • 权重（从小到大）：*<标签名<类名<id<行内<!important

4. 常用样式：

   • 背景：

     • 背景颜色：用background-color来设置
     • 指定背景位置：用background-position来设置
     • 背景图片：用background-image来设置
     • 平铺：用background-repeat来设置

   • 文字：

     • 文字颜色：color

     • 文字大小：font-size

     • 文字字体：font-family

     • 文字加粗：font-weight

     • 文字斜体：font-style:itelic

     • 行高：line-height

     • 文字对齐：text-align

     • 下划线：text-decoration:overline(加顶线)

       ​ underline(加下划线)

       ​ none(删除链接下划线)

   • 边框：

     • border(可以设置left,right,top,bottom方向):

     • border-color:边框颜色

     • solid:实线框

     • dotted:虚线框

   • 边界：margin(可以设置left,right,top,bottom方向):

   • 填充距：padding(可以设置left,right,top,bottom方向):

   • 文本转换:

     • display:none;
     • display:block;转换为块级
     • display:inline-block;转换为行内块

5. 浮动：float

6. 定位：

   • 固定定位：

     • 参照物：窗口

     • 不占位

     • 脱离标准流

   • 绝对定位：position:absolute

   • 相对定位：position:relative

7. overflow：hidden（作用）：

   • 超出部分隐藏
   • 清除浮动
   • 清除塌陷

8. 精灵图片的使用： CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

9. 文字图标的使用：

10. css3：

    • transform:旋转

    • animation：animation 属性是一个简写属性，用于设置六个动画属性：

      语法：animation: name duration timing-function delay iteration-count direction;

      • animation-name：规定需要绑定到选择器的 keyframe 名称。
      • animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
      • animation-timing-function：规定动画的速度曲线。
      • animation-delay：规定在动画开始之前的延迟。
      • animation-iteration-count： 规定动画应该播放的次数。
      • animation-direction： 规定是否应该轮流反向播放动画。

    • transition:transition 属性设置元素当过渡效果，四个简写属性为：

      语法：transition: property duration timing-function delay;

      • transition-property：指定CSS属性的name，transition效果
      • transition-duration： transition效果需要指定多少秒或毫秒才能完成
      • transition-timing-function：指定transition效果的转速曲线
      • transition-delay： 定义transition效果开始的时候

    • border-radius:做圆用