美化盒子和文本字体

Posted lyl-0667

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了美化盒子和文本字体相关的知识,希望对你有一定的参考价值。

美化盒子
一、美化文本
第一部分
1、字体大小:font-size
  含义:字符框的高度,可继承,默认值:medium
  取值:
    1、预设值:medium:中等字号
    larger:大字号
    smaller:小字号
    2、数值:px【常用】:绝对字体大小
    em【常用】:相对于父元素的字体大小,若没有父元素,则使用基准字号
    %:原理同em,例如200%,相当于2em,50%,相当于.5em
    rem:相对于基准字号
2、加粗字体:font-weight
  将font-weight 设置为 bold ,以加粗文字,该属性可继承
3、倾斜字体:font-style
  将font-style设置为italic,以倾斜文字,该属性可继承
4、字间距:letter-spacing
  设置letter-spacing的值为px或em,可控制文字间的间隙,该属性可继承
5、首行缩进:text-indent
  可实现第一个文字向后缩进
6、给文字划线:text-decoration
  设置text-decoration属性,可以给文字划线
  text-decoration:none:默认值,没有下划线
  text-decoration:overline:文字顶部划线
  text-decoration:underline:文字底部划线
  text-decoration:line-through 文字中部划线 删除线
  del元素:用于表达不精确的内容。浏览器默认样式表中,对该元素会使用【text-decoration:line-through】

第二部分
1、修饰首行:伪元素选择器 ::first-line
  ::first-line可选中元素中的第一行文字
2、修饰选中文字:伪元素选择器 ::selection
  ::selection可选中被用户框选的文字
3、字体类型
  概念:衬线字体和非衬线字体
  非衬线字体(sans-serif)文字边缘未经过修饰,在电子设备上视觉效果
  衬线字体(serif)文字边缘经过修饰,在纸张上视觉效果良好
修改字体类型font-family
  该元素的字体设置:【font-family: "翩翩体-简","consolas","sans-serif"】
  设置font-family的时候,可设置多个值
  浏览器会依次读取设置的值,若一个值失效,则读取下一个值
  因此,为了避免全部都失效的情况,通常将最后一个值设置为"sans-serif"或"serif"
  由于font-family属性是可继承的属性,并且一个网页通常情况下字体都是统一的,因此,通常对body元素使用font-family属性即可
  使用【@font-face指令】加载web字体
使用图标字体

二、美化边框
1、圆角边框border-radius

  事实上,border-radius是一个速写属性,真实的属性如下:

  border-top-left-radius:左上角样式

  border-top-right-radius:右上角样式

  border-bottom-left-radius:左下角样式

  border-bottom-right-radius:右下角样式

  但通常情况下,我们都是使用border-radius进行统一设置。


  圆角边框原理图
  技术图片

2、使用圆角边框的常见场景
1、普通的圆角边框
2、圆形边框
3、圆形图片

三、美化背景
1、背景图:
1、使用【background-image】设置背景图片
2、使用【background-repeat】设置图片重复方式
1、repeat:【默认值】从左到右从上到下重复
2、no-repeat:不重复
3、repeat-x:仅在x轴方向上重复
4、repeat-y:仅在y轴方向上重复
3、使用【background-position】设置图片在边框盒中的位置
预设值:
background-position:left top;背景图位于左上
background-position:center bottom;背景图位于水平居中底部
background-position:center center;背景图居中
数值:
background-position:20px 10px;距离左边20px ,顶部10px
background-position:-20px 10px 超出左边20px 顶部10px
使用数值可实现从雪碧图(Sprite)中取得部分图像
4、使用【background-size】设置背景图尺寸
预设值:
background-size:contain;图片占满块的一边就停止
background-size:cover;图片占满整个块
background-size:200px 200px 图片长宽为200px
background-size:100% 100% 图片为占满整个块
background-size:100% auto 长度为块的长度,高度自适应
5、使用【background-attachment】固定背景图
scroll:【默认值】背景图跟随元素移动
fixed:背景图固定
6、使用速写属性【background】统一设置
background:背景图 位置 / 尺寸 重复方式 固定方式 背景颜色
7、使用多背景图
示例:

background:    url("imgs/scroll_top.jpg") no-repeat ,
url("imgs/scroll_middle.jpg") repeat-y,
url("imgs/scroll_bottom.jpg") no-repeat
;

 


2、背景渐变
1、线性渐变:【background-image:linear-gradient(...)】
2、径向渐变(圆形渐变):【background-image:radial-gradient(...)】
示例:

