02-html&css基础

作者: EndEvent | 来源:发表于2017-08-08 09:27 被阅读1725次

    一、环境搭建

    • 浏览器 --- 谷歌/火狐/IE/Safari
    • 编辑器 --- HBuilder/Sublime/Dw/记事本

    二、语言了解

    • HTML 超文本标记语言 【基本架构】
      语言: 和浏览器沟通的
      标记:  <文本>   <html>
          标签对: <html></html>
          单标签: <img />
      文本: 显示文本内容
      超文本: 显示图片、显示视频、播放音乐....
    
    • CSS 层叠样式表 【搞装修的】
    一个人的描述:
      身高: 183cm
      年龄: 18岁
      体重: 70Kg
    
    一个元素的描述:
      style="width: 100px; height: 100px; background: red;"
             width: 100px;  // 属性名: 属性值;
    
        width: 100px;   // 宽度为100像素
        height: 100px;  // 高度为100像素
    +   background: red;// 背景为红色
    ————————————————————————————————————
    style="width: 100px; height: 100px; background: red;"
    
    • Javascript 脚本语言【智能化】
      // 点击之后要做的事情      
      onclick="this.style.width='800px';"
    
      this.style.width='800px'; // 自己(this) 的(.) 样式(style) 的(.) 宽度(width)  = '800像素'
    
    ![](http:https://img.haomeiwen.com/i1801379/93337a73fba0e270.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

    三、常用标签

    • 注释方式
      <!-- 1、这是注释的用法 -->
    
    • 标题
      <h#> 标题内容 </h#>  [其中#是1~6]
    
    • 段落
      <p> 段落文本内容(段落与段落之间有间距) </p>
    
    • 文本节点
      <span> 文本结点 </span>
    
    • 换行
      语法: <br />
      备注: 换行是一个空标记,是强制换行
    
    • img图片
       // src: 图片路径(网络图片url/本地图片path)
    
    • 文本输入框
     // type: 文本类型
     // placeholder: 提示文本
     // value: 输入框中内容
    <input type="text" placeholder="请输入账号" value="zhangsan" />
    
    • 密码输入框
     // type: 密码类型
     // placeholder: 提示文本
     // value: 输入框中内容
      <input type="password" placeholder="请输入密码" />
    
    • 按钮
    // type: 按钮类型
    // value: 按钮名称
    <input type="button" value="登陆" />
    
    • 超链接
    // href='链接地址'
    <a href="http://www.baidu.com"> 百度一下 </a> 
    <a href="03-样式表.html"> 样式表 </a> 
    
    • 文档区域(网页结构布局)
      <div></div>
    

    四、样式表写法

    • 内联样式表
      <img style="属性1:值1; 属性2:值2; 属性3:值3;……”/>
    
    • 内部样式表
    <head>
      // 内部样式表
      <style type="text/css"> 
        div{
          background:purple;
        }
      </style>
    </head>
    
    <body>
      // ...
    </body>
    
    • 外部样式表
    <head>
      // 外部样式表(即在另外一个文件 *.css)
      <link href=“样式表文件路径” rel="stylesheet" />
    </head>
    
    <body>
      // ...
    </body>
    

    五、选择器

    • 类型选择符(标签选择器)
      语法: 标签名称 {属性:属性值;}
      例如: div{width:30px;}
    
    • 类选择符(class选择器) [可以同名]
      语法: .class名{属性:属性值;}
      例如: 
        .top{ width: 300px; }
        <div class="top"></div>
    
    • ID选择符(id选择器)
      语法: #id名{属性:属性值;}
      例如: 
        #box{ height: 300px }
        <div id=“box”></div>
      注意: 整个文档中,id名必须是唯一标识
    
    • 包含选择符(后代选择器)
      语法: 选择符1  选择符2{属性:属性值;}
      例如: 
        .header .left{ background: red; }
        <div class=“header”>
          <p class=“left”> 啦啦啦 </p>
        </div>
    
    • 通配符
      语法: *{属性:属性值;}
      说明: 通配选择符的写法是“*”,其含义就是所有元素;表示该样式适用所有网页元素;
    
    • 伪类选择符
      语法: 元素:hover{ 属性: 属性值; }          
      说明: 鼠标移入
    

    六、CSS核心属性

    • width: 宽度
      width: 100px;
    
    • height: 高度
      height: 200px;
    
    • background
    background-color: 背景颜色
      background-color: purple;
    background-image: 背景图片
      background-image:url(背景图片的路径及全称);
    background-repeat: 背景图片平铺
      background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x/repeat-y
    background-size: 背景图片大小 
      background-size: 宽度 高度;
      例如: background-size: 100% 100%;
    background-position: 背景位置
      background-position:left/center/right/数值  top/center/bottom/数值;   
    background: 背景属性的缩写
      background:url(背景图片的路径及全称) no-repeat center top;
    
    • color: 文本颜色
      color: black;
    
    • font-size: 字体大小(默认是16px)
      font-size: 13px;
    
    • text-align: 水平对齐方式
      {text-align:left/right/center/justify;}
       justify: 实现两端对齐文本效果(可以使文本两端都对齐;在两端对齐文本中,文本行的左右两端都放在父元素的边界上,然后调整单词和字母间的间隔,使各行的长度恰好相等);
    
    • line-height: 行高
      line-height: 30px;
      备注: 单行文本等于容器高时,文本垂直居中;
    
    • text-decoration: 文本属性
      text-decoration: none没有修饰符/underline添加下划线/overline添加上划线/line-through删除线
      备注: a标签比较常用
    
    • border: 边框属性
    简写:
        border: 线型(solid/dashed/dotted/double)  粗细(数值+单位)  颜色
        例如: border: 3px solid red;
    
        border-width 边框的粗细
        border-style 边框的线型
        border-color     边框的颜色
        solid:实线,dashed:虚线,dotted:点状线,double:双线
    
    • margin:边距(一般用于调整盒子位置)
      边界: margin,在元素外边的空白区域,被称之为边距;
       margin-left: 左边界 / margin-right: 右边界
       margin-top: 上边界 / margin-bottom: 下边界
       属性值的4种方式:
       四个值:上 右 下 左
       三个值:上 左右 下
       二个值:上下 左右   【margin: 0 auto; 即表示上下边距为0,左右边距为自动】
       一个值:四个方向 margin:2px; 定义元素四边边界为2px
    
    • padding: 填充(一般用于调整盒子内容位置)
      填充: padding,在设定页面中一个元素内容到元素的边缘(边框)之间的距离,也称之为补白;
      用法:
        > 用来调整内容在容器中的位置关系;
        > 用来调整子元素在父元素中的位置关系;
          注: padding属性需要添加在父元素上;
        > padding值是额外加载元素原有大小之上的,如果想要保证元素大小不变,即元素宽高上减去添加的padding属性值;
       说明:可单独设置一方向填充,如:padding-top:10px; padding-right:10px;padding-bottom:10px;padding-left:10px;
         四个值:上 右 下 左 {padding:10px 20px 30px 40px;}
            注: 顺时针方向
         三个值:上 左右 下 {padding:10px 20px 30px;}
         二个值:上下 左右 {padding:10px 20px;}
         一个值:四个方向 padding:2px; 定义元素四周填充为2px
    
    • float: 浮动属性
     语法: 
        float:none/left/right;
     说明:
        float:定义网页中其它文本如何环绕该元素
        left:元素活动浮动在文本左面
        right:元素浮动在右面
        none:默认值,不浮动。
     备注:
        浮动框可以向左或右边移动,直到它的边缘碰到包含边框或另外一个浮动框的边框为止;
        浮动框是脱离了普通的文档流;
    
    • border-radius圆角
      语法: 
        border-radius: 圆角半径
    
      // 圆角半径为20px
      border-radius: 20px;
    
    • box-shadow阴影
      语法: 
        box-shadow: h-shadow v-shadow blur color;
        h-shadow: 水平阴影的位置。允许负值。
        v-shadow: 垂直阴影的位置。允许负值。
        blur: 模糊距离。
        color: 阴影的颜色。
    
      box-shadow: 5px 5px 10px black;
    
    • 音频
      <!--audio:音频  src:文件链接  autoplay:自动播放-->
       <audio src="http://o9vplcp9o.bkt.clouddn.com/music.mp3" autoplay="autoplay" controls></audio>
    
    • 视频
      <!--video:视频  src:文件链接  autoplay:自动播放-->
       <video src="http://www.html5videoplayer.net/videos/madagascar3.mp4" controls="controls" autoplay="autoplay">
    
    • 内嵌网页
      <!--src:内嵌的网页-->
      <iframe src="http://www.runoob.com"></iframe>
    

    七、案例 --- 照片墙

    • transition: 过度效果
      /* transition: 过度效果;
        transition-property: 过渡属性(默认值为all)
        transition-duration: 过渡持续时间(默认值为0s)
        transiton-timing-function: 过渡函数(默认值为ease函数)
        transition-delay: 过渡延迟时间(默认值为0s)
      */
      transition: all 5s;  // 所有属性,过渡效果持续时间5秒
    
    • transform: 形变
      /* transform: 形变 
        该属性允许我们对元素进行旋转、缩放、移动;
        translateX: 水平方向移动
        translateY: 垂直方向移动
        rotate: 旋转
        scale: 缩放   
      */
      transform: rotate(-5deg) scale(1.2);  // 逆时针旋转5°,放大1.2倍
    
    • 图片参考


      照片墙

    position: 定位
    z-index: 层级

    相关文章

      网友评论

        本文标题:02-html&css基础

        本文链接:https://www.haomeiwen.com/subject/wpavlxtx.html