基本语法:
<style>
/* 选择器{样式} */
/* 给谁改样式{改什么样的样式} */
p{
color: red;
/* font-size是字体大小,px为像素 */
font-size: 20px;
}
画3个不同颜色盒子案例:
<style>
.box{
width: 100px;
height: 100px;
}
.red{
/* 背景颜色 */
background-color: red;
}
.green{
/* 背景颜色 */
background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
1.多类名使用
<!-- 类名间必须用空格隔开 -->
<div class="red green"></div>
2.ID选择器
用#表示,只允许1个人调用
<style>
#yellow{
color: yellow;
}
</style>
<div id="yellow">MJ</div>
文本属性:
<style>
#yellow{
/* 颜色:color */
color: rgb(80, 28, 28);
/* 对齐方式:text-align */
text-align: left;
/* 装饰文本:text-decoration ,underline下划线。overline上划线。line-through删除线。none取消线类型*/
text-decoration: underline;
/* 首行缩进:text-indent,用em相对单位 */
text-indent: 2em;
/* 行间距:line-height */
line-height: 2em;
}
</style>
外部样式表:
调试工具
Emment语法
1.快速生成HTML语法
快速格式化代码
后代选择器
子选择器
并集选择器
链接伪类选择器
基本使用:
<style>
/* a:link是未被访问 */
a:link {
color: black;
text-decoration: none;
}
/* a:visited是访问过的链接 */
a:visited {
color: yellow;
}
/* a:hover是鼠标经过后的链接 */
a:hover {
color: skyblue;
}
/* a:active是鼠标按下后未弹起的链接 */
a:active {
color: springgreen;
}
</style>
focus伪类选择器
<style>
input:focus {
background-color: skyblue;
}
</style>
<input type="text">
<input type="text">
<input type="text">
106