CSS功能

css层叠样式表功能：

对网页进行美化特效
对网页进行布局
注意：CSS永远无法改变网页内容

<style></style>
<style>:样式，外观，内容

css代码语法格式.

Css公式：
标签名（选择器selector）{
属性名1：属性值1
属性名2：属性值2
…
属性名n：属性值n
}

a{
        text-decoration: none;
        color: lime;
        font-size: 14px;
      }

text-decoration: none; 去除文字的下划线
color: lime; 颜色设置成绿色
font-size: 14px; 文字大小设置

标签的第二个特性

1.快标签block：

Div：division区块分割，块标签的代表

特征：独霸一行（无论多少内容）
例：div，li，h1-6…
css特性：默认可以随意设置宽度和高度
块向内联转化的方法：float：left
2.行，内联标签inline：

Span：行，内联标签的代表

特征：无论多少个行标签，都会成行排列，只有当一行排不下时，才换行。
例：span，a，img，input（表单标签）
css特性：默认无法设置宽度/高度

实例：实现鼠标放在图片上时的缩放

<%--
  Created by IntelliJ IDEA.
  User: Adminisrator
  Date: 2020/7/27
  Time: 14:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        a{
            list-style: none;
        }
        li img{
            width: 200px;
            height: 112px;
            transition: 1s;
        }
        li{
            width: 300px;
            height: 120px;
            list-style: none;
            font-size: 14px;
            overflow: hidden;
        }
        li:hover{
            color: #23B8FF;
        }
        li:hover img{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="img/1234.png">
        </li>
        <li>年后</li>
    </ul>
</body>
</html>

**transition: 1s; **
Transition：过渡，标签从一种状态到另一种状态所用的时间，单位：S

2.CSS基础

CSS功能

css代码语法格式.

标签的第二个特性

实例：实现鼠标放在图片上时的缩放

猜你喜欢