day04-简单的CSS属性

作者: 我是一只菜鳥 | 来源:发表于2018-08-16 20:25 被阅读0次

day04-简单的CSS属性
day24jingdong
京东登录页面
CSS之Position详解.md
Vue-基础-04-重点
day24-京东登录
深入理解CSS过渡属性transition
CSS之过渡transition
HTML标签类型
css样式入门书目录

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
            }
            
            /***********背景相关****************/
            #d1{
                height: 400px;
                
                /*1.背景图
                * 如果背景图大于盒子大小，背景图能显示多少就显示多少
                * 如果背景图小于盒子大小，背景图就会平铺（重复显示）
                */
                background-image: url(../day01-html/img/lufei.jpg);
                
                /*2.设置是否平铺*/
                background-repeat: no-repeat;
                
                /*3.设置背景图的位置*/
                /*background-position:x y;
                 x: left/center/right/坐标值
                 y:top/center/bottom/坐标值
                 */
                background-position: center bottom;
                
                /*4.同时设置*/
                /*background: 图片地址  是否平铺  x y (背景颜色);*/
                
            }
            
            
            /***********列表****************/
            li{
                float: left;
                margin-left: 20px;
            }
            
            ul{
                /*1.设置符号样式
                 * disc(实心圆)、circle(空心圆)、square(实心方块)、none(去掉样式) 
                 */
                list-style-type: none;
                
                /*2.设置图片的符号*/
                margin: 50px;
                list-style-image: url(img/icon.ico);
                
                background-color: red;
                /*3.设置符号的位置*/
                list-style-position: outside;
                
            }
            
            
            /***********文字相关****************/
            p{
                
                /*1.文字大小*/
                font-size: 24px;
                
                /*2.文字颜色*/
                color: blue;
                
                /*3.设置字体名*/
                font-family: "微软雅黑";
                
                /*4.设置字体粗细*/
                /*100-900*/
                font-weight: 500;
                
                /*5.字体倾斜*/
                font-style: italic;
                
                /*6.内容的对齐方式*/
                /*center，left，right*/
                text-align: center;
                
                background-color: yellow;
                /*7.设置行高*/
                /*文字一行的高度（当文字只有一行的时候设置行高和标签高度一样，可以让文字居中）*/
                height: 500px;
                line-height: 50px;
                
                /*8.文字修饰*/
                /*
                 * none:去掉文字修饰
                 * underline添加下划线
                 * line-throught:添加删除线 
                 */
                text-decoration: line-through;
                
                /*9.首行缩进: 单位时em */
                /*text-indent: 4em;*/
                
                /*10.字间距*/
                letter-spacing: 5px;
                
                
            }
        </style>
        
    </head>
    <body>
        
        <div id="d1">
            
        </div>
        
        <ul>
            <li>Python</li>
            <li>H5</li>
            <li>Java</li>
        </ul>
        
        
        <p>
            萨拉的嘿呦<br />莎拉的嘿<br />阿文愤怒的v啊
        </p>
        
    </body>
</html>