HTML+CSS入门 CSS新增UI样式-职坐标

HTML+CSS入门 CSS新增UI样式

沉沙 2018-10-09 来源：阅读 1939 评论 0

摘要：本篇教程介绍了HTML+CSS入门 CSS新增UI样式，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 CSS新增UI样式，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

一、文本新增样式

　　opacity 不透明度

        h1{
                margin: 100px auto;
                opacity: 0.5;
            }
        </style>
    </head>

    <body>
        <h1>中山大学</h1>
    </body>

效果

　　rgba透明度（选中的就透明）一般应用在背景透明，文字不透明。是rgb的一个拓展，a的值在（0,1）之间，就是针对前面的颜色的一个透明度/不透明度的描述.

　　

　　h1{
            margin: 100px auto;
            color: rgba(255, 0, 0, 0.8);文字的（255,0,0）颜色的不透明度为0.8
            background-color: rgb(1,1,1);
        }
    </style>
    </head>
    <body>
        <h1>中山大学</h1>
    </body>

　　text-shadow:文字阴影，可以多层，阴影值之间可以用逗号隔开。前两个设置是偏移量，后面是模糊程度。
　　实战：做一个浮雕文字和文字模糊的效果
　　浮雕文字：

        h1{
        margin: 200px auto;
        color: white;
        text-shadow: black 1px 1px 10px;

    }
    </head>
    <body>
        <h1>中山大学</h1>
    </body>

效果：

文字模糊（悬浮在文字上面就出现模糊）：

    h1{
        text-align: center;
        color: black;
    }
    h1:hover{
        color: white;
        text-shadow: black 1px 1px 100px;
    }
    </style>
    </head>
    <body>
        <h1>中山大学</h1>
    </body>

效果前后：

　　文字描边：

　　　　简介：CSS text-stroke属性的语法并不复杂，和border，background属性类似，其实是若干个CSS属性合并后的名称写法，不过仅仅是下面这两个CSS属性合体：text-stroke-width和text-stroke-color，也就是描边的宽度和描边的颜色，和border不同，对于text-stroke属性，我们无法指定描边的类型，只能是实线描边，不支持点线或者虚线，也无法指定描边是外描边还是内描边还是居中描边。

具体操作实现的代码如下：

        div{
                font-size: 50px;
                text-align: center;
                margin: 100px auto;
                -webkit-text-stroke: 2px pink;
            }

        </style>
    </head>
    <body>
        <div >
            中山大学
        </div>

效果：

　　文字排版　　

　　direction：控制文字的方向，一定要配合unicode-bid:bidi-override;来使用。

            div{
            width: 200px;
            height: 200px;
            margin: 0px auto;
            border: 1px solid;
            direction: rtl;

        }
        </style>
    　　</head>
   　　 <body>
    　　<div >
        　　中山大学
   　　 </div>

　　溢出省略号

1、首先多余的数据不让它进行换行

(white-space: nowrap;
overflow: hidden;)

2、再使他出现省略号（text-overflow: ellipsis;）
text-overflow ：确定如何向用户发出未显示的溢出内容信号
它可以被剪切
显示一个省略号（‘.....’）

    div{
                width: 200px;
                height: 200px;
                margin: 0px auto;
                border: 1px solid;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        </style>
    </head>
    <body>
        <div >
            中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学
        </div>
    </body>

效果：