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

What are the knowledge points of this article "what are the contents of the CSS form?" most people do not understand, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the contents of the CSS form?"

1. Form box type radio box, check box Drop-down box male and female banana cucumber eggplant wax gourd Beijing people Xi'an people Dalian people Fuzhou people Zhengzhou people File upload: file upload avatar: please fill in the relevant data 2. Form attribute input attribute user name: password: age: mailbox: class: nationality: 3. Three methods of introducing css into css Learning css P {color:blue }

Learn css today.

Learn css today.

We had a good time.

I am link my.cssa {font-size:100px;} 4. Selector 4.1 Common selector common selector / * tag selector * / H2 {color:cyan} / * class selector * / .one {color:green;} / * ID selector * / # two {color:red } / * combination selector * / h 2 color:gray; h 3 color:gray; h 4 h 5 {color:gray;} / * the more specific you specify, the higher the priority is * / h2.one {color:gray;} h3#two {color:greenyellow 1 tag 111 1 tag 222 2 tag 333 I am span I am the priority font {color:greenyellow;} .one {color:blue;} # two {color: indigo;} font {colorblogreenyellowship of the h4 tag aoe4.2 selector priority selector Priority of} selector 4.3.Relational selector / * multiline comments * / ul li / * include selector / descendant selector * / {color:darkslateblue;} ul > li / * parent-child selector * / {color:yellow } ol+li / * neighbor selector refers specifically to the following * / {color:green;} ol~li / * brother selector refers to the following pile of * / {color:deeppink } Animation Channel Learning Channel Live Channel Game Channel Children's Channel Wisdom Tree Windmill Senior Citizen Channel lectures Live Asia bundled 4.4 attribute selector input [name] {background-color: dodgerblue } input [name=username] {background-color: red;} input [type=password] {background-color:yellow;} input [type=text] {background-color:green } username: password: gender: male and female 4.5 pseudo class selector _ color setting pseudo class selector / * triggered by mouse hover * / a:hover {color:teal First element in list * / ul li:first-child {color:yellow;} / * Last element in list * / ul li:last-child {color:green;} / * A specific element in the list * / ul li:nth-child (4) {color: red } / * even 2n / even odd 2n-1 / odd n is not interchangeable * / ul li:nth-child (even) {color:turquoise;} ul li:nth-child (odd) {color:violet;} / * small exercise * / / * 1. Write a table table and set a background color * / table {background-color:green;} / * 2. Even-numbered lines are blue * / table tr:nth-child (2n) {background-color: blue;} table tr td {} / * 3. The 3rd, 6th and 9th lines are yellow * / table tr:nth-child (3n) {background-color:yellow;} / * 4. When the mouse is over, the color changes to red * / table tr:hover {background-color: red } the old boy taught Ma Chunni, Sun Jian, Xiaodong, Wendong, Wang Wei, kindly swarmed Qianqian Shi Shuai 111222333444 111222333444 111222333444 111222333444 111222333444 4.6 pseudo object selector Pseudo object selector .name {color:goldenrod } / * insert * / .name:: before {content: "I asked:; color:green;} / * insert * / .name:: after {content:" definitely! "after the content; color:magenta } / * style after mouse selection * / .name:: selection {background-color: mediumspringgreen; color: white;} Wang Wen is very handsome, is it right? 5. Font property sets the relevant properties of css: font property / * @ character makes rules to set the introduced custom font * / @ font-face {font-family: "Wang Wen"; src:url ("font/ founder. TTF") } / * set font properties * / .c1 {font-style:italic; / * font italics * / font-weight:bold; / * font weight * / font-size:32px; / * font size * / font-family: "Song style" / * font type * /} / * abbreviated font 1 * / .c2 {font:italic bold 32px "Song style";} / * abbreviated font 2 * / .c3 {border:solid 1px red; font:64px/2 "Song style" / * font size / line high-scale font type * / background-color: yellow;} / * Custom font * / .c4 {font:64px/2 "Wang Wen";} ul {/ * remove the previous point. * / list-style:none; / * change the shape of the mouse * / cursor:wait;} set font-related properties 1 set font-related properties 2 set font-related properties 3 set font-related properties 4 cursor properties:

6. Related properties of text attribute css: text attribute .p0 {font-size:16px; width:200px;height:200px;background-color: red; / * character spacing * / letter-spacing:5px; / * the first line of text is indented * / / * text-indent:32px * / * px represents pixel * / text-indent:2em; / * 1em = the size of 1 element is indented in proportion to the font * /} .p1 / * forced line wrapping is not default in plain English * / {word-wrap: break-word } .p2 / * forcibly do not wrap Chinese default line feeds * / {white-space:nowrap;} .p3 / * set height to be the same as line-height value, so that the text can be centered vertically * / {font-size:16px;width: 200pxscape heightline-height 50px; line-height: 50px; background-color:goldenrod } .p4 / * text-align:left/center/right text horizontal alignment * / {font-size:16px;width: 200pxposition heightline-height 50px; line-height: 50px; background-color:goldenrod;text-align:center;} .p5 / * text-decoration:overline/line-through/underline/none; * / {text-decoration:none } .p6 img / * vertical-align:top/middle/bottom text vertical alignment [usually used in image typesetting] * / {vertical-align:-600%;} / * text-shadow related settings none: no shadow ①: the first length value is used to set the shadow horizontal offset value of the object. Can be a negative value ②: the second length value is used to set the object's shadow vertical offset value. Can be a negative ③: if a third length value is provided, it is used to set the shadow blur value of the object. Negative values are not allowed: sets the color of the object's shadow. * / .p7 {text-shadow:7px 4px 10px gray;} setwordxiangguanpropertyh

Set text properties 111222233asd set text properties set text properties

This attribute

This attribute

Special offer for this attribute is cancelled.

Click me to jump.

I am the cool shadow effect.

7. Box model # D1 {width: 200px; height:200px; / * upper right lower left top right bottom left*/ border:solid 10px green; border-top:dotted 3px red; border-right:dashed 5px blue } # d2 {width: 200px; height:200px; border:solid 5px red; / * border-radius: 100px; * / border-top-left-radius: 100px; border-bottom-right-radius: 100px;} # d3 {width: 200px Height:200px; border:solid 5px red; / * Top right bottom left padding will increase the area of the box filled with * / * padding:50px; * / / * up and down * / / * padding:10px 20px * / / * Top, right, left, Lower * / padding:10px 20px 30px; / * Top right, Lower left * / * padding:10px 20px 30px 10px; * / * padding-left:30px; * /} # d4 {width: 200px; height:200px Border:solid 5px red; / * Top right bottom left box and box outer margin * / / * margin:60px; * / / * up and down * / margin:10px 20px; / * up and down * / margin:10px 20px 30px / * Top right, bottom left * / * margin:10px 20px 30px 10px; * / * margin-left:30px; * /} # d5 {width: 200px; height:200px; border:solid 5px red / * the upper and lower 0px is automatically centered around * / margin:0px auto;} / * box-shadow: ①: the first length value is used to set the shadow horizontal offset value of the object. Can be a negative value ②: the second length value is used to set the object's shadow vertical offset value. Can be a negative ③: if a third length value is provided, it is used to set the shadow blur value of the object. Negative ④ is not allowed: if a fourth length value is provided, it is used to set the shadow extension value of the object. Can be negative: sets the color of the object's shadow. * / # d6 {width:100px;height:100px;border:solid 5px red;box-shadow:6px 3px 16px 6px black;} I am d3, I am d4, I am d5 order-style:

The above is about the content of this article on "what are the contents of the CSS form?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.