本文介绍了CSS的基础用法，包括在HTML中直接添加样式、通过`<style>`标签内部引用和外部链接CSS文件。详细讲解了各种选择器，如基础选择器、派生选择器和伪类选择器。此外，还涵盖了常见的CSS样式，如文本、字体、背景、浮动、盒子模型等，特别是盒模型的属性，如margin、padding、display和border-radius。
CSS（美化页面）
css的使用
- 标签中添加style属性
<body>
<!-- 1.内嵌式, 只对当前标签有效 -->
<div style="background-color: darkgray">div1</div>
<div >div2</div>
</body>
- head中添加style标签
<head>
<!-- 2.内联式, 只对当前文件有效 -->
<style>
div {
color: red;
}
</style>
</head>
- link引入外部css文件
/* 这个css文件, 可以被重复使用 */
div {
font-size: 20pt;
}
<!-- 3.外联式, 引入css文件 -->
<link rel="stylesheet" href="css/mystyle.css"/>
css选择器
- 基础选择器: id[#id] 类[.class] 元素[element] 组合[,]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
/* 1.让所有的div元素, 设置背景颜色为灰色 */
/* 元素选择器:标签名 */
div {
background-color: gray;
}
/* 2.设置div2字体颜色为红色 */
/* id选择器: #id */
#div2 {
color: red;
background-color: green;
}
/* 3.设置div1和span1字体大小为25pt */
/* 类选择器: .class */
.c1 {
font-size: 25pt;
}
/* 4.设置div1和span1和div2有边框 */
/* 组合选择器 */
.c1, #div2 {
border: 1px solid red;
}
/* 所有元素 */
* {
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1">div1</div>
<div id="div2">div2</div>
<div>div3</div>
<
最低0.47元/天 解锁文章
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
