zoukankan      html  css  js  c++  java
  • CSS:页面美化和布局控制

    1. 概念: Cascading Style Sheets 层叠样式表
    • 层叠:多个样式可以作用在同一个html的元素上,同时生效
    1. 好处:

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

      1. 内联样式

        • 在标签内使用style属性指定css代码
        • 如:
          hello css
      2. 内部样式

        • 在head标签内,定义style标签,style标签的标签体内容就是css代码

        • 如:

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

        1. 定义css资源文件。
        2. 在head标签内,定义link标签,引入外部的资源文件
        • 如:

          // a.css文件:
          	div{
          	    color:green;
          }
          <link rel="stylesheet" href="css/a.css">
          <div>hello css</div>
          <div>hello css</div>
          
      • 注意:

        • 1,2,3种方式 css作用范围越来越大
        • 1方式不常用,后期常用2,3
      • 3种格式可以写为:

        	<style>
                @import "css/a.css";
            </style>
        
    3. css语法:

      • 格式:
        选择器 {
        属性名1:属性值1;
        属性名2:属性值2;
        ...
        }
      • 选择器:筛选具有相似特征的元素
      • 注意:
        • 每一对属性需要使用;隔开,最后一对属性可以不加;
    4. 选择器:筛选具有相似特征的元素

      • 分类:
        1. 基础选择器
          1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
            • 语法:#id属性值{}
          2. 元素选择器:选择具有相同标签名称的元素
            • 语法: 标签名称{}
            • 注意:id选择器优先级高于元素选择器
          3. 类选择器:选择具有相同的class属性值的元素。
            • 语法:.class属性值{}
            • 注意:类选择器选择器优先级高于元素选择器
        2. 扩展选择器:
          1. 选择所有元素:

            • 语法: *{}
          2. 并集选择器:

            • 选择器1,选择器2{}
          3. 子选择器:筛选选择器1元素下的选择器2元素

            • 语法: 选择器1 选择器2{}
          4. 父选择器:筛选选择器2的父元素选择器1

            • 语法: 选择器1 > 选择器2{}
          5. 属性选择器:选择元素名称,属性名=属性值的元素

            • 语法: 元素名称[属性名="属性值"]{}
          6. 伪类选择器:选择一些元素具有的状态

            • 语法: 元素:状态{}
            • 如: <a>
              • 状态:
                • link:初始化的状态
                • visited:被访问过的状态
                • active:正在访问状态
                • hover:鼠标悬浮状态
    5. 属性

      1. 字体、文本
        • font-size:字体大小
        • color:文本颜色
        • text-align:对其方式
        • line-height:行高
      2. 背景
        • background:
      3. 边框
        • border:设置边框,符合属性
      4. 尺寸
        • width:宽度
        • height:高度
      5. 盒子模型:控制布局
        • margin:外边距

        • padding:内边距

          • 默认情况下内边距会影响整个盒子的大小
          • box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
        • float:浮动

          • left
          • right
  • 相关阅读:
    java+web+多级文件上传
    Java+web+上传文件夹
    java文件实现文件的上传和下载
    web文件夹上传
    js实现上传文件夹
    云中应用性能管理(APM)的下一步
    Cocoa 静态显示一个对话框
    Gradle 1.12用户指南翻译——第三十三章. PMD 插件
    LeetCode_Minimum Depth of Binary Tree
    Android控件ListView获取item中EditText值
  • 原文地址:https://www.cnblogs.com/tiantian152/p/14513333.html
Copyright © 2011-2022 走看看