HTML之美化盒子
1. 美化盒子
1.1. 美化文本
1.1.1. 字体大小【font-size】:
字符框的高度,可继承,默认值medium,16px。基准字号:浏览器设置的默认字体大小,通常为16px,可更改。
预设值 |
|
medium |
中等字号 |
large |
大字体 |
Smaller |
小字号 |
数值 |
|
px【常用】 |
绝对字体大小 |
em【常用】 |
相对于父元素的字体大小,若没有父元素,则使用基准字号 |
% |
原理同em,例如200%,相当于2em,50%,相当于.5em |
rem |
相对于基准字号 |
1.1.2. 加粗字体【font-weight】
将【font-weight】设置为【bold】,以加粗文字,该属性可继承,数值从100到900取整。
1.1.3. 倾斜字体【font-style】
将【font-style】设置为【italic】,以倾斜文字,该属性可继承。
1.1.4. 字间距【letter-spacing】
设置【letter-spacing】的值为px或em,可控制文字间的间隙,该属性可继承。
1.1.5. 首行缩进【text-indent】
可实现第一个文字向后缩进。
1.1.6. 给文字划线【text-decoration】
设置【text-decoration】属性,可以给文字划线。取值为underline,line-through,overline。
1.1.7. 修饰首字母【伪元素选择器 ::first-letter】
【::first-letter】可选中元素中的第一个文字
1.1.8. 修饰首行【伪元素选择器 ::first-line】
【::first-line】可选中元素中的第一行文字。
1.1.9. 修饰选中文字【伪元素选择器 ::selection】
【::selection】可选中被用户框选的文字。
1.1.10. 字体类型
概念:衬线字体和非衬线字体,修改字体类型【font-family】,使用【@font-face指令】加载web字体,使用图标字体。
1.2. 美化边框
圆角边框【border-radius】,普通的圆角边框,圆形边框,圆形图片。
1.3. 美化背景
1.3.1. 背景图
使用【background-image】设置背景图片。
使用【background-repeat】设置图片重复方式。
repeat |
【默认值】从左到右从上到下重复 |
no-repeat |
不重复 |
repeat-x |
仅在x轴方向上重复 |
repeat-y |
仅在y轴方向上重复 |
使用【background-position】设置图片在边框盒中的位置,默认值为左上。
预设值 |
left、right、top、bottom、center |
数值 |
使用数值可实现从雪碧图(Sprite)中取得部分图像 |
示例:
使用【background-size】设置背景图尺寸。
预设值 |
contain,cover |
数值 |
200px 200px;100% 100%,100% auto |
使用【background-attachment】固定背景图
scroll |
【默认值】背景图跟随元素移动 |
fixed |
背景图固定 |
使用速写属性【background】统一设置:background:背景图 位置 / 尺寸 重复方式 固定方式 背景颜色
1.3.2. 背景渐变
线性渐变:【background-image:linear-gradient(...)】径向渐变(圆形渐变):【background-image:radial-gradient(...)】。
1.4. 透明度和鼠标样式
透明度【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表示完全不透明,也可以用十六进制表示,例如rgba(0,0,0,0.5)可以写成#00000080
1.5. 阴影
文字阴影【text-shadow】,盒子阴影【box-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),表示阴影的颜色
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关键字,可将阴影的扩散方向由向外变为向内。
HTML之美化盒子的更多相关文章
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- 点击盒子选中里面的单选框,并给盒子添加相应样式,美化单选框、复选框样式css用法,响应式滴
pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- Jquery制作--美化下拉框
平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...
- CSS自学笔记(10):CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- css美化页面
css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...
- 使用css3美化复选框
声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- WEB入门.六 盒子模型
学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...
- CSS美化自己的完美网页
CSS美化自己的完美网页 CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的h ...
随机推荐
- 关于go module
从Go 1.11开始引入module,用于版本管理. 通过使用module,工程目录的位置不用必须放在GOPATH下. 当前版本是1.13,下文中将以Go1.13为例介绍module. 在Go 1.1 ...
- JAVA 基础编程练习题8 【程序 8 输入数字求和】
8 [程序 8 输入数字求和] 题目:求 s=a+aa+aaa+aaaa+aa...a 的值,其中 a 是一个数字.例如 2+22+222+2222+22222(此时共有 5 个 数相加),几个数相加 ...
- php进程创建慢导致的502
转自: 作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除地址:http://www.jackxiang.com/post/926 ...
- 上传NUnit的单元测试结果和OpenCover的单元测试覆盖率到SonarQube服务中
SonarQube.Scanner.MSBuild.exe begin /k:"OMDCCQuotes" /d:sonar.host.url="http://myip:9 ...
- JavaScript基本入门02
目录 JavaScript基础入门 02 条件语句 if 语句 if .. else 语句 switch 结构 循环语句 while 循环 continue 关键字 do...while语句 for ...
- 鸟哥私房菜基础篇:磁碟配额(Quota)与进阶文件系统管理习题
猫宁!!! 参考:http://cn.linux.vbird.org/linux_basic/0420quota.php 1-在前一章的第一个大量新增帐号范例中, 如果我想要让每个用户均具有 soft ...
- Zabbix介绍及安装(1)
Zabbix的介绍 一.什么是zabbix及优缺点(对比cacti和nagios) Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种 ...
- 【VS开发】关于线程安全一些细节体会
[VS开发]关于线程安全一些细节体会 标签(空格分隔): [VS开发] 利用C++进行GUI界面开发,最大的问题往往是多线程安全问题,由于C++不具备收集内存垃圾的功能,所以必须由程序员负责维护,因此 ...
- 使用sequelize-auto生成sequelize的Models
一.全局安装sequelize-auto npm install -g sequelize-auto 二.全局安装对应数据库的驱动,此处使用的是mysql npm install -g mysql 三 ...
- Rectangle
题目描述 在 x 轴上有相互挨着的矩形, 这些矩形有一个边紧贴着 x 轴,现在给出每个矩形的长宽, 所有的矩形看作整体当作一个画布, 则可以在这个画布上画出的最大的矩形的面积是多少.(画出的矩形长和高 ...