font字体/background系列操作
font-family、size、style、weight、以及复合写法font
p.ex1
{
font:italic arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/20px arial,sans-serif;
}
background-color、image、repeat、position、attachment以及background复合写法
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
自己演示效果包含块级元素和行内元素以及行内块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
font-family: 'Microsoft YaHei';
}
.strong {
font-family: "Times New Roman", Garuda, Serif;
font-size: 50px;
font-weight: 600;
font-style: italic;
}
span {
display: inline-block;
height: 100px;
200px;
}
a {
color: #333333;
height: 40px;
text-decoration: none;
/*text-indent: 2px; 首行缩进2元素*/
/*单行文字垂直居中 行高 上空隙和下空隙把文字挤到中间去了*/
line-height: 40px;
}
.setBlock {
display: block;
height: 20px;
100px;
}
.inline {
display: inline;
}
a:link {
color: #333333;
}
a:visited {
color: #00ff00;
}
a:hover {
color: #ff00ff;
}
a:active {
color: #0000ff;
}
input:focus {
color: red;
}
input {
100px;
height: 50px;
}
div {
height: 100px;
300px;
/*background-image: url("./background-img-repeat.png");*/
/*background-repeat: no-repeat;*/
/*background-color: blue;*/
/*!*background-position: center top;*!*/
/*!* x轴一定是20 y轴一定是50*!*/
/*background-position: 20px 50px;*/
/*!* 视差滚动 *!*/
/*background-attachment: scroll;*/
/*background: blue url("./background-img-repeat.png") no-repeat fixed 20px center;*/
/*背景色半透明状态 盒子里边的内容不会改变*/
background: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h2>望岳</h2>
<p>岱宗夫如何？齐鲁青未了。</p>
<p>造化钟神秀，阴阳割昏晓。</p>
<p>荡胸生曾层云，决眦入归鸟。</p>
<p class="strong">会当凌绝顶，一览众山小</p>
<a href="#">小猪佩奇</a>
<input type="text">
<input type="text">
<input type="text">
<p>块级元素:h1,p,div,ul,li,ol其中div是最典型的块元素，设置宽度和高度,外边距和内边距可以独自占用一行,容器元素</p>
<p>行内元素/内联元素:a,strong,b,em,i,span等 一行可以显示多个 不能直接设置高宽度 行内元素只能放文本或者其他的行内元素</p>
<p>注意:a标签里边可以放块级元素</p>
<p>行内块元素:img,input,td等</p>
<a href="#" class="setBlock">太白金星</a>
<div class="inline">太白金星</div>
<span>行内元素转行内块级元素</span>
<div>隐形的翅膀</div>
</body>
</html>