字体样式-背景样式

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>

字体样式-背景样式

猜你喜欢