CSS颜色及文本字体

• CSS颜色及文本字体
  • CSS颜色表示法
  • CSS文本设置
  • 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;