JavaWeb|JavaWeb学习——CSS

JavaWeb学习——CSS 1.概念 Cascading Style Sheets 层叠样式表 简称 CSS

  • 层叠:多个样式可以作用在同一个html元素上,同时生效
2.CSS的优点
  1. 相对于html,功能更加强大
  2. 将内容展示和样式控制分离,降低了耦合度
  3. 使分工协作更加容易
  4. CSS的使用提高了开发效率
3.CSS的使用
  • CSS需与html结合使用
  1. 内联样式(不常用)
    • 在标签内使用style属性指定css代码
      如:
      hello css

  2. 内部样式(常用)
    • 在head标签内,定义style标签,style标签的标签体内容就是css代码
    如: > div{ color:blue; }
    hello css

  3. 外部样式(常用)
    1. 定义css资源文件。
    2. 在head标签内,定义link标签,引入外部的资源文件
    /*a.css文件*/ div{ color:green; }

    > @import "css/a.css";
    hello css
    hello css

    • 作用范围: 外部样式>内部样式>内联样式
  4. CSS语法:
    • 格式:
      • 选择器{ 属性名1:属性值1; 属性名2:属性值2; ... }

      • 选择器:筛选具有相似特征的元素
      • 注意: 每一对属性需要使用 ;隔开,最后一对属性可以不加;
  5. 选择器:筛选具体相似特征的元素
    • 分类:
      1. 基础选择器:
        1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
          • 语法:#id属性值{}
        2. 元素选择器:选择具有相同标签名称的元素
          • 语法: 标签名称{}
          • 注意:id选择器优先级高于元素选择器
        3. 类选择器:选择具有相同的class属性值的元素。
          • 语法:.class属性值{}
          • 注意:类选择器选择器优先级高于元素选择器
        4. 优先级:id选择器>类选择器>元素选择器
      2. 扩展选择器:
        1. 选择所有元素:
          • 语法: *{}
        2. 并集选择器:
          • 选择器1,选择器2{}
        3. 子选择器:筛选选择器1元素下的选择器2元素
          • 语法: 选择器1 选择器2{}
        4. 父选择器:筛选选择器2的父元素选择器1
          • 语法: 选择器1 > 选择器2{}
        5. 属性选择器:选择元素名称,属性名=属性值的元素
          • 语法: 元素名称[属性名=“属性值”]{}
        6. 伪类选择器:选择一些元素具有的状态
          • 语法: 元素:状态{}
          • 如: * 状态: * link:初始化的状态 * visited:被访问过的状态 * active:正在访问状态 * hover:鼠标悬浮状态

  6. 属性:
    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
    案例:注册页面 示例:
    JavaWeb|JavaWeb学习——CSS
    文章图片

分析:
1.将整张图分为五个部分
2.body为一部分,中间的矩形为一个div,矩形由左、中、右三部分div组成
3.用元素选择器选择body设置背景图,再为中间四个div分别设置不同的class名
4.用类选择器为四个div分别设置样式,矩形中的三个div用float属性来布局
5.在矩形中间的div中定义一个表单form,在表单下通过table来进行具体的布局设置
代码实现:
注册页面 - 锐客网 > *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: url("img/register_bg.png")center; padding-top: 25px; }.reg_layout{ width: 1200px; height: 800px; border: 15px solid gray; background: white; margin: auto; }.reg_left{ float: left; padding: 15px; } .reg_center{ float: left; padding-left:150px; padding-top: 30px; } .reg_right{ float: right; padding: 15px; } .reg_left p:first-child{ font-size: 25px; color: #ff9802; } .reg_left p:last-child{ font-size: 25px; color: gray; } .reg_right p{ font-size: 15px; } .reg_right p a{ color: pink; }.td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px ; }#username,#password,#name,#email,#phone,#checkcode{ width: 300px; height: 30px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius:5px; padding-left: 10px; }#checkcode{ width: 150px; }#img_check{ vertical-align: middle; }#reg_sub{ width: 100px; height: 50px; border:1px solid #ff9802; background: #ff9802; align-self: center; }
新用户注册
USER REGISTER
JavaWeb|JavaWeb学习——CSS
文章图片
已有账号?立即登录

4.总结 通过简单试验后得出的一般结论:选择器范围越小优先级越高
该文章只学习了部分CSS的知识更多内容可参考https://www.runoob.com/css/css-tutorial.html
【JavaWeb|JavaWeb学习——CSS】学习视频:https://www.bilibili.com/video/BV1qv4y1o79t

    推荐阅读