189 8069 5689
本篇内容主要讲解“实用的web开发CSS技巧有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“实用的web开发CSS技巧有哪些”吧!
创新互联建站是一家专业提供鹿寨企业网站建设,专注与成都做网站、网站制作、H5高端网站建设、小程序制作等业务。10年已为鹿寨众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
将一段文字置于容器的水平中点，只要设置text-align属性即可：
text-align:center;
先该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
div#container { width:760px; margin:0 auto; }
单行文字的垂直居中，只要将行高与容器高设为相等即可。
比如，容器中有一行数字。
然后CSS这样写：
div#container {height: 35px; line-height: 35px;}
如果有n行文字，那么将行高设为容器高度的n分之一即可。
比如，有一大一小两个容器，请问如何将小容器垂直居中？
首先，将大容器的定位为relative。
div#big{position:relative;height:480px; }
然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。
div#small { position: absolute; top: 50%; height: 240px; margin-top: -120px; }
如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写：
img {max-width: 100%}
要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。
div#button { background: #888; border: 1px solid; border-color: #999 #777 #777 #999; }
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; }
link的四种状态，需要按照下面的前后顺序进行设置：
a:link a:visited a:hover a:active
如果同一个容器被多条CSS语句定义，那么哪一个定义优先呢？
基本规则是：
行内样式 > id样式 > class样式 > 标签名样式
比如，有一个元素：
行内样式是最优先的，然后其他设置的优先性，从低到高依次为：
div < .class < div.class < #id < div#id < #id.class < div#id.class
浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px：
body {font-size:62.5%;}
后面统一采用em作为字体单位，2.4em就表示24px。
h2 {font-size: 2.4 em}
Text-transform用于将所有字母变成小写字母、大写字母或首字母大写：
p {text-transform: uppercase} p {text-transform: lowercase} p {text-transform: capitalize}
Font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母）。
p {font-variant: small-caps}
CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。
默认情况下，浏览器使用一个黑圆圈作为列表标志，可以用图片取代它：
ul {list-style: none} ul li { background-image: url("path-to-your-image"); background-repeat: none; background-position: 0 0.5em; }
将一个容器设为透明，可以使用下面的代码：
.element { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
在这四行CSS语句中，第一行是IE专用的，第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。
如何使用CSS生成一个三角形？
先编写一个空元素
然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：
.triangle { border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px; }
如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：
h2 { white-space:nowrap; }
有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写：
h2 { text-indent:-9999px; background:url("h2-image.jpg") no-repeat; width:200px; height:50px; }
当一个表单元素获得焦点时，可以将其突出显示：
input:focus { border: 2px solid green; }
多条CSS语句互相冲突时，具有!important的语句将覆盖其他语句。由于IE不支持!important，所以也可以利用它区分不同的浏览器。
h2 { color: red !important; color: blue; }
上面这段语句的结果是，其他浏览器都显示红色标题，只有IE显示蓝色标题。
当鼠标移动到链接上方，会自动出现一个提示框。
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;}
/* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */
HTML代码如下：
CSS代码如下：
.logo { display: block; text-align: center; display: block; text-align: center; vertical-align: middle; border: 4px solid #dddddd; padding: 4px; height: 74px; width: 74px; } .logo * { display: inline-block; height: 100%; vertical-align: middle; } .logo .photo { height: auto; width: auto; max-width: 100%; max-height: 100%; }
外阴影：
.shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; }
内阴影：
.shadow { -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000; }
textarea { overflow: auto; }
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？
img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
先给每一个菜单项添加边框
/* add border */.nav li { border-right: 1px solid #666;}
然后再除去最后一个元素
// remove border /.nav li:last-child { border-right: none;}
可以直接使用 :not() 伪类来应用元素：
.nav li:not(:last-child) { border-right: 1px solid #666;}
这样代码就干净，易读，易于理解了。
当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：
.nav li:first-child ~ li { border-left: 1px solid #666;}
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：
body:before { content: ""; position: fixed;top: -10px; left: 0; width: 100%;height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可,这样文本元素就可以很容易地从 body 继承。
body { line-height: 1;}
要将所有元素垂直居中，太简单了：注意：在IE11中要小心flexbox。
html, body { height: 100%; margin: 0;}body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;}
30. 逗号分隔的列表
让HTML列表项看上去像一个真正的，用逗号分隔的列表,对最后一个列表项使用 :not() 伪类。
ul > li:not(:last-child)::after { content: ",";}
在CSS中使用负的 nth-child 选择项目1到项目n。
li { display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;}
我们没有理由不对图标使用SVG，SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
.logo { background: url("logo.svg");}
有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。
使用 max-height 和溢出隐藏来实现只有CSS的滑块：
.slider ul { max-height: 0; overlow: hidden;}.slider:hover ul { max-height: 1000px; transition: .3s ease;}
让 box-sizing 继承 html：
html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}
这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：
.calendar { table-layout: fixed;}
当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：
.list { display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;}
现在，列表分隔符就会在均匀间隔的位置出现。
当a元素没有文本值，但 href 属性有链接的时候显示链接：
a[href^="http"]:empty::before { content: attr(href);}
相当方便。
HTML：
CSS：
.test3 span { position: relative;}.test3 span a { position: relative; z-index: 2;}.test3 span a:hover, .test3 span a:active { z-index: 4;}.test3 span input { background: transparent; border: 0; cursor: pointer; position: absolute; top: -1px; left: 0; width: 101%; /* Hacky */ height: 301%; /* Hacky */ z-index: 3;}.test3 span input:focus { background: transparent; border: 0; z-index: 1;}
/* create an arrow that points up */div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* left arrow slant */ border-right:5px solid transparent; /* right arrow slant */ border-bottom:5px solid #2f2f2f; /* bottom, add background color here */font-size:0px; line-height:0px;}/* create an arrow that points down */div.arrow-down { width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #2f2f2f;font-size:0px; line-height:0px;}/* create an arrow that points left */div.arrow-left { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-right:5px solid #2f2f2f; /* bottom, add background color here */ font-size:0px; line-height:0px;}/* create an arrow that points right */div.arrow-right { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-left:5px solid #2f2f2f;/* bottom, add background color here */ font-size:0px; line-height:0px;}
calc() 用法类似于函数，能够给元素设置动态的值：
/* basic calc */.simpleBlock { width: calc(100% - 100px);}/* calc in calc */.complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px);}
文本渐变效果很流行，使用 CSS3 能够很简单就实现：
h3[data-text] { position: relative;}h3[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
.disabled { pointer-events: none; }
简单但很漂亮的文本模糊效果，简单又好看！
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
.content img {height:auto;width:500px;}
.shadow {-moz-box-shadow: 3px 3px 5px 6px #ccc;-webkit-box-shadow: 3px 3px 5px 6px #ccc;box-shadow: 3px 3px 5px 6px #ccc;}
p:first-letter {display: block;float: left;margin: 5px 5px 0 0;color: red;font-size: 1.4em;background: #ddd;font-family: Helvetica;}
#content img {-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}
a {outline: none}或者a {outline: 0}
.element {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}
a:after{content:" (" attr(href) ") ";}这会在链接锚点后显示URL。你也可以用字体或其他样式定义它。
ul {list-style: none}ul li {background-image: url("path-to-your-image");background-repeat: none;background-position: 0 0.5em;}
h2 { white-space:nowrap; }
input:focus { border: 2px solid green; }
div {user-select: none; /* Standard syntax */}
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn::befoer{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;}
inline-element ::after{content:"A";white-space: pre;}
/* 关键字值 */will-change: auto;will-change: scroll-position;will-change: contents;will-change: transform; /*
{box-sizing: border-box;}
div {width: calc(100% - 100px);}例子就是让宽度为100%减去100px的值
//不换行white-space:nowrap;//自动换行word-wrap: break-word;word-break: normal;//强制换行word-break:break-all;
这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。.div-box {perspective: 400px;}
opcity:0.6；background:rgba(0,0,0,.6)；
position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。position的属性值：absolute：生成绝对定位的元素；fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；relative：生成相对定位的元素，相对于其正常位置经行定位。z-index：指定一个元素的堆叠顺序。
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。CSS提供的cursor值：pointer ：小手指；help：箭头加问号；wait：转圈圈；move：移动光标；crosshair：十字光标。通过pointer属性我们可以伪造超链接：pointer
video[autoplay]:not([muted]) {display: none;}
/* 假设浏览器的默认的大小是 16px ， 首先将其设置为10px (font-size:10/16) */body {font-size:10/16;}/* 然后就可以用em做统一字体单位了 2.4em = 24px */h2 {font-size: 2.4 em}
.element {filter:alpha(opacity=50); /* for ie */-moz-opacity:0.5; /* for ff */-khtml-opacity: 0.5; /* for webkit as chrome */opacity: 0.5; /* for opera */}
使用css3 的 2D变形中的 skew() 倾斜属性，让伪元素倾斜而不是li倾斜，是为了让li的文本正常显示。
使用css3 3D 变形中的 perspective()、rotateX()、transform-origin。
perspective(): 用于设置用户和元素3D空间Z平面之间的距离，值越小，用户与3D空间Z平面距离越近，视觉效果会明显；反之，值越大，用户与3D空间Z平面距离越远，视觉效果越小。
rotateX(): 3D空间上X轴的旋转
tansform-origin: 指定元素的旋转中心点位置，可以控制梯形倾斜。值为bottom，不倾斜；值为left，左倾斜；值为right，右倾斜。
到此，相信大家对“实用的web开发CSS技巧有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！