码迷,mamicode.com
首页 > Web开发 > 详细

CSS颜色及文本字体

时间:2020-01-17 23:04:56      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:rgba   一个   如何   example   order   不可   内容   显示   margin   

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;

CSS颜色及文本字体

标签:rgba   一个   如何   example   order   不可   内容   显示   margin   

原文地址:https://www.cnblogs.com/aduner/p/12207159.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!