font
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
/*font-style: italic;
font-weight: bold;
font-size: 36px;
font-family: "微软雅黑";*/
font: italic bold 36px "微软雅黑";
/*
a.顺序font-style weight size family
b.font-size font-family
*/
}
</style>
</head>
<body>
<span>煞笔</span>
</body>
</html>
index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" /> />
<style>
/*input 标签选择器 <form>
<input style="text-indent: 17px; "/>
</form> */
input{
text-indent: 17px;
}
</style>
</head>
<body>
<!--width 用于块级元素
text-align:center:
CSS样式属性 css样式属性值 css声明
样式属性有空格 则必须用单引号或双引号引起来
cursor: pointer手
-->
<!--CSS定义位置
1.style标记属性
2.style 标记中
3.css文件 用link标签引入HTML内
-->
<div style="text-align: center;border: 2px dotted red;font-family: 'palace script mt';">what</div>
<form>
<input style="text-indent: 17px; "/>
</form>
<div style="border: 1px solid black;width: 80px;text-align: center;cursor: pointer;">登录</div>
<a href=""http://www.baidu.com">百度</a>
</body>
</html>
常用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
display: block;
border: 1px solid black;
color;red;
}
#login{
border: 1px solid red;
width:100px;
height:33px;
text-align:center;
font-size;12px
background-color:blue;
cursor:pointer;
}
</style>
</head>
<body>
<p style="letter-spacing:12px;">郑州大学 河南工业大学</p>
<span>河南工业大学</span>
<a href="http://www.baidu.com">baidu</a>
<div style="display:inline">zhengzhou</div>
<div id="login">登录</div>
</body>
</html>
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*标签选择器*/
span{
background-color: red;
}
/*类选择器*/
.text-center{text-align: center;
}
/*id选择器*/
#indent{text-indent: 20px;
}
</style>
</head>
<body><!--选择器是浏览器过滤标签的一个匹配符
-->
<span>郑州</span>
<span>河南</span>
<div class="text-center">郑州大学</div>
<p class="text-center">河南工业大学</p>
<!--id标记属性值不能重复-->
<input id="indent" />
<input />
</body>
</html>
扫一扫
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
