字体样式-背景样式
Posted alexephor
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字体样式-背景样式相关的知识，希望对你有一定的参考价值。
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; width: 200px; } a { color: #333333; height: 40px; text-decoration: none; /*text-indent: 2px; 首行缩进2元素*/ /*单行文字垂直居中 行高 上空隙和下空隙把文字挤到中间去了*/ line-height: 40px; } .setBlock { display: block; height: 20px; width: 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 { width: 100px; height: 50px; } div { height: 100px; width: 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>
以上是关于字体样式-背景样式的主要内容，如果未能解决你的问题，请参考以下文章