• css修饰操作(上)


    一:宽和高:

      width:为元素设置宽度。

      height:为元素设置高度。

      ps:块级标签才能设置宽度,内联标签的宽度由内容来决定。

    二:字体属性:

      1.文字字体:

        font-family 可以把多个字体名称作为‘退回’ 系统来保存。如果浏览器不支持第一个字体就会尝试下一个。浏览器会使用可识别的第一个值。 

      2.字体大小:

        font-size :设置字体大小。(设置成inherit表示继承父元素的字体大小)

      3.字体字重(也就是字体的粗细):

        font-weight:(normal:默认值,bold:粗体,bolder:更粗,lighter:更细,100~900:设置具体粗细,400等同与normal,inherit:继承父元素字体的粗细值。)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*width属性可以为元素设置宽度。*/
            /*height属性可以为元素设置高度。*/
            /*块级标签才能设置宽度,内联标签的宽度由内容来决定。*/
            div {
                    width: 400px;
                    height: 100px;
            }
            p {
                /*依次检验浏览器是否支持字体*/
                    font-family: "Sitka Banner", "Arial", sans-serif
            }
            p {
                /*设置字体大小*/
                    font-size: 16px;
                /*设置字体的自重,也就是字体的粗细*/
                    font-weight: lighter;
            }
        </style>
    </head>
    <body>
    <div>div中的文本1</div>
    <div>div中的文本2</div>
    <p>段落文本</p>
    </body>
    </html>

      4.文本颜色:

      颜色属性被用来设置文字的颜色,颜色是css最常用的设置,设置方式有:

        十六进制值:如:#FF0000

        一个RGB值:如:rgb(255.0.0)

        颜色的名称-如:yellow

        rgba:第四个表示透明度,它的范围是0.0~1.0。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {color: #FF0000 }
            p {color: green}
            span {color: rgb(20,85,5)}
            ul {color: rgba(255,63,63,0.5)}
        </style>
    </head>
    <body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>
    <div>div中的文本1</div>
    <div>div中的文本2</div>
    <p>段落文本</p>
    <span>span文本</span>
    </body>
    </html>

    三:文字属性:

      1.文件对齐:

        text-align 规定元素中文本的对齐方式。类型有:

          left:向左对齐(默认值)

          right:右对齐

          center:居中

          justify:两端对齐

       2.文字装饰:

        text-decoration属性,用来给文字添加属性效果,类型有:

          none:默认(标准文本)

          underline :定义文本的下划线

          overline:定义文本的上划线

          line-through:定义穿过文本的一条线

          inherit:继承父元素text-decoration属性

      3.首行缩进:

        text-indent:20px  首行缩进20像素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #a {text-decoration: none;text-indent:20px}
            #b {text-decoration: underline}
            #c {text-decoration: overline}
            #d {text-decoration: line-through}
            #e {text-decoration: inherit}
    
        </style>
    </head>
    <body>
    
    <p id="a">我就是一段文字</p>
    <p id="b">我就是一段文字</p>
    <p id="c">我就是一段文字</p>
    <p id="d">我就是一段文字</p>
    <p id="e">我就是一段文字</p>
    
    </body>
    </html>

    四:背景属性

        设置背景颜色:background-color :red;
        设计背景图片:background-img:url(‘文件路径’);

        设置背景图片平铺满整个网页:repeat;
        设置背景图片只在水平方向平铺:repeat -x;

        设置不平埔:no -repeat

        设置背景图片的位置:background -position:left top;或者 background -position:200px 200px;

        (简写:background:#56566 url(‘1.png’)no-repeat left top;)

        (*****)设置背景图片不动:background-attachment:fixed

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>滚动背景图示例</title>
        <style>
            * {
                margin: 0;
            }
            .box {
                width: 100%;
                height: 500px;
                background: url('https://hbimg.huabanimg.com/c6284320b4ce56447add62a9a9f99bd27482edbb2e7d0f-eQEdGU_fw658')  center center;
                /*设置图片不动*/
                background-attachment: fixed;
            }
            .d1 {
                height: 500px;
                background-color: purple;
            }
            .d2 {
                height: 500px;
                background-color: deeppink;
            }
            .d3 {
                height: 500px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="d1"></div>
        <div class="box"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </body>
    </html>

     

    五:边框

      1.边框属性:

        设置边框宽度:border-width

        设置边框的类型:border-style
        设置边框的颜色:border-color

        支持简写:border:2px solid red;

      2.边框样式:

        无边框:none

        点状虚线边框:dotted

        矩形虚线边框:dashed

        实线边框:solid

        ps:(边框可以单独被设置)

        圆角边框:borde-radius (如果要将一个边框设置成正圆形,值应该设置为50%)

    六:display属性:

        主要作用是控制HTML元素的显示效果:

        元素存在,但是在浏览器中不显示 :display:'none'

        默认占满整个页面的宽度,如果设置了指定的宽度,用margin填充剩下的部分:display:‘block’

        按行类元素显示:display:‘inline’

        使的元素同时具有行内元素和块级元素的特点:display:‘inline-block’

        ps:display:‘none’ 与 visbility:hidden的区别:

          visbility:hidden:可以隐藏某个元素,但是要占用页面空间,当然就会页面布局。

          display:‘none’:真正的隐藏了元素,不会占用页面空间。

        

      

        

  • 相关阅读:
    c++类模板与友元 安静点
    c++类模板分文件编写 安静点
    Junit4测试
    04月09日总结
    How to create a Android SO library dinamically loaded in your FMX projects? by Emailx45
    linux内核监控调试相关好用模块汇总
    软件质量管理
    操作系统——第四章课后习题答案02
    分页存储管理方式与分段存储管理方式
    Junit4测试
  • 原文地址:https://www.cnblogs.com/ay742936292/p/10946292.html
Copyright © 2020-2023  润新知