zoukankan      html  css  js  c++  java
  • HTML5字体、伪元素、背景

    1、字体样式:

     选择器  { font:font-style  font-weight  font-size / line-height   font-family;}

     例:p { font: italic  bold   14px / 1  ' 宋体 ' ;}

     注意:使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开

     不需要的属性可以省略,但必须保留 font-size 和 font-family 属性,否则 font 属性不起作用。

    2、结构(位置)伪类选择器(CSS3)

     :first-child,选取第一个子元素

     :last-child,选取最后一个元素

     :nth-child(n),选取第 n 个元素,可以是 even 偶数, odd 奇数 , 如果用公式 n 从 0 开始 ,倍数:2n,3n

     :nth-last-child(n),倒数,选取第 n 个元素

    3、目标伪类选择器(:target)

     :target 目标伪类选择器,可用于选取当前活动的目标元素,更改样式。

     例如: 

     <style>

      :target{ color:red;font-size:18px;}

     </style>

     <a href=" #movie ">演艺经历</a>

     <a href=" #live ">个人生活</a>

     <h3 id="movie">演艺经历</h3>

     <h3 id="live">个人生活</h3> 

    4、文字设置

     line-height:行高,一般设置为比字体大7~8个像素

     text-indent:首行缩进,建议使用 em 作为设置单位,1 em 就是一个字的宽度

     letter-spacing:字间距,设置汉字之间的间距

     word-spacing:单词间距,设置英文单词之间的间距

     writing-mode:文本在水平或垂直显示

     horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom

     vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left

     vertical-lr:垂直方向内内容从上到下,水平方向从左到右

     sideways-rl:内容垂直方向从上到下排列

     sideways-lr:内容垂直方向从下到上排列

     word-break:自动换行,主要处理英文单词

     break-all,允许在单词内换行

     keep-all,只能在半角空格或连接符处换行

     white-space:强制文本在一行显示内容

     text-overflow:文字溢出,设置或检索是否使用一个省略标记(...),表示对象内容溢出

      clip:文本溢出不显示省略标记(...)

      ellipsis:文本溢出时,使用省略标记(...)

      使用 text-overflow 属性,必须先强制在一行内显示,其次和 overflow:hidden 搭配使用

      例:   white-space:nowrap;

         overflow:hidden;

         text-overflow:ellipsis;

      字体颜色半透明(CSS3)

        color:rgba(r,g,b,a) a 是 alpha 透明的意思  取值范围 0~1 之间。   例如:h1 { color:rgba( 255,0,0,0.3);}

      文字阴影(CSS3)

        可以实现凹凸文字 text-shadow:1px 1px 1px #000,-1px -1px 1px #fff;

        text-shadow:水平位置  垂直位置  模糊距离  阴影颜色 。  例如:h1{ text-shadow:5px  11px  3px raba(0,0,0,0.5);}

    5、选择器

      交集选择器:div.p(找到两个选择器共同的元素)      并集选择器:div,p,h1 (找选择器指定的元素)

      后代选择器:div  p(儿子,孙子,重孙都找到)      子元素选择器:.nav > li (只找亲儿子)

    6、伪元素选择器(CSS3)

      ::first-leeter,选择第一个字

      ::first-line,选择第一行

      ::selection,选中文字时,改变样式

      ::before,::after,在盒子div的内部前面或后面插入内容

      例如:

        div::before{ content:' 新增的内容 ' ;}

        <div>正常内容显示区域</div>

    7、背景固定(background-attachment)

      scroll,默认,滚动

      fixed,固定

      简写方式:background:背景颜色  背景图片地址  背景平铺  背景滚动  背景位置   

      例如:  background:red  url(img.png)  repeat-y  scroll  center  -10px ;

      背景半透明(CSS3)

        background:rgba(0,0,0,0.7);

      背景缩放(CSS3)

        background-size,设置背景图片的尺寸,在移动web开发中做屏幕适配应用非常广泛。

      参数:常用 cover

      1,设置长度单位(px)或百分比

      2,设置为 cover 时,图片进行等比例缩放,图片一定会保证宽度和高度同时满足盒子的大小,溢出部分则会被隐藏。

      3,设置为 contain 图片进行等比例缩放,如果图片的高度或宽度有一个和盒子一样大,就不在缩放,保证了图片的完整。

        background-image:url(img.png);

        background-size:300px ; //  自动适应比例

        background-size:contain;   // 自动缩放比例,但是盒子有部分会被裸露在外

        background-size:cover;  // 自动缩放比例,溢出部分隐藏

      多背景(CSS3)

        逗号分隔可以设置多背景,多背景图之间存在重叠关系,前面的背景图会覆盖后面的背景图,背景色通常定义在最后一组。

        background:url(test.png)  no-repeat  left  top, url(img.png)  no-repeat   bottom  right   pink;

    8、字体图标

      推荐网站:
        icomoon字库:http://icomoon.io 国外服务器,打开网速较慢
        阿里 icon font 字库:http://www.iconfont.cn/ 国内服务器,淘宝,阿里各类图标  
        第一步:在样式里面声明字体,告诉别人我们自己定义的字体
          @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?scij6h');
            src: url('fonts/icomoon.eot?scij6h#iefix') format('embedded-opentype'),
              url('fonts/icomoon.ttf?scij6h') format('truetype'),
              url('fonts/icomoon.woff?scij6h') format('woff'),
              url('fonts/icomoon.svg?scij6h#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
                font-display: block;
           }
        第二步:给盒子使用字体
           span{
            font-family:'iconmoon';
           }
        第三步:盒子里面添加结构
           span::brfore{
            content:'e900';
           }
        或者直接复制图标粘贴在标签框中:<span></span>
  • 相关阅读:
    NOIP2019 Emiya 家今天的饭 [提高组]
    Codeforces Round #663 (Div. 2) 题解
    树上差分入门
    Codeforces Round #664 (Div. 2) 题解
    [USACO19OPEN]Snakes
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
  • 原文地址:https://www.cnblogs.com/qtbb/p/11392321.html
Copyright © 2011-2022 走看看