『CSS练习』常用的CSS字段

189 阅读1分钟

常用的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>

在这里插入图片描述