JavaWeb|JavaWeb学习——CSS css|javaweb|CSS

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

层叠：多个样式可以作用在同一个html元素上，同时生效

2.CSS的优点

相对于html，功能更加强大
将内容展示和样式控制分离，降低了耦合度
使分工协作更加容易
CSS的使用提高了开发效率

3.CSS的使用

CSS需与html结合使用

内联样式（不常用）
- 在标签内使用style属性指定css代码
  
  如：hello css
内部样式（常用）
- 在head标签内，定义style标签，style标签的标签体内容就是css代码
如： > div{ color:blue; } hello css
外部样式（常用）
1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
/*a.css文件*/ div{ color:green; }

> @import "css/a.css"; hello css hello css
- 作用范围：外部样式>内部样式>内联样式
CSS语法：
- 格式：
  - 选择器{ 属性名1:属性值1; 属性名2:属性值2; ... }
  - 选择器:筛选具有相似特征的元素
  - 注意：每一对属性需要使用；隔开，最后一对属性可以不加；
选择器：筛选具体相似特征的元素
- 分类：
  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：鼠标悬浮状态
属性:
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
案例：注册页面示例：

文章图片

分析：
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 用户名密码 Email 姓名手机号性别男女出生日期验证码文章图片已有账号？立即登录

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