【CSS练习】常用的CSS字段

掌握CSS基础：样式控制的艺术

最新推荐文章于 2024-02-16 10:17:34 发布

原创最新推荐文章于 2024-02-16 10:17:34 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #html

HTML+CSS基础知识专栏收录该内容

6 篇文章

订阅专栏

本文概述了CSS的基础知识，包括颜色、背景、字体等样式设置，以及内联、内部和外部样式的应用实例。了解如何利用CSS轻松管理网页布局和交互效果。

常用的CSS字段

CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。
注意，CSS 的选择器区分大小写，因此要谨慎使用大写。
CSS 早已被所有主流浏览器采用，它允许你轻松控制以下样式：

颜色 color
背景 background
字体 font
位置 position
显示 display
边框 border
内边距 padding
外边距 margin
行高 line-height
装饰 text-decoration
过渡 transtion
变化 transform
动画 animation

注：要是觉得文章写得不错，记得留个赞哦！

使用 CSS 样式主要有三种方式：

内联样式–你可以直接在 HTML 元素里使用style属性。

<p style="color: red; font-size: 50px;">时间煮雨</p>

内部样式–你可以在style标签里面声明样式规则。

<head>
	<meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS练习</title>
    <style>
        /* 默认情况下 */
        a:link {
            color:yellow;
        }
        /* 点击之后 */
        a:visited {
            color:red;
        }
        /* 鼠标放上去时 */
        a:hover {
            color: green;
        }
        /* 点击事件发生时 */
        a:active {
            color: black;
        }
        /* 获取焦点时 */
        input:focus {
            background: blueviolet;
            /* 清除点击后获取的边框 */
            outline: none;
        }
    </style>
</head>

外部样式–你可以创建一个.css文件，然后在文件中编写样式规则，最后在文档中引用该文件。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS练习</title>
  <!-- 插入css文件 -->
  <link rel="stylesheet" href="3.css">
</head>