day23文本属性/表格/表单的.CSS

最新推荐文章于 2023-10-09 11:12:55 发布

林胖胖哒

最新推荐文章于 2023-10-09 11:12:55 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/weixin_44818729/article/details/94592719

版权

一.文本属性

1.letter-spacing: 10px; 字间距10像素
2.width: 320px; 宽度320像素
1. height: 100px; 高度100像素
1. border: 5px dotted gray; 灰色点状边框
5.line-height: 100px; 上下行间距:100像素
6 text-align: center; 文本对齐方式:居中
7 margin: 10px auto; 外边距:10个像素
8 text-decoration: underline; 文本装饰:下划线
9 text-shadow: 2px 2px gray; 文本阴影效果:右移2px,下移2px
10 font-size: 400%; 字体大小:400
1. text-indent: 60px; 缩进段落的第一行60像素
  -12. block / inline-block 行级
  -13.display: none; 显示无
  -14.letter-spacing :字间距
  -15.text-align :文字对齐
  -16.text-transform:文字大小写转化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            @font-face {
                font-family: "FatDog";
                src: url('fonts/chunkfive.ttf');
            }

            body {
                width: 960px;
                margin: 0 auto;
            }
            .ms {
                letter-spacing: 10px;
                width: 320px;
                height: 100px;
                border: 5px dotted gray;
                line-height: 100px;
                text-align: center;
                margin: 10px auto;
                text-decoration: underline;
                text-shadow: 2px 2px gray;
                font-size: 400%;
            }
            .one {
                text-indent: 60px;
            }
            .two {
                text-indent: 40px;
            }
            .three {
                text-indent: 20px;
            }
            h3 {
                /* block / inline-block / none */
                /* display: none; */
                visibility: hidden;
                text-transform: uppercase;
                font: italic bolder 2cm/60px "FatDog";
                /* font-size: 2cm;
                font-family: "FatDog";
                font-stretch: condensed;
                font-style: oblique; */
            }
            .box {
                color: rgb(64, 128, 192);
                height: 220px;
                border: 4px double #00CC33;
                border-left-color: blue;
                border-right-color: red;
                border-radius: 10px 20px 40px 80px;
                width: 50%;
                margin: 50px auto;
                margin-top: 10px;
                text-align: center;
                background-color: #749ABE;
                background-image: url(images/bird.gif);
                /* background-repeat: no-repeat no-repeat;
                background-position: -25px -50px; */
            }
            .box p {
                background-color: white;
                width: 200px;
                height: 40px;
                line-height: 40px;
                margin: 10px auto;
            }
            #photo {
                border: 10px solid gold;
                border-radius: 60px 60px 60px 60px;
                /* border-image: url("images/dots.gif") 10 10 10 10 round; */
            }
            #icon {
                width: 100px;
                height: 100px;
                background: url(images/icons.jpg) no-repeat no-repeat -570px -280px;
                background-color: #00FFFF;
                /* background-image: url(images/icons.jpg);
                background-repeat: no-repeat no-repeat;
                background-position: -570px -280px; */
            }
            #python {
                width: 290px;
                height: 82px;
                background-image: url(images/python-logo.png);
                background-color: #009966;
            }
            /* body {
                background-image: url(images/bird.gif);
            } */
        </style>
    </head>
    <body>
        <div id="python"></div>
        <div id="icon"></div>
        <img id="photo" src="images/tim.png" width="100" height="100">
        <h3>Hello, world!</h3>
        <h1 class="ms">静夜思</h1>
        <hr>
        <div class="box">
            <p class="one">床前明月光</p>
            <p class="two">疑似地上霜</p>
            <p class="three">举头望明月</p>
            <p class="four">低头思故乡</p>
        </div>
    </body>
</html>

林胖胖哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day23文本属性/表格/表单的.CSS

一.文本属性1.letter-spacing: 10px; 字间距10像素2.width: 320px; 宽度320像素height: 100px; 高度100像素border: 5px dotted gray; 灰色点状边框5.line-height: 100px; 上下行间距:100像素6 text-ali...
复制链接

扫一扫