zoukankan      html  css  js  c++  java
  • 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

        

      

      

      

  • 相关阅读:
    Domain Logic approaches
    Load data local infile 实验报告
    eclipse导入Maven项目
    MYSQL数据库导入数据时出现乱码的解决办法
    mysql创建用户并分配权限
    CDI Features
    Java Design Patterr
    关联tomcat源代码
    Spring AOP Capabilities and Goals
    CDI FEATURES
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/12978458.html
Copyright © 2011-2022 走看看