2. IT
    3. H5基础第五课时CSS篇（2）

    H5基础第五课时CSS篇（2）

    xiaoxiao2021-04-14  27
    CSS文本属性 1. 字体、字号：     (1)font（缩写形式）     (2)font-weight 粗细      bold 加粗、bloder 深度加粗、lighter 细体、数值 100-900     (3)font-size 大小      具体的px值、百分比（默认字体大小16px）     (4)font-family 字体系列:          衬线体 serif 有箭头的字体          非衬线sans-serif  网页中常用          等宽体 Monospace       字体族名称，可以多个以“，”隔开；类族名称，必须以类族名称结尾。      前面是字体族名称 最后一个是类族名称      浏览器在显示字体的时候，依次判断是否支持当前的字体，直到最后的字体系列   p{     font-family: "宋体","仿宋",sans-serif; }     (5)font-style 字体样式      italic 斜体     (6)Font简写顺序          font-style,font-variant,font-weight,font-size,line-       height,font-family 2.字体颜色：  color  opacity：0-1（透明度 css3） 3.行距、对齐等：  (1) line-height 行高 通过设置文本的行高与外部容器的高度一致，可以实现文本垂直居中      单行字体占用的高度   px、%         p{             border: 1px solid red;             text-align: center;             line-height: 100px;             width: 200px;             height: 100px;         }  (2) text-align 对齐      justify：两端对齐 start=left：左对齐（默认） end=right：右对齐      center：居中对齐   (3) letter-spacing 字符间距       px、normal  (4) text-decoration 文本修饰      上划线 overline、下划线 underline、中划线 line-through  (5) overflow 溢出      自动处理 auto、隐藏 hidden、滚动条显示 scroll  (6) text-overflow      clip： 当内联内容溢出块容器时，将溢出部分裁切掉。       ellipsis： 当内联内容溢出块容器时，将溢出部分替换为（...）。       一般无法直接显示 一般和其他配合使用    比如： overflow: hidden;           white-space: nowrap;           text-overflow: ellipsis;  (7) text-shadow 阴影      text-shadow: length1 length2 （length3）color; <length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值  <length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值  <length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值  <color>： 设置对象的阴影的颜色。    例子： text-shadow: 2px 2px yellow;  (8) -webkit-text-stroke 文本描边颜色 大小 颜色      -webkit-text-stroke: 大小 颜色;    例子：-webkit-text-stroke: 2px yellow;  (9)text-indent 文本缩进     <length>： 用长度值指定文本的缩进。可以为负值。      <percentage>： 用百分比指定文本的缩进。可以为负值。      each-line： 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）      hanging： 反向所有被缩进作用的行。（CSS3）     例子：text-indent: 2em; em为相对缩进单位 4.背景属性   (1)background 缩写形式   (2)background-color 背景色   (3)background-image 背景图片      background-image: url("图片路径");    (4)background-repeat 图片是否平铺      repeat-x： 背景图像在横向上平铺       repeat-y： 背景图像在纵向上平铺       repeat： 背景图像在横向和纵向平铺       no-repeat： 背景图像不平铺       round： 背景图像自动缩放直到适应且填充满整个容器。（CSS3）       space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）    (5)background-position 背景图片位置       <percentage>： 用百分比指定背景图像填充的位置。可以为负值。       <length>： 用长度值指定背景图像填充的位置。可以为负值。       center： 背景图像居中。       left：  背景图像左对齐。       right： 背景图像右对齐。       top： 背景图像上对齐。       bottom： 背景图像下对齐。     例子： background-position: right top;   (6)background-size 背景图片大小       <length>： 用长度值指定背景图像大小。不允许负值。       <percentage>： 用百分比指定背景图像大小。不允许负值。       auto： 背景图像的真实大小。       cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。       contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
    转载请注明原文地址: https://ju.6miu.com/read-669645.html

    技术

    最新回复(0)