欢迎光临散文网 会员登陆 & 注册

千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频

2023-07-11 13:11 作者:bili_18753971506  | 我要投稿

 (一)文本类型css

    1.文字颜色  color:red/#000/rgb(0,0,0);

    2.字体大小  font-size:16px;

    3.文本水平对齐方式  text-align:left/center/right/justify(两端对齐);

    4.文本修饰  text-decoration:none(去掉下划线)/underline(下划线)/line-through(删除线);

    5.行高  line-height  第一行文本的中线到第二行文本中线的距离

      + 针对多行文本(最好字体大小一样)之间的上下间距,给行高实现(ps中测量:第一行文本的头部到第二行文字头部之间的距离)

      + 针对单行文本实现垂直居中效果,line-height:当前盒子的高度;

    6.加粗 font-weight:100-900;   500常规粗细,值越大字体越粗

    7.倾斜  font-style:italic/normal;

    8.首行缩进  text-indent:2em;  可以取负值


    (二)背景类型css

    1.背景颜色  background-color:red/#000/rgb(0,0,0);

    2.背景图片  background-image:url(路径);

    3.背景平铺  background-repeat:no-repeat(不平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺);

    4.背景定位  background-position:水平left/center/right/值 垂直top/center/bottom/值;

    5.背景固定  background-attachment:fixed;

    6.背景大小  background-size:cover;  覆盖



    (三)其他类型css

    1.宽度  width:200px;

    2.高度  height:200px;

    3.浮动属性  float:left/right/none;

      特点:给元素添加浮动之后,元素就飘了,就会对后方的元素产生影响

      作用:实现竖着的元素横着排列;

        + 需要所有的子元素都横着排列,就需要给所有的子元素都添加浮动,也要给父元素添加height。

    4.外边距 margin  自身距离外边的距离 分为四个方向 上top 下bottom 左left 右right

      左外边距 margin-left

      右外边距 margin-right

      上外边距 margin-top

      下外边距 margin-bottom


      margin使用口诀:谁要动就给谁添加margin


      margin-top的使用是有兼容bug

      问题描述:给子元素添加margin-top之后,导致整个父元素下移;

      问题解决:给父元素添加 overflow:hidden; (超出隐藏,BFC原因)


      margin:0 auto;  auto 自适应

      可以实现一个有宽度且宽度生效的大标签做水平居中

      .box{width:200px;margin:0 auto;}


    (一)大标签  特点:独占一行或者一块区域,竖着排列

    1.标题标签  <h1></h1>  ...  <h6></h6>

    2.段落标签  <p></p>

    3.表格标签 

      <table>

        <tr>

          <td></td>

        </tr>

      </table>

        重要的标签属性:

          + 边框  border="1"

          + 去掉单元格与单元格之间的默认间距  cellspacing="0"

          + 去掉单元格的内边距  cellpadding="0"

          + 宽度  width="200"

          + 高度  height="200"

          + 水平对齐方式  align="left/center/right"

          + 合并右边的单元格(合并列)  colspan="合并的个数"

          + 合并下边的单元格(合并行)  rowspan="合并的个数"

            - 单元格做了合并之后,一定要删除或者注释掉多余的单元格


    4.块标签  <div></div>

    5.列表标签  

      5.1无序列表

        <ul>

          <li></li>

        </ul>

      5.2有序列表

        <ol>

          <li></li>

        </ol>

      5.3自定义列表

        <dl>

          <dt></dt>

          <dd></dd>

        </dl>

    6.表单标签  <form action="路径" method="get/post"></form>

           

    (二)小标签  特点:挨着排列,且有默认间距

    1.文本节点标签  <span></span>

    2.加粗标签  <b></b>  <strong></strong>

    3.倾斜标签 <i></i>   <em></em>

    4.超链接标签  <a href="#" target="_blank"></a>


    (三)特殊标签

    1.图片标签  <img src="路径" alt="给用户提示用语" title="图片标题">

    2.文本类型输入框  <input type="text" name="名字" value="值" placeholder="给用户提示的">

    3.密码类型输入框  <input type="password" name="名字" value="值" placeholder="给用户提示的">

    4.提交按钮 <input type="submit" value="注册">

          <button>登录</button>

    5.重置按钮  <input type="reset" value="">

千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频的评论 (共 条)

分享到微博请遵守国家法律