• CSS样式链接和文字常用属性


    行内: <div style="color:red;"></div>

    内嵌<style>div{background-color:red;}</style>

    外部引用

    <link rel="stylesheet"(样式表) href="./xxx.css">

     xxx.css文件:  div{color:red}

    CSS文字属性

    color : #999999; /*文字颜色*/

    font-family : 宋体,sans-serif; /*文字字体*/

    font-size : 9pt; /*文字大小*/

    font-style:itelic; /*文字斜体*/

    font-variant:small-caps; /*小字体*/

    letter-spacing : 1pt; /*字间距离*/

    line-height : 200%; /*设置行高*/

    font-weight:bold; /*文字粗体*/

    vertical-align:sub; /*下标字*/

    vertical-align:super; /*上标字*/

    text-decoration:line-through; /*加删除线*/

    text-decoration: overline; /*加顶线*/

    text-decoration:underline; /*加下划线*/

    text-decoration:none; /*无修饰线*/

    text-transform : capitalize; /*首字大写*/

    text-transform : uppercase; /*英文大写*/

    text-transform : lowercase; /*英文小写*/

    text-align:right; /*文字右对齐*/  

    text-align:left; /*文字左对齐*/

    text-align:center; /*内部元素居中*/

    text-align:justify; /*文字分散对齐*/

    vertical-align:top; /*垂直对齐该行元素内的最大元素顶部/

    vertical-align:bottom; /*垂直对齐该行元素内的最大元素的底部*/

    vertical-align:middle; /*垂直居中对齐*/

    vertical-align:text-top; /*垂直对齐父元素的顶部*/

    vertical-align:text-bottom; /*垂直对齐父元素的底部*/

    top、bottom、text-top、text-bottom区别:

    <p style="font-size: 15px; text-decoration: overline ;">一个

                  <top>top对齐</top>

                  <span style="font-size: 30px; text-decoration: overline;">方式</span>

             </p>

             <p style="font-size: 15px; text-decoration: overline ;">一个

                  <ttop>text-top对齐</ttop>

                  <span style="font-size: 30px; text-decoration: overline;">方式</span>

             </p>

             <p style="font-size: 15px; text-decoration: overline ;">一个

                  <bottom>bottom对齐</bottom>

                  <span style="font-size: 30px; text-decoration: overline;">方式</span>

             </p>

             <p style="font-size: 15px; text-decoration: overline ;">一个

                  <tbottom>text-bottom对齐</tbottom>

                  <span style="font-size: 30px; text-decoration: overline;">方式</span>

             </p>

    运行结果:

    overflow:hidden;//隐藏文本溢出部分。

    white-space:nowrap;//对文本不换行。

    text-overflow:ellipsis;//溢出部分用省略表示(基于前两个属性都有的情况下)

    text-overflow:clip;//剪切。

    text-overflow:".....";//自定义格式。

    position:absolute;//设置文档的位置为绝对定位,relative表示相对定位。

    right:50px;//表示该元素距离右边元素的距离为50px,使用该元素必需设置position元素。

    z-index;/*指定元素的堆叠顺序*/

    clip:rect(top,right,bottom,left);/*剪切图形*/

    flex//flex布局,在使用flex布局的时候,需要将父容器的flex的display设置为“display:flex;”。

    title:"提示信息“   title元素用在指定的元素上,会出现提示信息。

  • 相关阅读:
    springboot2.04+mybatis-plus+swagger2+CodeGenerator
    1.Jenkins 在windows下的安装与配置
    .Net Core Linux centos7行—vscode开发,linux部署运行
    .Net Core Linux centos7行—安装nginx,运行静态网站
    .Net Core Linux centos7行—hyper-v安装linux系统和.net core sdk
    扩展htmlhelper.DropDownListFor 支持list数据源和option增加属性
    SignalR主动通知订阅者示例
    asp.net mvc HandleErrorAttribute 异常错误处理 无效!
    Microsoft.AspNet.Identity 自定义使用现有的表—登录实现
    asp.net mvc输出自定义404等错误页面,非302跳转。
  • 原文地址:https://www.cnblogs.com/mengmengi/p/10137056.html
Copyright © 2020-2023  润新知