CSS based
This is the 30th day of my participation in the August Text Challenge.More challenges in August
Thank you for meeting you. I’m Y Dazhuang
By Y Dazhuang Link: juejin.cn/user/756923… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the article and pictures from the Internet, if you have any questions please contact me
Chapter 1 Basic SYNTAX of CSS
Each CSS style consists of two parts: selectors and declarations, which are divided into properties and property values. An attribute must be enclosed in curly braces, and the attribute is connected to the attribute value with a colon. Each statement ends with a semicolon. Attribute values and attribute values are in no particular order.
Selector {property: property value; } div{width:500px; height:500px; }Copy the code1. Internal style (preferably written in the middle)
Internal style sheets (nested in pages)
<style type="text/ CSS "> </style> Background: background color <style type="text/ CSS "> div{width:500px; height:500px; background:#096} </style> <body> <div></div> </body>Copy the code2. External styles
<link rel="stylesheet" type="text/ CSS "href=" CSS /demo-3.css" /> 3 Sets the style of the CSS fileCopy the code3. Inline style
< p style=" max-width: 100%; clear: both; Attribute: attribute value; ">< div style="width:100px; ></div> Priority: inline style -->(internal, external)Copy the codeChapter 2 CSS Selectors (Selectors)
Definition of a selector: a selector represents the object to be styled. It can be the element itself, a class of elements, or a named element. There are about ten types of selectors commonly used, id selectors, class selectors, wildcards, group selectors, include selectors, pseudo-class selectors, pseudo-object selectors. 1. Element selector/type selector/tag selector (Element selector) syntax: element name {attribute: attribute value; <head> <style type="text/ CSS "> div{width:90px; height:90px; color:#000; background:#CF6; } p{ color:#0C0; </style> </head> <body> <div></div> < P > </p> <p> I am a PP tag!! </p> </body> 2. Id selector syntax: #id name {attribute: attribute value; <div id="top"></div> </div> height:300px; <herd> #top{color:#906; font-size:36px; } //font-size:36px; </herd> <body> <p id="top"> </p> </body> 3. Class selector syntax:.class name {attribute: attribute value; } 1. When we use class selectors, we should first define a name for the element. <herd>. Top {color:#906; font-size:36px; </herd> <div class="top"></div> <p class="top"> I am a P tag!! </p> </body> 4. Group selector syntax: selectors 1, 2,...... {attribute: Attribute value; } Note: When multiple selectors apply the same style, you can combine the selectors into a group separated by ", ". .top,#nav,p{width:11px; <herd>. Top1 {color:#906; font-size:36px; } #top{ color:#906; font-size:36px; } p{ color:#0C0; } p,.top1,#top{ font-size:60px; </herd> <body> <p>ccsfefs</p> <div class="top1"></div> <p id="top"> </p> </body> 5. Include selector syntax: selector 1(parent) selector 2(child) {attribute: attribute value; Div ul li{height:200px; div ul li{height:200px; <herd> ul li{color:#C0C; } < / herd > < body > < ul > < li > I am contains selector < / li > < / ul > < / body > 6. Wildcard selector syntax: *{attribute: attribute value; } Note: The wildcard selector is written as "*" and means all element labels. Usage: Often used to reset styles. *{ margin:0; padding:0; } *{color:#060; margin:0; padding:0; A :link{color:red} // Unvisited link state a:visited{color:green; } // A :hover{color:blue; } // mouse over link state a:active{color:yellow; } / / mouse pressed state Description: 1. When the four links when used in combination with pseudo class selectors, attention should be paid to their order, normal order: a, a: link, a: visited, a: hover, a: active, the wrong order will disable the style of the hyperlink. 2. To simplify the code, put the same declaration as in the pseudo-class selector in a selector a{color:red; } a:hover{color:green; }: indicates that all other states are the same, only the color changes with the mouse cursor. A: link{color:red; } a: visited{ color:yellow; } a: hover{ color:blue; } a: active{ color:#0F0; } or a{color:red; } a:hover{color:yellow} <a href="https://www.baidu.com" title=" you dot" Property selectors = pseudo-class selectors = pseudo-element selectors > Type selectors > child selectors > Inheritance selectors include selectors: is the sum of contain selectors. If the weights are the same, the style written after is performed. Because the style written after overrides the previous CSS comments: /* */Copy the codeChapter 3 Core CSS properties and floats
Composition and function of CSS properties Properties: Property Value 1. Each CSS style must be composed of two parts: Selector and Decleration declaration. The declaration also includes Properyt and Value. Css2 is the core of CSS. There are more than 15 properties in cSS2. CSS attribute values: the kernel contains the legal attribute values and the general value plus units,div{width:400px; {font :12px/14px/16px} note: If the attribute value is numeric, the unit must be added, except 0. The default is 16 px; Font-family: 'times New Roman', 'times New Roman', 'times New Roman', 'times new Roman'; Text color: {color: color value; } {background: 250,0,0,1} the fourth value is the depth of the background color. 1. Define the list symbol style: {list-style type; } : disc(solid circle) circle(hollow circle) square(solid square) None (remove list symbol); <head> <style type="text/ CSS "> ul li{list-style-type: square } </style> </head> <body> <ul> <li font->111</li> <li>222</li> <li>333</li> </ul> </body> 2. {list-style-image:url(image path); } : url (the path of the images used and the full name) : ul li {list - style - image: url (images / 005 epfx5gy1g5h4jw2l7yj30tz1f7ao8. JPG); } 3. Define the list symbol position: {list-style position:; } Value :outside (outside) inside(inside) example: ul li{list-style position:outside; } {list-style :none} example: ul li{list-style :none; } CSS border attribute syntax :{border:; } : attribute 1: border style border - style: solid/dashed dotted/double solid, solid, dashed, dotted line, dotted: double dotted line: double, none / 0: remove the border attribute 2: Border-width: value; Attribute 3: border color border-color: value; <head> <style type="text/ CSS "> div{width:300px; height:300px; background:#09F; border:2px dotted red; // the first is the width of the line, the second is the style of the border, the third is the color of the border; < / style > < / head > < body > < div > where I < / div > < / body > 1. Set the border attributes of a direction separately: border-top: top border-bottom: bottom border-left: left border-right: right border-example: border-top: 2px dotted dotted red; < span style = "margin: 0.0px 0.0px 0.0px; padding: 0.0px; outline: none; border-top-width: 2px; border-top-color: red;Copy the code4. Background image attributes
{background-color: color value} short: background:color value; 1. Background image setting syntax :background-image: URL (path and full name of background image); Description: There are two types of picture on the page: insert picture, background picture; Insert image: belongs to the content of the page, that is, structure. Background image: a representation of a web page, on which text can be displayed, images inserted, tables, etc. Background image display principle: container is equal to the picture, just the container is larger than the picture size, tile container is smaller than the picture size, only display elements within the loading background image must have a container area. 2. Background image tiling attribute syntax: {background-repeat:no-reat/repeat/repeat-x/repeat-y} no-repeat: not flat repeat: flat (default) <style type="text/css"> div{width:900px; height:900px; border: 3px dotted red; background-image:url(images/005EpFX5gy1g5h4k317zrj30u01br48t.jpg); background-repeat:repeat; {background-position: left/center/right} </style> 3. Top/Center/Botton or the value 10 indicates that a positive value is generated when you move horizontally to the right or vertically down. A negative value is generated when you move horizontally to the left or vertically up. Background-position: Right Botton; Fixed syntax: select {background-attachment:scrooll(scroll)/fixed(fixed)} Scroll: Scroll along with the content. For example: "style type =" text/CSS "> body {background - image: url (images / 005 epfx5gy1g5h4juu6dtj30u0190gtf. JPG); background-repeat:no-repeat; background-position:top right; background-attachment: scroll; } div{ height:9000px; } </style> 5. CSS float attribute float: defines how other text in the page is displayed around the element. There are three values: left: element activity floats to the left of the text. None: the default value is not floating. 1. Background cannot be displayed (overflow:hidden;) Due to floating, if the parent is set to a CSS background color or a CSS background image, and the parent cannot be stretched, the CSS background cannot be displayed. 2. Border cannot be expanded if the parent has CSS border set, the parent cannot be expanded with the content because the child uses the float property. Due to floating, CSS padding is set between parent and child levels. Cssmargin property values cannot be expressed correctly, especially the upper and lower padding and margin values cannot be displayed correctly. < span style =" margin:0; padding:0; } // unset ul{width:900px; border:3px dotted red; list-style:none; overflow: hidden; }//overflow:hidden :hidden. Left {width:300px; height:300px; background:#FF0; float:left; } //float:left set float all left row. Chent {width:300px; height:300px; background:#000; float:left} .right{ width:300px; height:300px; background:red; float:left} </style> </head> <body> <ul> <li class="left"></li> <li class="chent"></li> <li class="right"></li> </ul> </body> Clear float A float box can be moved left or right until its outer edge touches the border containing the box or another float box. The float box is a document flow that is detached from the sub-normal. Parent add overflow:hidden: drawback: parent cannot put other elements in this box. 2. Clear :both Clear float 3. Universal clearance floatCopy the codeFive CSS box models
The concept of box model: The box model is the cornerstone of CSS layout. It defines how web elements are displayed and how they relate to each other. CSS defines that all elements can have a box-like shape and surface space, that is, contain content areas, padding (fill), borders, and boundaries (margins). *{margin:0; padding:0; }: remove the inside and outside margin 1. Padding: Set the distance between the content of an element on the page and the border of the element. Padding-top :20px; padding-top:20px; padding-top:20px; Two values: top, bottom, left, right {padding:10px, 20px; {padding:10px 20px 30POX; } four values: top, right, bottom, left {padding:10px; 20px; 30px; Margin: the blank area outside the element, called margin. Margin :auto; < span style =" margin: 0px; padding: 0px; padding::0; } div{width:300px; height:300px; border:3px solid red; background-image:url(images/005EpFX5gy1g5h4jw2l7yj30tz1f7ao8.jpg); padding:20px 60px 90px 160px; margin:auto ; } < / style > < / head > < body > < div > is the box to me < / div > < / body > 3. Text attributes - container overflow {{overflow:} handle overflow data overflow: visible/hidden/scroll/zuto/inherit; } visible: Changes the value, the content will not be trimmed, will be displayed outside the element box. Hidden: The content will be trimmed and the rest of the content will be invisible: scroll: The content is trimmed, but the browser displays a flow bar to view the rest of the content. Auto: If the content is trimmed, the browser displays a flow bar to view the rest of the content inherit: specifies that the overflow property value should be inherited from the parent element. <style type="text/ CSS "> div{width:300px; height:300px; border: 3px solid red; overflow:auto; } </style> <div>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF there there's remote city in liver expansion there heavy dispersed dispersed dispersed dispersed FFFFFFFFFFFFFFFFD fd df Ffffffffffffffffffffffffe rerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr graupel liver dispersed bored with anal food teeeeeeee & have spent < / div > 4. Text attributes - white space (text processing line and whitespace) white - space: {white - space: normal/pre/nowrap/pre - wrap/pre - Lin/inherit; } normal: default value, the browser will ignore extra whitespace and keep only one whitespace. Pre: the browser will keep only one whitespace. Pre-wrap: The browser will keep part of the whitespace sequence, but the normal line feed. Text is not wrapped, and the text continues on the same line until the <br/> tag is encountered. 5. Text attribute - Text overflow Text-overflow (Handle text overflow and display ellipsis tags) Value: Clip: do not display ellipsis (...) Instead, it is simply ellipsis: display the ellipsis flag 6 when the text inside the object overflows. Text properties-ellipsis setting text-overflow is simply whether to display ellipsis flags when text overflows. there is no other style definition. Width :value; (px,%, either) 2. Force the text to display shite-space:nowrap on one line; 3. Overflow :hidden; 4. Display ellipsis: text-overflow:ellipsis; Must be a single line of text to set text overflow!! <style type="text/ CSS "> div{width:300px; height:300px; border: 3px solid red; //1. The width of the container white-space: nowrap; //2. Display them on a line overflow: hidden; //3. Set overflow to hide text-overflow: ellipsis; </style> <div> FFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFF fffffffffffffffff ffffff FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF there there's remote city in liver expansion there heavy dispersed dispersed dispersed dispersed FFFFFFFFFFFFFFFFD fd Df ffffffffffffffffffffffffe rerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr graupel liver dispersed bored with anal food teeeeeeee & have spent </div>Copy the code