css 自动换行_前端必备!20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~
1. 文字水平居中
将一段文字置于容器的水平中点,只要设置text-align属性即可:
text-align:center;
2. 容器水平居中
先该容器设置一个明确宽度,然后将margin的水平值设为auto即可。
div#container {
width:760px;
margin:0 auto;
}
3. 文字垂直居中
单行文字的垂直居中,只要将行高与容器高设为相等即可。
比如,容器中有一行数字。
然后CSS这样写:
div#container
{height: 35px;
line-height: 35px;
}
如果有n行文字,那么将行高设为容器高度的n分之一即可。
4. 容器垂直居中
比如,有一大一小两个容器,请问如何将小容器垂直居中?
首先,将大容器的定位为relative。
div#big{
position:relative;
height:480px;
}
然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。
div#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
5. 图片宽度自适应
如何使得较大的图片,能够自动适应小容器的宽度?CSS可以这样写:
img {max-width: 100%}
6. 3D按钮
要使按钮具有3D效果,只要将它的左上部边框设为浅色,右下部边框设为深色即可。
div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}
7. font属性快捷写法
font快捷写法的格式为:
body {
font: font-style font-variant font-weight font-size line-height font-family;
}
所以,
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
font-variant: small-caps;
font-style: italic;
line-height: 150%;
}
可以被写成:
body {
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}
8. link状态设置顺序
link的四种状态,需要按照下面的前后顺序进行设置:
a:link
a:visited
a:hover
a:active
9. CSS优先性
如果同一个容器被多条CSS语句定义,那么哪一个定义优先呢?
基本规则是:
行内样式 > id样式 > class样式 > 标签名样式
比如,有一个元素:
行内样式是最优先的,然后其他设置的优先性,从低到高依次为:
div < .class < div.class < #id < div#id < #id.class < div#id.class
10. font-size基准
浏览器的缺省字体大小是16px,你可以先将基准字体大小设为10px:
body {font-size:62.5%;}
后面统一采用em作为字体单位,2.4em就表示24px。
h1 {font-size: 2.4 em}
11. Text-transform和Font Variant
Text-transform用于将所有字母变成小写字母、大写字母或首字母大写:
p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}
Font Variant用于将字体变成小型的大写字母(即与小写字母等高的大写字母)。
p {font-variant: small-caps}
12. CSS重置
CSS重置用于取消浏览器的内置样式,请参考YUI和Eric Meyer的样式表。
13. 用图片充当列表标志
默认情况下,浏览器使用一个黑圆圈作为列表标志,可以用图片取代它:
ul {list-style: none}
ul li {
background-image: url("path-to-your-image");
background-repeat: none;
background-position: 0 0.5em;
}
14. 透明
将一个容器设为透明,可以使用下面的代码:
.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
在这四行CSS语句中,第一行是IE专用的,第二行用于Firefox,第三行用于webkit核心的浏览器,第四行用于Opera。
15. CSS三角形
如何使用CSS生成一个三角形?
先编写一个空元素
然后,将它四个边框中的三个边框设为透明,剩下一个设为可见,就可以生成三角形效果:
.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
16. 禁止自动换行
如果你希望文字在一行中显示完成,不要自动换行,CSS命令如下:
h1 { white-space:nowrap; }
17. 用图片替换文字
有时我们需要在标题栏中使用图片,但是又必须保证搜索引擎能够读到标题,CSS语句可以这样写:
h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
18. 获得焦点的表单元素
当一个表单元素获得焦点时,可以将其突出显示:
input:focus { border: 2px solid green; }
19. !important规则
多条CSS语句互相冲突时,具有!important的语句将覆盖其他语句。由于IE不支持!important,所以也可以利用它区分不同的浏览器。
h1 {
color: red !important;
color: blue;
}
上面这段语句的结果是,其他浏览器都显示红色标题,只有IE显示蓝色标题。
20. CSS提示框
当鼠标移动到链接上方,会自动出现一个提示框。
链接文字 提示文字
CSS这样写:
a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}
如果你想了解更多关于CSS的技能和知识,欢迎来云和数据的HTML5全栈精英班免费试听哦~
关于我们
云和数据作为规模更大、更具影响力的紧缺、核心IT人才生态服务国家级高新技术企业,专注IT职业教育、云计算、大数据 、电子商务、跨境贸易、网络安全、AI、VR等领域研究与服务,先后投资建设郑州、深圳、西安、加拿大四大分中心,下设云和教育、云和技术、云和服务、云和国际四大事业部。
云和数据专注于国家紧缺、核心IT人才的培养。秉承“更好的IT学习、更好的就业”教育教学理念,不断完善和升级教学课程和教学环境,踏实、认真做好教育事业。年培养高端IT技术人才超10000人,累计为企业输送高端泛IT技术人才超5万人,其中60%来自于口碑推荐,以八大精品课程为基础,八大就业基地为依托,一次就业率98%,20%就业薪资超1W,平均薪资8.5K。自2013年起,云和数据深耕职业教育六年,致力于改变中国高端IT人才培养新标准,引领中国IT人才实践教学新模式。
css 自动换行_前端必备!20个CSS小技巧相关推荐
- Android 4.0操作系统的20个使用小技巧
为什么80%的码农都做不了架构师?>>> 安卓4.0操作系统,它的一大卖点就是整合所有硬件的使用体验,无论是低端智能手机还是高端智能手机,只要运行Android ICS操作系统 ...
- goland 20.1.1小技巧
golang 20.1.1小技巧磨刀不误砍柴工 版本号: Year.Major.Minor 2020 1 1 在命令行使用goland: 使用过vscode的 ...
- Windows XP的20个特殊小技巧
Windows XP的20个特殊小技巧 Windows系统中总有无尽的技巧可以供我们发掘,每次都有惊喜.看看这次给大家带来了什么? 1.在记事本中自动记录文件的打开时间 在记事本中,我们可以记录每次打 ...
- css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正 因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...
- 前端必备:五大css自动化生成网站(稀有级别!)
粉丝朋友们大家好,我是你们的 csdn的博主:lqj_本人 哔哩哔哩:小淼前端 另外,大家也可以关注我的哔哩哔哩账号,我会不定时的发布一些有关于全栈云开发以及前端开发的详解视频+源码 1.微信小程序腾 ...
- css 背景效果_前端初学大纲03~(CSS 概述)
第四章 CSS 概述 第一节 CSS代码语法 • CSS全称为层叠样式表(Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等 ...
- 前端:20个 CSS 快速提升技巧
本文涵盖了20个css技巧,可以解决许多工作中常见的问题. 1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准, ...
- 如何提升你的CSS技能?掌握这20个css技巧即可[完整版]
前言 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染.像Less.SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快.这里涵盖了20个css技巧来帮助 ...
- html css 布局_创建有吸引力HTML CSS动漫主题网站布局
html css 布局 Creating an Attractive HTML CSS Anime Theme Website Layout Today I will like to product ...
最新文章
- 如何使用MatPlotLib绘制出具有两个 Y 轴的曲线图?
- python写入中文、用utf-16编码得出二进制字节串_在python中将unicode UTF16数据写入文件时出现问题...
- Imageloader4-ImageLoader中的变量
- obj,lib,dll,exe
- 蓝桥杯练习系统习题-算法训练2
- .net core grpc 实现通信(一)
- Java——异常(try...catch...finally)
- ninjala还是显示服务器维护,Ninjala更新2.0版本 调整了武器平衡以及BUG修复
- 机器学习——LightGBM
- centos php 环境路径,路径(十四):在本地 CentOS 7 上搭建 Web 开发环境 — PHP
- android自动更新demo,Android程序自动更新功能模块的实现方法【附完整demo源码下载】...
- Sudoku Solver
- icem搅拌器网格划分_搅拌器研究所的第六个开放电影项目
- If 表达式和条件语句
- js vue 获取 (昨天、今天、明天) 时间
- 第一次课 优秀作业展示
- 深度和广度优先算法题
- Water Research | 南科大夏雨组揭示Anammox菌群微米级空间异质性和保守互作
- 山东教师教育网研修平台-首页
- Chrome-使用代理-proxy-SwitchySharp的安装与设置