• 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...')
  • 相关阅读:
    装饰器的进阶
    Django admin组件应用
    AJAX
    Cookie、Session和自定义分页
    Django中ORM介绍和字段及字段参数
    Django 框架
    Django之视图
    Django之路由系统
    Django ORM相关操作
    Django 模板语言
  • 原文地址:https://www.cnblogs.com/xuewei95/p/14955342.html
Copyright © 2020-2023  润新知