<style type="text/css">
pclear: both;
divoutline: 5px solid #000; width: 400px; height: 300px; float: left; margin: 10px; text-align: center; line-height: 2; font-size:20px; color:#fff;
.c1background-image:linear-gradient(to right, red, blue);
.c2background-image:linear-gradient(to bottom, red, blue);
.c3background-image:linear-gradient(45deg, red, blue);
.c4background-image:linear-gradient(to right, red, blue, green);
.c5background-image:linear-gradient(to right, red, blue 130px, green 200px);
.c6background-image:linear-gradient(to bottom, red, red 50%, blue 50%);
.c7background-image:repeating-linear-gradient(to right, red, blue 50px, red 100px);
.c8background-image:repeating-linear-gradient(to right, red, red 50px, blue 50px, blue 100px);

</style>
</head>
<body>
<div class="c1">background-image:<br>linear-gradient(to right, red, blue);</div>
<div class="c2">background-image:<br>linear-gradient(to bottom, red, blue);</div>
<div class="c3">background-image:<br>linear-gradient(45deg, red, blue);
<br>
<img src="imgs/deg.png" style="width:300px;">
</div>
<p></p>
<div class="c4">background-image:<br>linear-gradient(to right, red, blue, green);</div>
<div class="c5">background-image:<br>linear-gradient(to right, <br>red, <br>blue 130px, <br>green 200px);</div>
<div class="c6">background-image:<br>linear-gradient(to bottom, <br>red, <br>blue 50%, <br>green 50%);</div>
<p></p>
<div class="c7">background-image:<br>repeating-linear-gradient(to right,<br>red, <br>blue 50px, <br>red 100px);</div>
<div class="c8">background-image:<br>repeating-linear-gradient(to right, <br>red, <br>red 50px, <br>blue 50px, <br>blue 100px)</div>

</body>
</html>

 


**四、透明度和鼠标样式**
1、透明度【opacity】和alpha通道
2、鼠标样式

示例:

<style type="text/css">
bodybackground:url("imgs/bg.jpg");
divborder: 10px solid #000; width: 600px; float: left; height: 300px; margin: 10px; text-align: center; line-height: 2; font-size:20px; color:#fff; background: red;
.c1opacity: 0.5
.c2background:rgba(255,0,0,0.5);
border-color:rgba(0,0,0,0.6);
color:rgba(255,255,255,0.8);
</style>
</head>
<body>
<div class="c1">
使用【opacity】属性,<br>
可调整整个盒子的透明度<br>
该属性的取值范围是0~1 <br>
其中,0表示全透明,1表示完全不透明
</div>
<div class="c2">
使用rgba颜色,可调整某个颜色的透明度,<br>
rgba分别表示:
r:red,g:green,b:blue,a:alpha<br>
书写格式为:rgba(red, green, blue, alpha)<br>
其中,alpha表示透明通道,取值是0~1之间<br>
0表示全透明,1表示完全不透明<br>
也可以用十六进制表示,例如rgba(0,0,0,0.5)可以写成#00000080
</div>
<div class="">

</div>

</body>
</html>

 



**五、阴影**

1、文字阴影【text-shadow】
text-shadow: 2px 2px 4px rgba(0,0,0,.5)
第1个参数:2px,表示阴影的位置向x轴方向(横坐标)的偏移量为2px
第2个参数:2px,表示阴影的位置向y轴方向(横坐标)的偏移量为2px
第3个参数:4px,表示阴影的模糊半径,该数值越大,阴影越模糊
第4个参数:rgba(0,0,0,.5),表示阴影的颜色
2、盒子阴影【box-shadow】
box-shadow: 4px 5px 6px rgba(0,0,0,.5)
box-shadow和text-shadow的用法非常类似
它的4个参数分别表示:x轴的偏移量、y轴的偏移量、模糊半径、阴影颜色

box-shadow: 4px 5px 6px 7px rgba(0,0,0,.5)
多了一个参数,最后一个 7px 表示阴影的扩散半径,该值越大,阴影越大

使用该方式可制作一个以盒子为中心的扩散阴影
box-shadow: 0px 0px 6px 7px rgba(0,0,0,.5)

box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,.5)
加入 inset 关键字,可将阴影的扩散方向由向外变为向内

以上是关于美化盒子和文本字体的主要内容,如果未能解决你的问题,请参考以下文章

美化盒子

CSS核心知识点

美化边框和文本

字体属性和文本属性

文本美化

代码神器,美化你的课程报告