CSS快速入门

CSS:页面美化和布局控制
  1. 概念:页面美化和布局控制

    • 层叠:多个样式可以用作在同一个html的元素上,同时生效
  2. 好处:

    • 功能强大
    • 将内容展示和样式控制分离
      • 降低耦合度,解耦
      • 让分工协作更容易
      • 提高开发效率
  3. css的使用:css与html结合方式

    • 内联样式

      • 在标签内使用style属性指定css代码

      • <div style="color: red"> hello world</div>
    • 内部样式

      • 在head标签内,定义style标签,style标签内容就是css样式

      • <style> 
        div{        
            color: blue;    
        }
        </style>
        <div>hello css</div>
    • 外部样式

      1. 定义css资源文件

      2. 在head标签内,定义link标签,引入外部资源文件

      3. 如:

        test.css文件:

        div{
            color: green;
        }
        <link rel="stylesheet" href="css/test.css">
        <div>hello Java!</div>
      4. 注意:

        • 1,2,3种方式css作用范围越来越大

        • 1方式不常用,后期常用2,3

        • 第三种也可以写为

          <style>
          @import "css/test.css";
          </style>
  4. css语法:

    • 格式:

      选择器 {
          属性名1;属性值1;
          属性名2;属性值2;     
      }
    • 选择器:筛选具有相似特征的元素

    • 注意:

      • 每一对属性需要使用;隔开,最后一对属性可以不加;
  5. 选择器:筛选具有相似特征的元素

    • 分类:

      1. 基本选择器:

        • id选择器:选择具体的id属性值的元素

          • 语法:#id属性值{}

          • 如:

            <style>
                 #div1{        
                     color: red;    
            }    
                 #div2{        
                     color: blue;    
            }
            </style>
            <div id="div1">开鲁县</div>
            <div id="div2">通辽市</div>
        • 元素选择器:选择具有相同标签名称的元素

          • 语法:标签名称{}

            <style>
                 #div{        
                     color: red;    
            }    
            </style>
            <div id="div1">开鲁县</div>
            <div id="div2">通辽市</div>
        • 类选择器:具有相同class属性值得元素

          • 语法:.class属性值{}

            .cls{
                 color: cyan;
            }
            <div class="cls">China加油!</div>
          • 类选择器优先于元素选择器

      2. 扩展选择器:

        • 选择所有元素:
          • 语法:*{}
        • 并集选择器:
          • 语法:选择器1,选择器2{}
        • 子选择器:筛选选择器1下得选择器2
          • 语法:选择器1 选择器2{}
        • 父选择器:筛选选择器2的父选择器1
          • 语法:选择器1 > 选择器2
        • 属性选择器:选择元素名称,属性名=属性值的元素
          • 语法:元素名称[属性名=“属性值”]{}
        • 伪类选择器:选择一些元素具有的状态
          • 语法:元素:状态{}
          • 如:<\a>
            • 状态:
              • link:初始化的状态
              • visited:被访问过的状态
              • active:正在访问状态
              • hover:鼠标悬浮状态
  6. 属性

    1. 字体文本:

      • font-size:字体大小
      • color:文本颜色
      • text-align:对其方式
      • line-height:行高
    2. 背景

      • background:url
    3. 边框

      • border:设置边框
    4. 尺寸

      • width:宽度
      • height:高度
    5. 盒子模型

      • margin:外边距
      • padding:内边距
      • float:浮动
Last modification:July 22nd, 2020 at 10:34 pm
如果觉得我的文章对你有用,请随意赞赏