zoukankan      html  css  js  c++  java
  • HTMLCSS相关(2)

    【CSS常用文本属性】
    1,字体、字号类:
    ① font-weight:字体粗细。 bold-加粗 noemal-正常 lighter-细体
    也可以使用100-900数值,400表示normal,700表示bold。
    ② font-style: 字体样式。italic表示倾斜,normal-正常
    ③ font-size: 字号.可以写px单位,也可以写%
    200%表示浏览器默认大小(16px)的两倍=32px。
    ④ font-family:字体系列(字体族),
    >>>可以直接写字体名,也可以写字体系列名,
    >>>常用字体系列有 :serif-衬线体 sans-serif 非衬线体;
    >>>font-family可以接受多个值,用逗号分隔。表示优先使用第一个,如果没有这个字体一次向后使用,
    通常,最后一个放字体系列名。
    font-family: "微软雅黑",sans-serif;
    ⑤ font缩写形式:
    >>>顺序必须是 style weight font-size/line-height font-family
    >>>不同属性之间用空格分隔
    >>>size/line-height 必须一组,斜线分隔。
    >>>font-family多个字体之间,用逗号分隔
    eg:font:bold italic 32px/50px "微软雅黑";
    2,字体颜色
    ① color:字体颜色。可以是单词、十六进制,RGB等。
    ② opcity: 透明度。可选值0-1。
    [opcity和rgba的区别]
    >>>rgba本身可以设置颜色,而opcity必须配合其他颜色属性来用;
    >>>rgba仅仅是让当前元素设置的颜色透明;
    而opcity,会让当前元素里面的而所有文字,背景,子元素都透明。
    3,行距、对齐类
    ① line-height:行高。可以写px单位、可以直接写数字(表示默认行距的几倍)、也可以写百分比(默认行距的百分比)
    >>>行高重要作用:让单行文字在div中垂直居中,设置行高等于div的高度,即可设置让单行文字垂直居中。
    ② text-align: 设置区域内的行级元素水平对齐方式。left center right
    ③ letter-spacing::字符间距。字与字之间的距离。
    ④ text-decoration:文本修饰
    underline-下划线 overline-上划线 、line-through-删除线、none.
    ⑤ overflow:设置超出区域文字显示方式。
    使用overflow样式可以设置文字超出区域的显示方式
    >>> overflow:hidden;超出区域的文字隐藏不显示
    >>> overflow:scroll;无论文字多少都会显示水平垂直滚动条
    >>> overflow:auto;自动,文字多显示滚动条,文字少不显示滚动条。
    >>>overflow-y; overflow-x;单独修改两个方向的滚动条
    overflow-y:auto; overflow-x: hidden;
    ⑥ text-overflow:设置行末多余文字的显示方式,
    >>> clip:多余文字裁剪掉 ellipsis-多余文字省略号显示
    >>>显示省略号,需要配合white-space: nowrap;使用
    >>>【设置行末显示省略号】
    overflow: hidden;(超出区域文字隐藏)
    white-space: nowrap;(不断行)
    text-overflow: ellipsis;(显示省略号)
    ⑦ white-space: nowrap;设置中文行末,不断行显示。
    ⑧ text-indent: 首行缩进
    ⑨ -webkit-text-stroke:文字描边
    -webkit-:表示只有webkit内核的浏览器生效,常见的有chrome、safari(苹果浏览器)
    ⑩ text-shadow:文字阴影有四个属性值,空格分隔。
    >>>水平阴影距离 正数表示阴影右移,负数左移
    >>>垂直阴影距离 正数表示阴影下移,负数上移
    >>>阴影模糊距离 0表示阴影一点不模糊
    >>>阴影的颜色

    【CSS常用背景属性】
     1、background-color:背景色。* 2、background-image:背景图。使用URL("")选择背景图片,背景图和背景色同时存在时,背景图覆盖背景色。* 3、background-repeat:背景图的重复方式,no-repeat:不平铺 repeat:平铺 repeat-x:沿X轴平铺 repeat-y:沿y轴平铺。* 4、background-size:背景图的大小,有两种写法* [指定宽度高度的写法]
     >>>宽度高度的指定,可以写px,也可以写%(父容器宽高的百分比)
    >>>当写两个属性时,分别表示宽度高度。
    当写一个属性时,表示宽度,高度将会等比缩放。
     [其他属性值]
     >>>contain:图片等比缩放,直到宽或高中较大的一边缩放到100%为止(可能导致较短的一边小于100%,图片无法盖住全部区域)
     >>>cover:图片等比缩放,直到宽或高中较小的一边缩放到100%为止(可能导致较大的一边大于100%,图片超出区域显示不全)* 5、 background-position:背景图偏移量
     >>>指定位置:left/center/right top/center/bottom* 当只写一个值时,另一个默认居中。
     >>>指定坐标:两个属性分别表示水平位移,垂直位移
     ① 坐标的值可以是像素单位,也可以是百分数
     ② 当写px单位时:* 水平方向:正数右移,负数左移
     垂直方向:正数下移,负数上移
     (左负右正,上负下正)
     ③ 当写百分数时,一般只能是正数。表示的是,去掉图片的宽高,剩余空白区域的分布比例。例如:background-position:30% 表示的是
     水平方向去掉图片宽度,剩余区域3:7分。

    负边距

    【1、实现块级元素在父容器中水平垂直居中】
    ① 设置子元素为定位元素
    left: 50%; margin-left: -width/2px;
    top: 50%; margin-top: -height/2px;

    【2、使用负边距增大元素的宽度】
    ① 子容器的宽度不指定,指指定高度,或者由内容撑开高度
    ② margin:0px -50px; 可以使左右两边均超出父容器50px

  • 相关阅读:
    PIE-Basic 自定义滤波
    PIE-Basic 常用滤波
    PIE-Basic 中值滤波
    PIE-Basic 均值滤波
    PIE-Basic 小波变换
    PIE-Basic 傅里叶变换
    PIE-Basic 去相关拉伸
    .net调用数据库执行Mysql存储过程,提示 Procedure or function XXXX Cannot be found in database xxx
    C#几种类型转换方法的个人总结
    Winform无法改变窗体大小
  • 原文地址:https://www.cnblogs.com/zzzzyy/p/7295570.html
Copyright © 2011-2022 走看看