zoukankan      html  css  js  c++  java
  • CSS颜色及文本字体

    CSS颜色及文本字体

    CSS颜色表示法

    • 颜色名表示,比如:red 红色,yellow黄色,pick粉色

    • 16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00

    • RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化 background-color: rgb(200,100,0);

    • RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A) background-color: rgba(0,0,0,0.5);

    16进制: 0-9 a-f

    rgb的值:0-255

    CSS文本设置

    常用的应用文本的css样式:

    color 设置文字的颜色

    font-size 设置文字的大小

    font-family 设置文字的字体

    font-style 设置字体是否倾斜

    line-height 设置文字的行高

    text-decoration 设置文字的下划线

    text-indent 设置文字首行缩进

    text-align 设置文字水平对齐方式

    color:red;

    font-size:12px;

    font-family:'微软雅黑';

    font-style:'normal'; 设置不倾斜

    font-style:'italic';设置文字倾斜

    font-weight:bold; 设置加粗

    font-weight:normal 设置不加粗

    line-height:24px;

    text-decoration:none; 将文字下划线去掉

    text-indent:24px; 设置文字首行缩进24px

    text-align:center 设置文字水平居中

    CSS边框属性

    • border:宽度 样式 颜色;

    border: 1px solid red;

    样式:solid实线,dotted点状线,dashed虚线

    • 属性的顺序可以自由改变

    border: red 1px solid;

    • 可以单独设置一项属性或一条边

    border-top-color: red;

    • border-radius:圆角处理
    • 只给一个属性值默认设置四个角
    • 给两个值设置对角,第一个设置左上和右下,第二个设置右上和左下
    • 给四个属性值按照顺时针方法设置四个角,从左上开始。

    border-radius: 30px;

    border-radius: 20px 40px;

    border-radius: 10px 20px 30 px 40px;

    • box-shadow: 阴影设置
      • 第一个值:设置水平方向位移 正直往右偏移 负值往左偏移
      • 第二个值:设置垂直方向位移 正直向下 负值向上
      • 第三个值:设置模糊程度
      • 第四个值:设置扩散范围
      • 第五个值:设置阴影颜色
      • 第六个值:设置是否为内阴影 如果为内阴影就设置insert如果不设置内阴影可以不写

    box-shadow:-10px -20px 30px 40px red inset

    背景属性

    • background-color: 背景颜色

      background-color:red;

      background:green

    • background-image: 背景图片

      bckground-image:url(.example.jpg);

      background:url(./example.jpg);

    • background-repeat:是否重复,如何重复?(平铺)

      background-repeat:no-repeat;

    • background-position:定位

      • 第一个值:水平方向
      • 第二个值:垂直方向

      background-position:10px -20px;

    • background-size: 背景大小

      • 第一个值:宽度
      • 第二个值:高度

      background-size:100px 50px;

    元素溢出

    当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。

    overflow的设置项:

    • visible 默认值。内容不会被修剪,会呈现在元素框之外。
    • hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
    • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

    overflow:hidden;

    overflow:scroll;

    overflow:auto;

  • 相关阅读:
    spring配合junit测试 initializationError 错误
    hashmap为什么不安全
    关于使用iframe标签自适应高度的使用
    关于highcharts(功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库)
    富文本web编辑器(UEditor)
    css行级块级区别总结摘录
    jquery mobile 主题
    jquery mobile selectmenu下拉菜单
    jquery mobile popup 弹出窗口
    jquery mobile navbar
  • 原文地址:https://www.cnblogs.com/aduner/p/12207159.html
Copyright © 2011-2022 走看看