2023-01-01_css常用属性
2022-12-31 本文已影响0人
微笑碧落
1. 文本相关
<div class="text">文本配置属性 HelloWorld</div>
.text {
text-indent: 100px; //缩进
text-align: right; //对齐
word-spacing: 20px; //单词间隔
letter-spacing: 10px;//字母间隔（一个汉子作为一个字母）
text-transform: uppercase;
text-decoration: underline;//下划线
}
文本
2. 边框相关
<div class="border">边框</div>
.border {
border-style: solid;
border-width: 4px;
border-color: red;
}
边框
3. 盒子模型
image.png
<span class="sp1">sp1</span>
<span class="sp2">sp2</span>
<span class="sp3">sp3</span>
<span class="sp4">sp4</span>
.sp1 {
background-color: red;
color: white;
padding-right: 30px;
}
.sp2 {
background-color: blue;
color: white;
padding-left: 30px;
}
.sp3 {
background-color: green;
color: white;
margin-left: 30px;
}
.sp4 {
background-color: indigo;
color: white;
margin-right: 30px;
}
内边距和外边距
4. 内嵌样式表
- 优先级更高
- 更直观
- 如果样式比较复杂，这种方式会显得不好阅读
- 示例展示了onclick属性
- 自定义的函数作用：点击按钮，修改dom元素的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
</head>
<body>
<div style="text-align: center;">
<h1 id="h1" style="font-size: 40px;">数值：0</h1>
<button style="font-size: 30px; background-color: burlywood;" onclick="clickFunc()">点击</button>
</div>
<script>
var count = 0;
function clickFunc(){
console.log(count);
document.getElementById("h1").innerHTML = ++count
}
</script>
</body>
</html>
image.png
