最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • CSS的文本样式属性值

    正文概述 掘金(前前前端小飞)   2020-12-25   300

    HTML编辑文本,通过CSS的设置属性赋予HTML网页活力,改变文字类型、背景以及插入图片、视频、音频等,使网页更具生动。

    • CSS中的文本属性
    font-weight: 
                bold;       //改变字体粗细
                normal   //正常字体、标准字体
     font-style:oblique;     //字体风格(oblique倾斜)
     text-decoration:
                underline;    //文字修饰(underline 下划线)
                overline;    (上划线) line-throug;   (删除线) none; (取消文字下划线)
    
    text-indent: 20px;    //文本首行缩进
     text-align: right /center /left      //文本对齐
     text-transform:
                uppercase; //文本转换(uppercase小写转化为大写)
                lowercase;    (大写转化为小写)
    
    text-shadow: 0 2px 5px red;   //文本阴影
     letter-spacing: 20px;    //字间距
     word-spacing: 20px;   //词间距(英文单词)
     line-height:20px;    //两个文本中的距离、行距
    

    练习一个首字母大写如下:

    <p>my english is very good</p>

    通过CSS更改如下:

    p:first-letter{
        text-transform: uppercase;
    }
    

    CSS的文本样式属性值

    • CSS中的div属性

    在HTML中新建一个div

    <div class="box1"></div>
    background-image:url("img/图片路径");     //插入图片
     background-repeat:no-repeat;      //平铺方式(不平铺)
                                      “repeat-x”;    (横向X轴平铺)
                                      “repeat-y”;     (纵向Y轴平铺)</pre>
    

    在CSS中实现图片平铺:【background-repeat:属性值】

    在CSS中实现图片:不平铺

    .box1{
        width: 100px;
        height: 100px;
        border: dashed red;
        background-image: url(../img/picter/ai2003.jpg);
        background-repeat: no-repeat;
    }
    

    CSS的文本样式属性值

    在CSS中实现图片X轴平铺:

    .box1{
        width: 500px;
        height: 300px;
        border: dashed red;   //画布边框
        background-size: 100px;    //图片大小
                         contain;  //上下填充画布
                         cover;    //完全填充画布,影响图片原貌
    
        background-image: url(../img/picter/ai2003.jpg);
        background-repeat: repeat-x;
    }
    

    CSS的文本样式属性值

    在CSS中实现图片的位置: 【background-position:属性值】

    .box1{
        width: 500px;
        height: 100px;
        border: dashed red;
        background-size: 100px;
        background-image: url(../img/picter/logo_db.png);    //图片路径
        background-repeat: no-repeat;     //不平铺
        background-position: center center;     //图片居中
                             bottom lift ;    //左下角
                             top right;    // 右上角
                             50px 50px ;   //自定义位置 }</pre>
    

    CSS的文本样式属性值

    CSS中的背景附件:【background-attachment:属性值】

    background-attachment:fixed; //固定图片位置

    综合上诉结构,可以* 综合简写属性 颜色 地址 平铺方式 是否固定 (不需要可以不写) 位置

    background: pink url ("img/图片路径") no-repeat center center; background-size: 100%;


    起源地下载网 » CSS的文本样式属性值

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元