zoukankan      html  css  js  c++  java
  • HTML-美化

    1、美化文本

    1.1第一部分

    font-size:字体大小,常用em、px、%、rem作单位,预设值small、large、medium,可继承,

    font-weight:加粗字体,属性为bold,加粗字体,(100-900之间的数值也可以)或者设置700(与bold效果相同),400是正常情况,100-900之间取整,可继承;

    font-style:italic 倾斜字体,可继承;

    letter-spacing调整字间距,单位px或者em都可以,可继承;

    text-indent首行缩进,一般是在p标签上面使用,span标签使用margin-left:2em可实现效果;

    text-decoration,给文字设置下划线,默认是没有线条,overline(文字顶部),underline(文字底部),line-through(文字中部,效果和del元素一样),只有先设置了下划线位置之后,才能设置下划线的颜色,样式等等。

    1.2第二部分

    (1)  修饰首字母:伪元素选择器,【::first-letter】,可以选择元素中的第一个文字;

    可以运用的属性:font 属性color 属性、background 属性、margin 属性、padding 属性、border 属性、text-decoration、vertical-align (仅当 'float' 为 'none' 时)、text-transform、line-height、float、clear

    (2)  修饰首行:伪元素选择器,【::first-line】,可以选中元素中的第一行文字;

    (3)  修饰选中文字:伪元素选择器,【::select】可选中被用户框选的文字;

    (4)  字体类型:分为衬线字体和非衬线字体

             font-family,设置字体类型,为了避免全部都失效的情况,通常将最后一个值设置为"sans-serif"或"serif"。

    向浏览器引入字体:@font-face{font-family:“名字”};src:url(字体地址)。

    2、美化边框

    (1)  圆角边框:【border-radius】设一个值是正圆,两个值是椭圆。

     

      

    3、美化背景

    (1)【background-image】设置背景图片;

    (2)【background-repeat】设置图片重复方式;

    • 【repeat】默认值,从左到右从上到下重复;
    • 【no-repeat】不重复;
    • 【repeat-x】仅在x轴方向上重复;
    • 【repeat-y】仅在y轴方向上重复。

    (3)【background-position】设置图片在边框盒中的具体位置。

    预设值left、right、top、bottom、center

    比如:background-position:center(水平垂直居中);center top(水平居中);left bottom(左边下边);50px 100px(图片距离左边50,上边100)

    雪碧图那个是指一个大的背景里面只需要小部分背景,其他的不要,通过设置盒子的大小和移动背景图的位置来保留想要的区域。

    (4)【background-size】设置背景图尺寸;

    • Background-size:contain;等比例缩放图片,不管盒子,可以不覆盖盒子;
    • Background-size:cover;图片大小等比例缩放,但是必须覆盖整个盒子。

     

    (5)【background-attachment】固定背景图

    • Scroll:默认值,背景图跟随元素移动;
    • Fixed:背景图固定。

    (6)速写【background】统一设置

    Background:背景图 位置/尺寸 重复方式 固定方式 背景颜色;

     

    4、背景渐变

    (1)  线性渐变【background-image:linear-gradient()】

     

     

    (2)  径向渐变【background-image:radial-gradient()】

     

    5、透明度

    (1)  使用【opacity】属性,可调整整个盒子的透明度该属性的取值范围是0~1 ,其中,0表示全透明,1表示完全不透明;

    (2)  使用rgba颜色,可调整某个颜色的透明度,

    • rgba分别表示: r:red,g:green,b:blue,a:alpha
    • 书写格式为:rgba(red, green, blue, alpha);
    • 其中,alpha表示透明通道,取值是0~1之间;
    • 0表示全透明,1表示完全不透明;
    • 也可以用十六进制表示,例如rgba(0,0,0,0.5)可以写成#00000080。

    (3)  调整鼠标样式

    使用cursor属性

     

    6、阴影

    (1)【text-shadow】设置文本的阴影;

    h-shadow   必需,水平阴影的位置。允许负值;

    v-shadow   必需,垂直阴影的位置。允许负值;

    blur   可选,模糊的距离;

    color  可选,阴影的颜色。

     

    (2)【box-shadow】设置文本框的阴影;

    h-shadow   必需,水平阴影的位置,允许负值;

    v-shadow   必需,垂直阴影的位置,允许负值;

    blur可选,模糊距离;

    spread可选,阴影的尺寸;

    color  可选,阴影的颜色;

    inset  可选,将外部阴影 (outset) 改为内部阴影。

     

  • 相关阅读:
    标准输入输出
    UNIX基础概念
    phpstrom设置php环境
    nginx+php+swoole安装记录
    MySQL索引
    生成器来解决大文件读取,大数据下载
    PHP调优
    PHP-FPM详解
    远程登录服务器配置
    HTTPS配置
  • 原文地址:https://www.cnblogs.com/czy18227988114/p/11607223.html
Copyright © 2011-2022 走看看