Shulou(Shulou.com)06/01 Report--

This article focuses on "what are the practical web development CSS skills", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what are the practical web development CSS skills?"

To place a paragraph of text at the horizontal midpoint of the container, simply set the text-align property:

Text-align:center

First set the container to an explicit width, and then set the horizontal value of margin to auto.

Div#container {width:760px; margin:0 auto;}

The vertical center of a single line of text, as long as the line height is set to equal to the container height.

For example, there is a row of numbers in the container.

1234567890

Then CSS wrote:

Div#container {height: 35px; line-height: 35px;}

If there are n lines of text, set the line height to one nth of the container height.

For example, if there are two containers, one large and one small, how to center the small container vertically?

First, position the large container as relative.

Div#big {position:relative;height:480px;}

Then, position the small container as absolute, then move its upper-left corner down 50% along the y-axis, and finally margin-top up 50% of its height.

Div#small {position: absolute; top: 50%; height: 240px; margin-top:-120px;}

How to make a larger picture automatically adapt to the width of a small container? CSS can write as follows:

Img {max-width: 100%}

To make the button 3D, just set the upper left border to light and the lower right border to dark.

Div#button {background: # 888; border: 1px solid; border-color: # 999 # 777 # 999;}

The format of font shortcut writing is:

Body {font: font-style font-variant font-weight font-size line-height font-family;}

So,

Body {font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; font-variant: small-caps; font-style: italic; line-height: 150%;}

Can be written as:

Body {font: italic small-caps normal 13pxamp 150% Arial, Helvetica, sans-serif;}

The four states of link need to be set in the following order:

A:link a:visited a:hover a:active

If the same container is defined by multiple CSS statements, which definition takes precedence?

The basic rules are:

Inline style > id style > class style > signature style

For example, there is one element:

Inline style is the top priority, and then the priority of other settings, from low to high, is:

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 6Magazine 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 * /

The HTML code is as follows:

The CSS code is as follows:

.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%;}

Outer Shadow:

