CSS

概念：
- 页面美化和布局控制
- Cascading Style Sheets 层叠样式表
  - 层叠：多个样式可以作用在同一个html的元素上，同时生效
好处：
- 功能强大
- 将内容展示和样式控制分离
  - 降低耦合度，解耦
  - 让分工协作更容易
  - 提高开发效率
CSS的使用： CSS与html结合方式
- 内联样式
  - 在标签内使用style属性指定css代码
  - 如：< div style=“color: red;”>hell0 world< /div>
- 内部样式
  - 在head标签内，定义style标签，style标签的标签体内容就是css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>hello world</div>
</body>
</html>

- 外部样式
  - 定义css资源文件
  - 在head标签内，定义link标签，引入外部的资源文件
  - html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
    <div>hello world</div>
</body>
</html>

css文件：

div{
    color: green;
}

- 注意：
  - 这三种方式，css作用范围越来越大
  - 第一种不太常用，后期常用第二种，第三种
  - 第三种可以写为：（在head标签里面写）
    < style>
    @import “css/a.css”
    < /style>
CSS语法：
- 格式：
  选择器 {
  属性名1：属性值1；
  属性名2：属性值2；
  …
  }
- 选择器：筛选具有相似特征的元素
- 注意：每一对属性需要用分号;隔开，最后一对属性可以不加分号；
选择器： 筛选具有相似特征的元素
- 基础选择器：
  - id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
    语法：#id属性值{ }
  - 元素选择器：选择具有相同标签名称的元素
    语法：标签名称{ }
    注意：id选择器优先级高于元素选择器
  - 类选择器：选择具有相同的class属性值的元素
    语法：.class属性值{ }
    注意：类选择器优先级高于元素选择器
- 扩展选择器：
  - 选择所有元素：
    语法：*{ }
  - 并集选择器：
    语法：选择器1，选择器2{ }
  - 子选择器：筛选选择器1元素下的选择器2元素
    语法：选择器1 选择器2{ }
  - 父选择器：筛选选择器2的父元素选择器1
    语法：选择器1>选择器2{ }
  - 属性选择器：选择元素名称，属性名=属性值的元素
    语法：元素名称 [ 属性名=“属性值” ]{ }
  - 伪类选择器：选择一些元素具有的状态
    - 语法：元素：状态{ }
    - 如：< a>
      - link：初始化的状态
      - visited：被访问过的状态
      - active：正在访问的状态
      - hover：鼠标悬浮的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: green;
        }
        .cls1{
            color: blue;
        }

        div p{
            color: pink;
        }

        div>p{
            border: 1px solid;
        }

        input[type='text']{
            border: 5px solid;
        }

        a:link{
            color: pink;
        }

        a:hover{
            color: green;
        }

        a:active{
            color: yellow;
        }

        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1">hello world</div>
    <div>史迪仔仔仔</div>
    <p class="cls1">戴小叮当</p>

    <div>
        <p>阿伟</p>
    </div>
    <p>阿伟</p>

    <input type="text">
    <input type="password"><br><br><br>

    <a href="#">阿伟</a>
</body>
</html>

在这里插入图片描述

属性：
- 字体，文本
  - font-size：字体大小
  - color：文本颜色
  - text-align：对齐方式
  - line-height：行高
- 背景
  - background：
- 边框
  - border：设置边框，复合属性
- 尺寸
  - width：宽度
  - height：高度
- 盒子模型： 控制布局
  - margin：外边距
  - padding：内边距
    - 默认情况下，内边距会影响整个盒子的大小
    - box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小
  - float：浮动
    - left
    - right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <style>


        div{
            border: 1px solid red;
            width: 100px;
        }
        .div1{
            width: 100px;
            height: 100px;
            /*margin: 50px;*/
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            box-sizing: border-box;
        }

        .div3{
            float: left;
        }
        
        .div4{
            float: left;
        }

        .div5{
            float: left;
        }
    </style>
</head>
<body>

    <div class="div2">
        <div class="div1"></div>
    </div>

    <div class="div3">aaaa</div>
    <div class="div4">bbbb</div>
    <div class="div5">cccc</div>
</body>
</html>

在这里插入图片描述

Lemon Love

发布了32 篇原创文章 · 获赞 12 · 访问量 1357

私信关注

JavaWeb学习笔记（三）CSS

CSS

猜你喜欢