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