• css文本属性和边框属性


    文本属性

    '''
    font-size: 10px;            字体大小
    
    text-align: center;         横向排列
    
    line-height: 200px;         文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
    
    vertical-align:-4px        设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效
    
    
    text-indent: 150px;         首行缩进
    letter-spacing: 10px;       字符间距
    word-spacing: 20px;         单词间距
    text-transform: capitalize; 单词首字母大写
    '''

    边框属性

    '''
    border-style: solid;         边框样式(solid为实线dashed为虚线)
     
    border-color: chartreuse;    边框颜色
     
    border- 20px;          边框粗细

    border-radius: 20px; 设置为圆角的边框 简写:border: 20px rebeccapurple solid;
    '''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="css文本属性与边框属性">
        <meta name="description" content="study">
        <meta http-equiv="Refresh" content="1800;https://www.baidu.com">
        <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
        <title>标题</title>
        <link rel="stylesheet" href="day109.css">
        <link rel="icon" href="https://www.baidu.com/favicon.ico">
        <!--<script src="js.js"></script>-->
    </head>
    
    <body>
        <div class="div1">笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞
            笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞笨鸟先飞
            笨鸟先飞笨鸟先飞
        </div>
    
        <div class="div2">
            hello world hello world hello world hello world hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world hello world
        </div>
    
        <div class="div3"></div>
    </body>
    </html>
    .div1,.div2{
        height: 100px;
        /*标签高度100px*/
        background-color: antiquewhite;
        /*标签背景颜色*/
        text-align: center;
        /*文本横向排列*/
        /*line-height: 100px;*/
        /*文本行高*/
        text-indent: 50px;
        /*首行缩进*/
        letter-spacing: 10px;
        /*字符间距*/
        word-spacing: 10px;
        /*单词间距*/
        text-transform: capitalize;
        /*首字母变大写*/
    }
    
    
    .div3{
        width: 300px;
        height: 300px;
        border: 5px dashed green;
        /*简写*/
        /*border- 5px;*/
        /*上下左右边框粗细*/
        /*border-style: dashed;*/
        /*上下左右边框样式,dashed为虚线,solid为实线*/
        /*border-color: green;*/
        /*上下左右边框颜色*/
        border-left-color: #d900ff;
        /*左边框*/
        border-right-color: lightpink;
        /*右边框*/
        border-top-color: red;
        /*上边框*/
        border-bottom-color: yellow;
        /*下边框*/
    }
    while True: print('studying...')
  • 相关阅读:
    Java回顾之Spring基础
    Java回顾之ORM框架
    Java回顾之JDBC
    Java回顾之一些基础概念
    Java回顾之反射
    Java回顾之序列化
    platform_device与platform_driver
    DB9 公头母头引脚定义及连接
    浅谈UML的概念和模型之UML九种图
    为Windows 7的winsxs目录瘦身,谨慎。
  • 原文地址:https://www.cnblogs.com/xuewei95/p/14955342.html
Copyright © 2020-2023  润新知