1. Make good use of CSS abbreviation rules
/*Pay attention to the writing order of top, right, bottom and left*/
1. About margins (4 Side)
1px 2px 3px 4px (top, right, bottom, left)
1px 2px 3px (the omitted left is equal to right)
1px 2px (the omitted top is equal to Bottom)
1px (all four sides are the same)
2. Simplify all
*/ body{margin:0}------ ------Indicates that the margin of all elements in the web page is 0
#menu{ margin:0}------------Indicates that the margin of all elements under the menu box is 0
3. Abbreviation (border) specific style
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4. Abbreviation rules for text
Font-style:italic; italic form
Font-variant:small-caps/normal; variant Style: Small Caps/Normal
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em (150%);
Font-family:arrial,sans-serif,verdana;
abbreviated to: Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
Note: Font-size and Line-height are combined with slashes and cannot be written separately.
5. About background images
Background:#FFF url(log.gif) no-repeat fixed top left;
6. About the list
List-style-type:square/none;
List-style-position:inside;
List-style-image:url (filename.gif);
is abbreviated to: List-style:none inside url(filename.gif);
2. Use 4 methods to introduce CSS styles
1. link
rel relationship
type data type, there are many
href path
Some browsers support candidate styles, keywords: alternate:
2. Internal style block
3. @import
@import url{a.css}
Note: This directive must be placed in the
- Externally referenced css files
(2) The priority is not set by the access order, but by the declaration order in css of.
As in the above example,
is displayed as yellow here
is also displayed as yellow, because in the css definition, .yellow is in. behind blue.
8. Write the correct link style
When using CSS to define the various states of the link, pay attention to the order of writing: :link :visited :hover : active uses the initials: L V H A. You can remember the order by memorizing LoVe, Hate, two words.
:link --------Color of link
:visited -----Color after mouse click
:hover ----- --The color when the mouse is placed but not clicked (hover)
:active-------The color when the mouse is clicked
9. :hover Flexible use of
IE6 does not support the :hover attribute other than the a tag. We understand that the :hover attribute is the mouse hover effect. In IE7 and FF, you can set the :hover attribute effect on almost any element. This works great for us doing different visits.
Such as:
p {
width : 360px;
height : 80px;
padding : 20px;
margin : 50px auto 0 auto;
border : 1px solid #ccc;
line-height : 25px;
background : #fff;
}
p:hover {
border : 1px solid #000;
background : #ddd;
}
- ---------------This effect is for IE7 and FF
p a {
color: #00f;
text-decoration: none;
font-size : 13px;
}
p a:hover {
color : #036;
text- decoration: underline;
}
--------------This effect is for IE6
10. Small issues to pay attention to when defining the A tag
When we define a{color:red;}, it represents the styles of the four states of A. If you want to define a state where the mouse is placed, just define a:hover. The other three states It is the style defined in A.
When only one a:link is defined, be sure to remember to define the other three states!
11. Prohibiting content from wrapping and forcing content to wrap
In tables or layers we may want the content not to wrap or to force wrapping. We can do this through some css attributes meet these requirements.
Prohibit line breaks: white-space:nowrap
Force line breaks: word-break: break-all; white-space: normal;
Ten 2. The difference between relative and absolute
Absolute---The writing method in CSS is: position:absolute; It means absolute positioning, which refers to the upper left corner of the browser, with TOP, RIGHT, BOTTOM, and LEFT (hereinafter referred to as TRBL) for positioning. If TRBL is not set, the original point will be the original point of the parent by default. If TRBL is set and the parent does not set the position attribute, then the current absolute will be positioned with the upper left corner of the browser as the original point, and the position will be determined by TRBL.
Relative---The writing method in CSS is: position:relative; It means absolute relative positioning. It refers to the original point of the parent as the original point. If there is no parent, the original point of BODY is used as the original point. The original point is positioned with TRBL. When there are CSS attributes such as padding in the parent, the original point of the current level is positioned with reference to the original point of the parent content area.
13. Difference between block-level elements block and inline elements inline
Block level---definable width and height, exclusive from another One line (such as: div ul)
inline---the width and height cannot be defined, such as text elements (such as a span)
14. The difference between display and visibility
Both display:none and visibility:hidden can hide an element, but visibility:hidden only hides the content of the element, but the position space used is still retained. Display:none is equivalent to removing the element from the page, and its occupied position will also be deleted.
15. Some syntax of background
background-image:url(background pattern.jpg, gif, bmp);
background- color:#FFFFFF; (Background color)
background-color : transparent; Settings
Description
repeat Background images are side by side
repeat-x Background images are side by side in the X direction
repeat-y Background images are side by side in the Y direction
no-repeat The background image is not processed side by side
Background-attachment Whether the image position is fixed
Description
Scroll When the scroll is pulled, the background image will Move with it (default value)
fixed When the scroll is pulled, the background image will not move with it.
Position background-position by length: x y
Use percentage to position background-position : x% y%
Description
x% Move right
y% Move down
backgroud-position: 0% 0%; left Above
backgroud-position: 0% 50%; Middle left
backgroud-position: 50% 0%; Above middle
backgroud-position: 50% 50%; Center
backgroud-position: 100% 0%; Upper right
backgroud-position: 0% 100%; Lower left
backgroud-position: 100% 50% ; Right middle
backgroud-position: 50% 100%; Middle lower
backgroud-position: 100% 100%; Right lower
with Keyword positioning
Keyword Description
top top ( y = 0 )
center middle ( x = 50, y = 50 )
bottom bottom ( y = 100 )
left Left ( x= 0 )
Exp:
background-position:center;
The image is at the X=50% Y=50% position of the center of the specified background
background-position: 200px 30px
16. How to write comments
In Html:
<-- footer -->
content<-- end footer -->
in CSS Center:
/* ---------- header ------------------ */
style
Seventeen, CSS naming convention
1. Naming of id
(1) Page structure
Container: container
Header: header
Content: content/container
Page body: main
Footer: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
left right center
(2) Navigation
Navigation: nav
Main navigation: mainnav
Sub-navigation: subnav
Top navigation: topnav
Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Submenu: submenu
Title: title
Summary: summary
(3) Function
Logo: logo
Advertisement: banner
Login: login
Login bar: loginbar
Registration: regsiter
Search: search
Ribbon: shop
Title: title
Join: joinus
Status: status
Button: btn
Scroll: scroll
Tab: tab
Article list: list
Prompt message: msg
Current: current
Tips: tips
Icon: icon
Note: note
Guide: guild
Service: service
Hotspot: hot
News: news
Download: download
Vote: vote
Partner: partner
Friendly links: link
Copyright: copyright
2. Class naming
(1) Color: use the name of the color or 16 characters Custom code, such as
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2) Font size, directly use "font font size" as the name, such as
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3) Alignment style, use the English name of the alignment target, such as
.left { float:left; }
.bottom { float:bottom; }
(4) Title bar style, named using "category function", such as
.barnews { }
.barproduct { }
Notes::
u Always lowercase;
u Try to use English;
u Do not add dashes or underlines;
u 2 combinations You can capitalize the first letter of the second word (eg: mainContent) without using a hyphen or underline;
u Try not to abbreviate unless it is a word that is easy to understand at a glance.
3. Main Site css file
Main master.css
Module module.css
Basic shared base.css (root.css)
Layout, layout layout.css
themes.css
columns columns.css
text font.css
forms.css
patch mend.css
Print print.css
As for the spacing, leave it to the margin attribute of the label located inside, instead of defining the padding of the label located outside
19. Perfect single-pixel outline table
table{border-collapse:collapse;}
td{border:1px solid #000;}
Twenty, If the text is too long , then the overly long part will be displayed as ellipsis
21. Not all styles need to be abbreviated
When the style sheet is defined such as p{padding:1px 2px 3px 4px}, it will be used in subsequent projects. Added a style with 5px upper padding and 6px lower padding. We don't necessarily have to write p.style1{padding:5px 6px 3px 4px}. It can be written as p.style1{padding-top:5px;padding-right:6px;}. You may feel that writing it this way is not as good as the original one, but have you ever thought about it? Your writing method repeatedly defines the style. In addition, You don’t have to find out what the original lower and left padding values are! If the previous style P changes in the future, the style of p.style1 you defined will also change. (This method is very important for later modification of styles)
Twenty-two, several commonly used CSS details processing styles
1) Both ends of Chinese characters Alignment: text-align:justify;text-justify:inter-ideograph;
2) Fixed-width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(Do not let it wrap , but it can only handle text truncation on one line, not multiple lines) (IE5 and above) FF cannot, it only hides.
***Universal forced line break: white-space:normal;word-break:break-all;
Forbidden line break: white- space:nowrap
Force line break: word-wrap: break-word; word-break: normal;
.AutoNewline
{
/*word-break: break-all ; Method one must*/
/*word-wrap:break-word;overflow:hidden; Method two */
/*word-wrap:break-word; word-break: normal; Method 3*/
word-wrap:break-word; word-break:break-all;
}
.NoNewline
{
/*word-break: keep-all; Method 1 Must*/
white-space:nowrap;
}
3) Fixed-width Chinese character (word) line break: table-layout: fixed; word-break:break-all; (IE5 and above) FF cannot.
4)TextUse the mouse to place the previous text See the effect. This effect can be seen on many foreign websites, but very few domestic ones.
5) Set the image to semi-transparent: .halfalpha { background-color: #000000; filter:Alpha(Opacity=50)} passed the test in IE6 and IE5, but failed in FF. This is because this style is private to IE;
6) FLASH transparency: select swf, open the original code window, and enter
overflow:hidden;
}
23. Issues to note when using elements with float attributes
1. Use the border attribute to determine the layout characteristics of the error element
Use float Property layout can go wrong if you're not careful. At this time, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed.
2. The parent element of a float element cannot specify the clear attribute
Under MacIE, if you use the clear attribute on the parent element of a float element, the surrounding float elements will be laid out confusion. This is a famous bug of MacIE. If you don't know it, you will take detours.
3. Float elements must specify the width attribute
Many browsers have bugs when displaying float elements without specified width. So regardless of the content of the float element, the width attribute must be specified for it.
In addition, try to use em instead of px as the unit when specifying elements.
4. Float elements cannot specify attributes such as margin and padding.
IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also use hacks to specify special values for IE.
5. The sum of the widths of float elements must be less than 100%
If the sum of the widths of float elements is exactly 100%, some ancient browsers will not display it properly. Therefore, please ensure that the sum of the widths is less than 99%.
Twenty-four, browser compatibility issues (for FF/IE6/IE7)
1. CSS hack: distinguish IE6, IE7, firefox
Difference between FF, IE7 and IE6:
background:green !important; background:orange; *background:blue;
IE6 can recognize *, but not !important,
IE7 can recognize * and can also recognize !important;
FF cannot recognize *, but can recognize !important;
Also add one more, underline "_",
IE6 supports underline, but neither IE7 nor firefox supports underline.
So you can also distinguish firefox, IE7, IE6 in this way
background:green!important; *background:orange; _background:blue;
Note: No matter what it is Methods are written in the order that Firefox is written first, IE7 is written in the middle, and IE6 is written at the end.
2. The BOX model interpretation in firefox and IE is inconsistent, resulting in a 2px difference. Solution
div{margin:30px!important;margin:28px;}
Note that the order of these two margins must not be reversed. The !important attribute is not recognized by IE, but other browsers can. So it is actually interpreted like this under IE: If div{maring:30px;margin:28px} is repeatedly defined, it will be executed according to the last one, so you cannot just write margin:XXpx!important;
3. Conditional comments to select different browsers (more concise than CSS hack)
4 .Distinguish IE8
.color{
background-color: #CC00FF; /*All browsers will display purple*/
background-color: #FF00009; / *IE6, IE7 and IE8 will display red*/
*background-color: #0066FF; /*IE6 and IE7 will turn blue*/ /*IE6 will turn green*/
Twenty-five, Standard principles followed by W3C
1. Before arranging the table, Please think carefully about the best solution. Try to control the nesting of tables within three levels, and try to avoid the two tags
2. A web page should try to avoid using an entire large table. All content is nested within this large table, because when the browser interprets the elements of the page, it displays them one by one in units of tables. If a web page is nested within a large table, the likely consequence is that when the visitor types in the URL, he will first face a blank space for a long time, and then all the web content will appear at the same time. If you must do this, use the
tag so that the large table can be displayed in chunks. 3. In typesetting, we often encounter the need to indent the first line. Do not use or full-width spaces to achieve the effect. The standard approach is to define p { text-indent in the style sheet : 2em; } Then add themark to each paragraph. Note that under normal circumstances, please do not omit the
end mark.
6. There should be a half-width space between words in different languages, except before the header avoidance symbol and after the tail avoidance symbol. The punctuation between Chinese characters should be full-width punctuation, and the brackets around English letters and numbers should be Use half-angle brackets.
7. All font sizes should be implemented using style sheets, and the tag is prohibited from appearing on the page.
8. Please do not appear more than one consecutively in the web page and use full-width spaces as little as possible (under the English character set, full-width spaces will become garbled characters). You should try to use text-indent for spaces. Padding, margin, hspace, vspace and transparent gif pictures are implemented.
9. When mixing Chinese and English, we try our best to define English and numbers as verdana and arial fonts.
10. It is recommended to define line spacing in percentage. The commonly used two line spacing values are line-height:120%/150%.
11. In the website All paths use relative paths. Generally, the link path to a default file in a certain directory does not need to be written in the full name. For example, we do not need to do this: Instead, it should be like this: < a href="aboutus/">
12. Use larger fonts to embed text in graphics. It is recommended not to include text in graphics.
13. "Web page size" is defined as the sum of the file sizes of all web pages, including HTML files and all embedded objects. Users prefer sites that are fast rather than novel. For modem users, it is appropriate to keep the page size below 34K.
14. Float elements must specify the width attribute
Many browsers have bugs when displaying float elements without specified width. So regardless of the content of the float element, the width attribute must be specified for it.
In addition, when specifying elements, try to use em instead of px as the unit.
15. Float elements cannot specify attributes such as margin and padding
IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also use hacks to specify special values for IE.
16. The sum of the widths of float elements must be less than 100%
If the sum of the widths of float elements is exactly 100%, some ancient browsers will not display properly. Therefore, please ensure that the sum of the widths is less than 99%.
Twenty-six. List elements ul ol li dl dt dd interpretation
;Content 1
l You can add ol ul li and p to dt and dd
Twenty-seven , Clear floating
clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the children are all When it is floating, the height of the parent cannot completely cover the entire child. Then use this HACK to clear the floating to define the parent once, which can solve this problem.
.clearfix {
display:inline-block;
}
/* Hides from IE-mac */
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* End hide from IE-mac */
** This kind of usage is more common when mixing images and text, but it is not easy to control. Use margin to match clear{clear:both} controls directly.
Twenty-eight. Text processing
1. General fonts:
font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, "宋体",sans-serif;
Title font (h1/h2): font-family: Cambria, Georgia, "Times New Roman", Times, serif;
2. Drop cap:
P:first-letter{padding:10px,fontsize:32pt;float:left}
3 . Pinyin Chinese characters:
bruce wolf
Twenty-nine, Min-height multi-browser compatibility issues
Div{
min-height:450px;
height:auto!important;
height:450px;
overflow:visible;????
}
30. CSS layout tips - CSS BUG jingle
· If the IE border appears or disappears, please note that the height setting must have been forgotten;
· There is a reason for floating, if The parent layer must be included, and the float must be cleared immediately, and the container will naturally appear;
· Don’t panic when the three-pixel text moves slowly, the height setting will help you; , the default setting of row height may be a killer;
· You must remember to clear floats independently, set row height to none, set height to zero, the design effect is combined with browsing; The layout principle is natural and straight, it is easy to control HTML, the streamlined layout has less hacks, the code is clean, the compatibility is good, and it is friendly to engines.
· The number is all back to the original, the layering pattern requires more practice, everything is regular.
· Be careful with the layout of image links. If the image links and text links are aligned, padding and vertical-align:middle must be set. It doesn’t matter if the difference is subtle.
· IE floating double margins, please use display: inline.
· The list should be typed horizontally, the list codes must be close together, and the gaps must be remembered.
31. Font applications in the Web
Summary of several practical and simple font-family
font-family: Tahoma, Helvetica , Arial, sans-serif;
Tahoma-based unisex font. It is recommended to use an environment above 13px.
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
Verdana family wide flat font. It is recommended to use it in an environment below 11px.
font-family: Geogia, Times New Roman, Times, serif;
The perfect serif font. Mostly used for large title fonts above 16px.
font-family: Lucida Console, Monaco, Courier New, mono, monospace;
A series of monospaced fonts. Writing code is very useful. In addition, if you feel that Lucida Console is too wide, you can switch to the narrower Lucida Sans Typewriter. By the way, the code blocks on Lao Zhao’s blog use Lucida Sans Typewriter~
If the visibility is set to hidden in the style of the div, the div will be hidden, but It will occupy the blank space, but if it is set to display:none, it will not occupy the blank space;
and visible="false" will not return the div to the html;
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
