• 【2020Python修炼记】前端开发之 CSS基础样式


    【目录】

    一、文字样式

    二、背景样式

    三、显示样式

    一、文字样式 

    用于控制字体 文本显示的方式

    /*字族:STSong作为首选字体, 微软雅黑作为备用字体*/
    font-family: "STSong", "微软雅黑";
    
    /*字体大小*/
    font-size: 40px;
    
    /*字重:100、200、300、400、500、600、700、800、900,值越大字越粗*/
    font-weight: 900;
    
    /*行高: 字体文本默认在行高中垂直居中显示*/
    line-height: 200px;
    
    /*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) | 
          inherit 继承父元素的text-decoration属性的值
    */ text-decoration: overline; /*字间距*/ letter-spacing: 2px; /*词间距*/ word-spacing: 5px; /*首行缩进:1em相当于一个字的宽度*/ text-indent: 2em; /*字体颜色 (还有多种颜色设置的方法,详见代码例子)*/ color: red; /* 文本水平排列方式:left(水平居左) | center(水平居中) | right(水平居右) | justify (两端对齐)*/ text-align: center;

    【补充】

    font-weight用来设置字体的字重(粗细)

    描述
    normal 默认值,标准粗细
    bold 粗体
    bolder 更粗
    lighter 更细
    100~900 设置具体粗细,400等同于normal,而700等同于bold
    inherit 继承父元素字体的粗细值

     

    例子:

        <style>
            p {
                /* !*第一个不生效就用后面的 写多个备用*! */
                font-family: "Arial Black","微软雅黑","...";  
                /* !*字体大小*! */
                font-size: 24px;  
                /* !*bolder lighter 100~900 inherit继承父元素的粗细值*! */
                font-weight: inherit;  
    
                /* !*直接写颜色英文*! */
                color: red;  
                /* !*颜色编号*! */
                color: #ee762e;  
                /* !*三基色 数字  范围0-255*! */
                color: rgb(128,23,45);  
                /* !*第四个参数是颜色的透明度 范围是0-1*! */
                color: rgba(23, 128, 91, 0.9);  
    
                /*当你想要一些颜色的时候 可以利用现成的工具
                    1 pycharm提供的取色器
                    2 qq或者微信截图功能
    
                    微信公众号:软件管家...
                */
            }
        </style>

    二、背景样式 

    /*背景图片:url函数可以链接网络或本地图片*/
    background-image: url('https://www.baidu.com/favicon.ico');
    
    /*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
    background-repeat: no-repeat;
    
    /*x轴背景图片位置偏移:正值往右偏移,负值往左偏移*/
    background-position-x: 10px;
    
    /*y轴背景图片位置偏移:正值往下偏移,负值往上偏移*/
    background-position-y: 10px;
     
    /* !*第一个左  第二个上*! */
    background-position:center center;  
    
    /* 锁定图片为背景地图,不可滑动 */
    background-attachment: fixed;

    三、显示样式——由display 控制

    display:none;

    <!-- HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 -->

    display:block;

    <div style="display: block;"></div>
    <span style="display: block;"></span>
    <i style="display: block;"></i>
    <!--
    1. 任意标签的display样式值均可以设置为block,那么该标签就会以block方式来显示
    2. block方式显示的标签,默认会换行
    3. block方式显示的标签,支持所有的css样式
    4. block方式显示的标签,可以嵌套所有显示方式的标签
    注:标题标签和段落标签虽然也是block显示类标签,但不建议嵌套block显示类标签
    -->

    display:inline;

    <div style="display: inline;"></div>
    <span style="display: inline;"></span>
    <i style="display: inline;"></i>
    <!--
    1. 任意标签的display样式值均可以设置为inline,那么该标签就会以inline方式来显示
    2. inline方式显示的标签,默认不会换行
    3. inline方式显示的标签,不支持所有css样式(如:不支持手动设置该标签的宽高)
    4. inline方式显示的标签,建议只用来嵌套所有inline显示方式的标签
    -->

    display:inline-block;

    <div style="display: inline-block;"></div>
    <span style="display: inline-block;"></span>
    <i style="display: inline-block;"></i>
    <!--
    1. 任意标签的display样式值均可以设置为inline-block,那么该标签就会以inline-block方式来显示
    2. inline-block方式显示的标签,具有inline特性,默认不换行
    3. inline-block方式显示的标签,也具备block特征,支持所有css样式
    4. inline-block方式显示的标签,不建议嵌套任意显示方式的标签
    -->

    display:"none"与visibility:hidden的区别:

    visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

    display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

    四、边框

    边框属性:

    • border-width

    • border-style

    • border-color

    边框样式:

    描述
    none 无边框。
    dotted 点状虚线边框。
    dashed 矩形虚线边框。
    solid 实线边框。

      <style>
    
            p {
                background-color: red;
    
                border-width: 5px;
                border-style: solid;
                border-color: green;
    
            }
            div {
            # 单独为 某一边框设置样式 /*border-left- 5px;*/ /*border-left-color: red;*/ /*border-left-style: dotted;*/ /*border-right- 10px;*/ /*border-right-color: greenyellow;*/ /*border-right-style: solid;*/ /*border-top- 15px;*/ /*border-top-color: deeppink;*/ /*border-top-style: dashed;*/ /*border-bottom- 10px;*/ /*border-bottom-color: tomato;*/ /*border-bottom-style: solid;*/
        
    border: 3px solid red; /*简写形式,三者位置可以随意写*/ } #d1 { background-color: greenyellow; height: 400px; width: 400px; border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/ } </style>

    参考阅读:

    https://www.cnblogs.com/Dominic-Ji/p/10474769.html

  • 相关阅读:
    PT100高精度测温电路 AD623+REF3030(转)
    STM32|4-20mA输出电路(转)
    串口通讯数据处理算法分析与实现(转)
    stm32_CAN总线知识(转)
    图像的灰度级和动态范围(转)
    图像bayer格式介绍以及bayer插值原理CFA(转)
    用oracle建表,必须注意Oracle 关键字(保留字)
    爬虫的定向爬取与垂直搜索
    开源的网络爬虫以及一些简介和比较
    SQL中的等号、IN、LIKE三者的比较
  • 原文地址:https://www.cnblogs.com/bigorangecc/p/12880415.html
Copyright © 2020-2023  润新知