• 005 HTML+CSS(Class027


    [A] div 标签和 span标签

        div: 盒子标签,也叫块标签,将区域划分为一个块

        span: 内联标签,用于对文本进行进行修饰

    [B] CSS基础语法

      格式{ 属性值1:值1;属性值2:值2;......}

         宽度

        height:高度

        background_color:背景色

        长度单位:

          1. px:像素

          2. %:百分比,即相比于其父元素的占比。 

    [C] CSS注释

      /* 注释内容 */

    [D] 内联样式与内部样式

      内联(行内,行间)样式

        在html标签上添加style属性来实现

      内部样式

        在<style>标签内添加的样式,即新建一个<style>标签,将需要的属性填写在内,可以重复调用

        【注】内部样式的有点,可以复用代码,符合W3C的标准,实现结构和样式的分开处理

    [E] 外部样式

      1. 通过引入一个单独的CSS文件实现样式的添加

      【实现方式】

          通过<link>标签引入外部资源,rel属性指定资源跟页面的关系,href属性指定资源的地址。

      <link>标签的属性:

      

      示例代码:
      

    /* 该段代码写在 .CSS的文件中,以供html文件调用 */
    div{
         200px;
        height: 150px;
        background-color: red;
    }
    

      html通过带哦用外部.CSS文件实现样式添加

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./importedCSS.CSS">    <!-- 此处引入外部写好的CSS样式表 -->
    </head>
    <body>
        <div>this is box1</div>
        <div>this is box2</div>
    </body>
    </html>
    

      

       2. @import引入

        【注】问题多,不建议使用

    [F] CSS中的颜色表示法

      1. 单词变表示法

        red,black,lightblue,.......

      2. 十六进制表示法

        从  #000000  (黑色)——>到 #ffffff  (白色)

      3. rgb三原色表示法

        rgb(255,255,255),每个参数从0-255.

      【注】网页中颜色的获取方法

          1. FeHelper工具,可自行下载

          2. PS操作取色

    [G] CSS背景样式

      background-color: 背景颜色

      background-image: 背景图片

        可选值:

          url(图片地址): 通过地址调用图片    

      background-repeat: 背景图片的平铺方式

        默认背景图片水平垂直铺满背景

        可选值:
          repeat:只在水平方向进行平铺

          repeat-x:只在竖直方向进行平铺

          repeat-y:同时在两个方向上进行平铺,默该值为认值

          no-repeat:只铺一张图,不进行重复

      background-position: 背景图片的位置

        可选值:数值  /  单词  /  百分比

          x,y:向右便宜x个像素,向下移动 y 个像素

          right,bottom:右下角

          center,bottom:中间下部

          %,%:移动的百分比,【注】若添加了滚动方式,则%表示方式

      background-attachment: 背景图随滚动条的移动方式

        可选值:

          scroll:默认值,背景位置时按照当前元素进行偏移的

            【效果】:图片和容器绑定,当滚动条滚动时,背景图,容器随着页面一起滚动

          fixed:背景位置时按照浏览器进行偏移的

            【效果】:当滚动条移动时,容器跟随页面滚动,但是背景图位置不变

    [H] CSS边框样式

      border-style:边框样式

        solid:实线

        dashed:虚线

        dotted:点线

      border- 边框大小

        由像素 px 值定义

      border-color:边框颜色

        三种颜色定义方法

      【注】也可针对某一条边单独设置,此时需要将 border 改成 border-right即可

         如:border-right-style

        

      

      

      

  • 相关阅读:
    tensorflow打印输出张量以及tf.one_hot()函数简介
    Windows10下Jupyter Notebook 使用虚拟环境
    图解Windows10下如何更换Jupyter Notebook 内核Python版本(切换原始的python环境)
    听说你在找工作?这里有很多招聘信息~
    数据集难找?GAN生成你想要的数据!!!
    妈妈再也不担心我没壁纸了!
    你的爬虫ip又被封了?教你一招
    飞鸽内网穿透
    第九届全国生物信息学与系统生物学学术大会
    SAP UI5 Routing 路由介绍
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/12978458.html
Copyright © 2020-2023  润新知