.shadow {- moz-box-shadow: 5px 5px 5px # ccc;-webkit-box-shadow: 5px 5px 5px # ccc; box-shadow: 5px 5px 5px # ccc;}

Inner Shadow:

.shadow {- moz-box-shadow:inset 00 10px # 000000;-webkit-box-shadow:inset 00 10px # 000000; box-shadow:inset 00 10px # 000000;}

Textarea {overflow: auto;}

This code will make your color photos appear as black and white photos, isn't it cool?

Img.desaturate {filter: grayscale;-webkit-filter: grayscale;-moz-filter: grayscale;-ms-filter: grayscale;-o-filter: grayscale;}

Add a border to each menu item first

/ * add border * / .nav li {border-right: 1px solid # 666;}

And then remove the last element.

/ / remove border /. Nav li:last-child {border-right: none;}

You can directly use the: not () pseudo class to apply the element:

.nav li:not (: last-child) {border-right: 1px solid # 666;}

This makes the code clean, easy to read, and easy to understand.

Of course, if your new element has a sibling element, you can also use the general sibling selector (~):

.nav li:first-child ~ li {border-left: 1px solid # 666;}

Here is a simple CSS3 snippet to add a nice top shadow to a web page:

Body:before {content: "; position: fixed;top:-10px; left: 0; width: 100% control height: 10px;-webkit-box-shadow: 0px 0px 10px rgba (0memo 0pc.8);-moz-box-shadow: 0px 0px 10px rgba (0memo 0pc.8); box-shadow: 0px 0px 10px rgba (0memo0pce.8); z-index: 100;}

You don't need to add line-height to each pMagee h tag separately, etc. Just add it to body so that text elements can easily inherit from body.

Body {line-height: 1;}

It's too easy to center all elements vertically: note: beware of flexbox in IE11.

Html, body {height: 100%; margin: 0;} body {- webkit-align-items: center;-ms-flex-align: center; align-items: center; display:-webkit-flex; display: flex;}

thirty。 Comma separated list

Make the HTML list item look like a real, comma-separated list, using the not () pseudo class for the last list item.

Ul > li:not (: last-child): after {content: ",";}

Use negative nth-child in CSS to select items 1 to n.

Li {display: none;} / * select items 1 through 3 and display them * / li:nth-child (- nasty 3) {display: block;}

There is no reason why we should not use SVG,SVG for icons with good scalability for all resolution types and support for all browsers to return to IE9. This avoids .png, .jpg, or .gif files.

.logo {background: url ("logo.svg");}

Sometimes fonts don't work best on all devices, so you can ask the device browser to help you:

Html {- moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}

Note: please use optimizeLegibility responsibly. In addition, IE / Edge does not have text-rendering support.

Use max-height and overflow hiding to implement the CSS-only slider:

.slider ul {max-height: 0; overlow: hidden;}. Slider:hover ul {max-height: 1000px; transition: .3s ease;}

Let box-sizing inherit html:

Html {box-sizing: border-box;} *, *: before, *: after {box-sizing: inherit;}

This makes it easier to change the box-sizing in other components of plug-ins or other behaviors of leverage.

Tables are troublesome to work with, so be sure to use table-layout: fixed as much as possible to keep cells equal in width:

.calendar {table-layout: fixed;}

When you need to use column delimiters, you can get rid of the hack of nth-,first-, and last-child through the space-between property of flexbox:

.list {display: flex; justify-content: space-between;} .list .person {flex-basis: 23%;}

The list delimiter now appears at evenly spaced locations.

Displays a link when the an element has no text value, but the href attribute has a link:

A [href ^ = "http"]: empty::before {content: attr (href);}

It's quite convenient.

HTML:

Double click me

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; 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;}

The use of calc () is similar to a function, which sets dynamic values for elements:

/ * basic calc * / .simpleBlock {width: calc;} / * calc in calc * / .complexBlock {width: calc / 3); padding: 5px calc (3-2px); margin-left: calc (10% + 10px);}

Text gradients are very popular, and you can easily achieve them with 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), color-stop (50%, rgba), to (rgba)

CSS3's new pointer-events allows you to disable mouse events for elements, for example, a connection cannot be clicked if it is set to the following style.

.disabled {pointer-events: none;}

Simple but beautiful text blur effect, simple and good-looking!

.blur {color: transparent; text-shadow: 0 0 5px rgba

.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 position color: red;font-size: 1.4 ddd;font-family background: # color: 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} or a {outline: 0}

.element {filter:alpha (opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5 position opacity: 0.5;}

A:after {content: "(" attr (href) ")";} this displays URL after the link anchor. You can also define it in fonts or other styles.

Ul {list-style: none} ul li {background-image: url ("path-to-your-image"); background-repeat: none;background-position: 0 0.5m;}

H2 {white-space:nowrap;}

Input:focus {border: 2px solid green;}

Div {user-select: none; / * Standard syntax * /}

* {- webkit-tap-highlight-color: rgba (0memo 0pr 0j0);}

.btn:: befoer {content: "; position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;}

Inline-element:: after {content: "A"; white-space: pre;}

/ * key value * / will-change: auto;will-change: scroll-position;will-change: contents;will-change: transform; / * example * / will-change: opacity; / * example * / will-change: left, top / * two examples * / will-change should also be used carefully, follow the principle of minimizing impact, and do not write this directly in the default state, because will-change will always hang: .will-change {will-change: transform;transition: transform 0.3s;} .will-change:hover {transform: scale (1.5) } you can have the parent element hover declare will-change, so that it will automatically remove when it is moved out, and the scope of the trigger is basically the range of valid elements. .will-change-parent:hover. Will-change {will-change: transform;}. Will-change {transition: transform 0.3s;}. Will-change:hover {transform: scale

{box-sizing: border-box;}

The example of div {width: calc (100%-100px);} is to make the width 100% minus the value of 100px.

/ / No line wrapping white-space:nowrap;// automatic line wrapping word-wrap: break-word;word-break: normal;// forced line wrapping word-break:break-all

The existence of this attribute determines whether the element you see is 2d or 3D. It is generally set on the parent class of the package element. .div-box {perspective: 400px;}

Opcity:0.6;background:rgba (0pr 0re0pl .6)

The position attribute specifies the type of positioning method for an element (static, relative, absolute, or fixed). Attribute values of position: absolute: elements that generate absolute positioning; fixed: elements that generate absolute positioning, relative to the browser window; relative: elements that generate relative positioning, which are positioned relative to their normal positions. Z-index: specifies the stacking order of an element.

The cursor attribute defines the shape of the cursor used when the mouse pointer is placed within the boundary of an element. CSS provides cursorvalues: pointer: pinky; help: arrow with question mark; wait: circle; move: move cursor; crosshair: crosshairs. Through the pointer attribute, we can forge a hyperlink: pointer

Video [autoplay]: not ([muted]) {display: none;}

/ * assuming that the default size of the browser is 16px, first set it to 10px (font-size:10/16) * / body {font-size:10/16;} / * and then you can use em as the uniform font unit 2.4em = 24px * / H2 {font-size: 2.4em}

.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 * /}

Use the skew () tilt attribute in css3's 2D deformation to tilt the pseudo element instead of the li in order to make the li text display properly.

.keith li {list-style: none; position: relative; display: inline-block; padding: 10px 15px; color: # fff; cursor: pointer;} .keith li::after

{content:''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; border-radius: 5px; z-index:-1; background: # 2175BC; transform: skewX (- 25deg);}. Keith li:hover::after

{background: # 39a3f5;} Home Notes ask for Learning Settings

Use perspective (), rotateX (), transform-origin in css3 3D deformation.

Perspective (): used to set the distance between the user and the element 3D space Z plane. The smaller the value, the closer the user is to the 3D space Z plane, and the visual effect will be obvious; conversely, the higher the value, the farther the distance between the user and the 3D space Z plane, the smaller the visual effect.

RotateX (): rotation of the X axis in 3D space

Tansform-origin: specifies the location of the rotation center point of the element, which can control the trapezoidal tilt. The value is bottom, not tilted; the value is left, left tilt; the value is right, right tilt.

.keith li {list-style: none; position: relative; display: inline-block; padding: 20px 15px 5px 15px; margin-left:-10px; color: # fff; cursor: pointer;} .keith li::after

{content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index:-1; background: # 2175BC; border: 1px solid # fff; border-top-right-radius: 8px; border-top-left-radius: 8px; transform: perspective (0.5em) rotateX (5deg); transform-origin: bottom;}. Keith li:hover::after {background: # 39a3f5;}

Ask about the learning settings on the home page.

At this point, I believe you have a deeper understanding of the "practical web development CSS skills", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.