美化盒子以及bootstrap的简单了解

 

美化文本

第一部分

1．字体大小【font-size】：含义：字符框的高度，可继承，默认值：medium；取值：预设值【了解】{medium：中等字号，larger：大字号，smaller：小字号}，数值{px【常用】：绝对字体大小，em【常用】：相对于父元素的字体大小，若没有父元素，则使用基准字号“基准字号：浏览器设置的默认字体大小，通常为16px，可更改”}，%：原理同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】属性，可以给文字划线

第二部分

1．修饰首字母【伪元素选择器  ::first-letter】，::first-letter】可选中元素中的第一个文字

2．修饰首行【伪元素选择器  ::first-line】；【::first-line】可选中元素中的第一行文字

3．修饰选中文字【伪元素选择器 ::selection】；【::selection】可选中被用户框选的文字

4．字体类型：概念：衬线字体和非衬线字体，修改字体类型【font-family】，使用【@font-face指令】加载web字体，使用图标字体

美化边框

1. 圆角边框【border-radius】圆角边框原理图
2. 使用圆角边框的常见场景，普通的圆角边框，，圆形边框，圆形图片

美化背景

背景图

1．使用【background-image】设置背景图片

2．使用【background-repeat】设置图片重复方式：repeat：【默认值】从左到右从上到下重复；no-repeat：不重复；repeat-x：仅在x轴方向上重复；repeat-y：仅在y轴方向上重复

3．使用【background-position】设置图片在边框盒中的位置：预设值（left、right、top、bottom、center），数值（使用数值可实现从雪碧图（Sprite）中取得部分图像）

4．使用【background-size】设置背景图尺寸

5．使用【background-attachment】固定背景图：scroll：【默认值】背景图跟随元素移动；fixed：背景图固定

6．使用速写属性【background】统一设置：background：背景图 位置 / 尺寸 重复方式 固定方式 背景颜色

7．使用多背景图

背景渐变

线性渐变：【background-image：linear-gradient(...)】

径向渐变（圆形渐变）：【background-image：radial-gradient(...)】

透明度和鼠标样式

透明度【opacity】和alpha通道

使用【opacity】属性，可调整整个盒子的透明度，该属性的取值范围是0~1 ，其中，0表示完全透明，1表示完全不透明，使用rgba颜色，可调整某个颜色的透明度，rgba分别表示，r：red；g：green，b：blue；a：alpha 书写格式：rgba（red，green，blue，alpha）其中alpha表示透明通道，取值是0~1之间0表示完全透明，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)，表示阴影的颜色

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)，表示阴影的颜色

 

盒子阴影【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关键字，可将阴影的扩散方向由向外变为向内

bootstrap的简单了解

1. 这是一款为所有开发者、所有应用场景而设计。
2. Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
3. 预处理脚本：虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。
4. 一个框架、多种设备：你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。
5. 特性齐全：Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
6. Bootstrap分为：起步、全局css样式、组件、JavaScript插件、定制、网站实例
7. 里面实用的代码分别为：栅格系统、排版、代码、表格、表单、按钮、图片、辅助类、响应式工具、使用less、、使用sass。