---------------------------------- -------------------------------------------------- ---------------------------------------
************ *************************************************** *************************************************
Preface: In order to make it easier for everyone to learn CSS, my friend Ling Yucao spent some time making a convenient txt tutorial for everyone. In fact, the main thing about div css layout is knowing how to use css. Once you learn the
tutorial he wrote, there is nothing you won’t understand about the general div css layout. In addition, if you make more examples yourself, you can use them. Hehe, these are some basic technologies for Xiaoxia to learn.
************************************************ *************************************************** *************
---------------------------------- -------------------------------------------------- ------------------------------------------
What? Is a style sheet:
CSS is the abbreviation of Cascading Style Sheet. Translated as "Cascading Style Sheets". Is a markup language used for (enhanced) control over web page styles and allows the separation of style information from web page content.
-------------------------------------------------- -------------------------------------------------- ----------------------------------
How to add a style sheet to your web page:
You can use the following three A way to add a style sheet to your web pages. The style definition closest to the target has higher priority. A high-priority style will inherit the non-overlapping definitions of the low-priority style but override the overlapping definitions. See the !important declaration for exceptions.
-------------------------------------------------- -------------------------------------------------- --------------------------
One. You can first create an external style sheet file (.css) and then use the HTML link object. An example is as follows:
Two. Define internal style block object >
This line is added with left and right outer patches
Attributes:
1. Font:
font-family: "宋体";
color:#ff0000;
font-style: inherit;/*normal*/
font-style:italic;/*italic*/ font- style: oblique;/*Italic*/
font-style:inherit;/*Inherit parent object properties by default*/
font-weight:lighter;/*Font weight, equivalent to 400*/
font-weight:900;/*Font weight*/
font-weight:bold;/*Bold, equivalent to 700, equivalent to*/
font-weight:bolder;/* Ratio normal >thick*/
font-weight:lighter;/*than normal >thiner*/
text-decoration:overline;/* Default value*/
text-decoration:inherit;/* Default inheritance of parent object properties*/
text-decoration:blink;/* blink*/
text-decoration:underline;/*underline*/
text-decoration:line-through;/*through line */
text-decoration:overline;/*overline*/
line-height: normal;/*default line height*/
line-height:21px;/*21px high*/
letter-spacing: 2px;/*font spacing*/
word-spacing:2px;/*English font spacing*/
2. Text:
text-align:left;/*text-aligned left*/
text-align:right;/*text-aligned right*/
text-align: center;/*text aligned center*/
text-align:inherit;/*Default parent object’s properties*/
text-align:justify;/*Text-aligned at both ends*/
text-indent:inherit;/*Default parent object’s properties* /
text-indent:10px;/*Text indent 10 pixels*/
vertical-align: middle;/*Vertical center alignment*/
word-wrap: break-word;/*Pure English Letters will also wrap*/
3. Background:
background-attachment:fixed;/*Background fixed*/
background-attachment:scroll;/*Background scroll*/
background-color: #ffffff;/*Background color*/
background-image:url(untitled-1.gif);/*Background image*/
background-position:center;/*Background image centered*/
background-repeat:no-repeat;/*Background image does not repeat*/
background:transparent none repeat scroll 0% 0%/*Default value*/
4. Positioning
position:absolute;/*Absolute positioning; does not take up space; can overlap*/
position:relative;/*static positioning; stores space; does not overlap*/
position:static;/*default value*/
z-index: auto;/*Default the attributes of your object*/
z-index:1;/*Put it on the first layer (you can look at photoshop’s layers)*/
top :auto;/*default*/
left:auto;/*default*/
bottom:auto;/*default*/
right:auto;/*default*/
5. Size
height:auto;/**/
max-height:200px;/*Maximum height*/
min-height:100px;/*minimum height*/
width:auto;/**/
max-height:200px;/** /
min-height:100px;/**/
6. Layout
clear:both;/*Clear floats on both sides*/
float:left;/*Left float*/
overflow:visible;/*Default. Display all */
overflow:hidden;/*Do not display content that exceeds the size*/
display:block;/*As a block object*/
display:inline;/*As an inline object */
visibility: visible;/*Display object*/
7. Internal and external patches, pseudo-objects, borders, lists
margin:auto;
padding:0px;
a:link{};/*Normal*/
a:visited{};/*After clicked*/
a:hover{};/*When pointed*/
a:active{};/*Occurs between click and release*/
a:focus {};/*When input focus is obtained, */
border:1px solid #FF0000;
list-style-image: url("images/ie.gif"); /*In the text*/
list-style-type: disc/*solid circle*/
>------------------------------------------------ -------------------------------------------------- --------------------------
************************ ************************************
Compatible browser method:
Common method 1:
#wrapper
{width: 100px!important; /* IE7 mozillafirefox */
width: 80px; /* IE6 */
}
or
#wrapper{
margin:0 0 3px !important;margin:0 0 10px/* The front is IE7 mozillafirefox, the back is IE6 */
}
- -------------------------------------------------- -----
Common method 2:
#1 { color: #333; } /* mozillafirefox */
* html #1 { color: #999; } /* IE7 */
-------------------------- -----------------------------
Common method 3 [display html css]:
1. Recognized by all except IE
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
**************************************************** ***********
Things to note: Understand inheritance. Remember to clear the floats at both ends and use regular attributes. If you know the above, you have already learned CSS. http://validator.w3.org/ Go to this website to check whether it is a qualified xhmtl language. Author: Ling Yucao QQ: 477764498 E-mail: lingyucao@yahoo.cn
-- -------------------------------------------------- -------------------------------------------------- -----------------------
************************* *************************************************** *****************************************
****** *************************************************** *************************************************** **********
****************************************** *************************************************** ********************************* If you want to be a master, look down at css writing! A little bit, not so good Used to debug bugs.
2. Clear the floating layer and add line-height:0px;font-size:0px;
3. Remember in body There are fonts
4. Clear the floating layer and make sure it does not have height: 0px;
5. Do not use padding for layers with width and height.
6. Do not use width: auto width for layers without width and height by default. :100%
7.width:100%,height:100% completely fills the parent object. width100% occasionally has problems with IE5
8.height:auto targets elements within the current object. width:100% for the parent object.
************************************ *************************************************** *********************************
**************** *************************************************** *************************************************** **
************************************************ *************************************************** *********************
-------------------------- -------------------------------------------------- ----------------------------------------
font-weight:bold;
font-style:italic;
font-varient :small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
Really good! Just one caveat: this shorthand method only works when both the font-size and font-family properties are specified. Also, if you don't set font-weight, font-style, and font-variant, they will use default values, so keep this in mind.
2. Use two classes at the same time
Generally, only one class (Class) can be set for an element, but this does not mean that two cannot be used. In fact, you can do this:
…
Give the P element two classes at the same time, separated by spaces. In this way, all attributes of the text and side classes will be added to the P element. If there is a conflict between the attributes in the two classes, the one set later will take effect, that is, the attributes of the class placed later in the CSS file will take effect.
Supplement: For an ID, you cannot write
...
nor can you write3. Default value of CSS border
You can usually set the color, width and style of the border, such as:
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
这样调用它：
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的，让它们显示效果一致。
#box { width: 150px } #box div { border: 5px; padding: 20px }
这样调用：
这样，不管什么浏览器，宽度都是150点了。
7. 块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
#content { width: 700px; margin: 0 auto }
你会使用
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
这会把网页内容都居中，所以在Content中又加入了:text-align: left 。
8. 用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
9. CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container { position: relative }
这样容器内所有的元素都会相对定位，可以这样用：
If you want to position it 30 points from the left and 5 points from the top, you can do this:
#navigation { position: absolute; left: 30px; top: 5px }
Of course, you can also do this:
margin: 5px 0 0 30px
Note that the order of the 4 numbers is: top, right, bottom, left. Of course, sometimes positioning rather than margins is better.
10. The background color that goes straight to the bottom of the screen
is controlled in the vertical direction and cannot be controlled by CSS. If you want the navigation bar to go straight to the bottom of the page like the content bar, it is very convenient to use a table, but if you only use CSS like this:
#navigation { background: blue; width: 150px }
A shorter navigation bar will not go straight to the bottom, it will end when the content ends halfway. What to do?
Unfortunately, the only way to cheat is to add a background image to the shorter column, with the same width as the column width, and make it the same color as the set background color.
body { background: url(blue-image.gif) 0 0 repeat-y }
-------------------------- -------------------------------------------------- -------------------------------------------------- ----
************************************************ *************************************************** *************************
************************ *************************************************** ****************************************
***** *************************************************** *************************************************** *************** through 🎜>************************ *************************************************** **********************************************
* *************************************************** *************************************************** ***************
------------- -------------------------------------------------- -------------------------------------------------- -----------
Use line-height to center vertically
Use a fixed-width container and need one line vertically When centering, just use line-height (the height is the same as the parent layer container). For more vertical centering summary, you can see here.
Clear container floats
#main {
overflow:hidden;
}
This issue was also mentioned before. For more information, see here.
a {
white-space:nowrap;
}
The above settings can prevent links from wrapping, but Personally, I suggest that long links will have a corresponding line (for discussion on line breaks, see the record in the center of the circle).
html {
overflow:-moz-scrollbars-vertical;
}
More Mozilla/Firefox private CSS Properties can be found here. For cross-browser support, you can also use
min-height:101%;
}
to center the block element horizontally
In fact, it is
margin-left: auto;
margin-right: auto;
This technique is basically known in all CSS textbooks There is a description, don't forget to add a width to it. You can also use
text-align: center;
}
and then define the inner container
Restore.
Hide the scroll bar of the Explorer textarea
textarea {
overflow:auto;
}
Explor textarea will have a vertical scroll bar by default (don’t ask me why).
h2 {
page-break-before:always;
}
The page-break-before attribute can set the page break when printing a web page. Pagination.
a:active, a:focus {
outline:none;
}
Firefox will get focus on the link by default (or when clicked) Add a dotted frame, which can be deleted using the properties above.
* {
margin: 0; padding: 0
}
----------------------------------------------------------------------------------------------------------------------------
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
想成高手，再向下看吧!
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
----------------------------------------------------------------------------------------------------------------------------
单行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
三行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
单行两列
以下是引用片段：
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
两行两列
以下是引用片段：
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
三行两列
以下是引用片段：
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
单行三列
绝对定位
以下是引用片段：
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位一
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
两行三列
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
以下是引用片段：
CSS:
以下是引用片段：
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
*************************************************************************************************************************
想成为高手，继续向下看。
*************************************************************************************************************************
扩展框问题This kind of layout can easily lead to expansion box problems.
Try to define the width and height given values
* Float drop problem
Add ｛float: left ;｝ Just ```
IE6 double margin BUG
The solution is to add display:inline
Why is there a gap below the picture in IE6
There are many ways to solve this BUG. You can change the layout of the html, or set the img to display:block or set the vertical-align attribute to vertical-align:top | bottom |middle |text-bottom.
Why is there a gap between these two layers under IE6
This 3PX BUG of IE also often occurs. The solution is to float .right with float:left or define it relative to IE6. left
How to align the text with the text input box
When encountering this problem, just set the vertical-align:middle of the text box and it will be fine
Why the text cannot be supported under FF The height of the open container
Containers with a fixed height value in standard browsers will not be opened like in IE6. So if I want to fix the height and want it to be opened, how should I set it? The way is to remove the height and set min-height:200px; here, in order to take care of IE6 that does not know min-height, it can be defined like this:
{
height:auto!important;
height:200px;
min- height:200px;
}
How to make the layer display on top of FLASH
The solution is to set transparency for FLASH Or
How to center a layer vertically in the browser
Use percent absolute positioning, with negative values outside the patch method, the size of the negative value is its own width and height divided by two.
Method 2: First define TEXT-ALIGN: center in the parent element; this means that the content within the parent element is centered; This setting is enough for IE.
But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " when setting the child element definition
It should be noted that if you want to use this method to center the entire page, it is recommended not to Set in a DIV, you can split multiple divs in sequence.
Just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.
{
width:300px;
margin-left:auto;
margin-right:auto;
}
For firefox ie6 ie7 css style
Nowadays, most of them use !important to hack, and it can be displayed normally in ie6 and firefox tests.
But ie7 can interpret !important correctly, which will cause the page not to be displayed as required! I found a
good hack for IE7 by using “* html”. Now browse it with IE7 and there should be no problem.
Now write a CSS like this:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE7 */
Then the font color is displayed as #333 under firefox, #666 under IE6, and #999 under IE7.
Minimum width of the page
min-width is a very convenient CSS command. It can specify that the minimum width of an element cannot be smaller than a certain width, so that the layout can always be correct. But IE doesn't recognize this,
and it actually treats width as the minimum width. In order to make this command work on IE, you can put a
Attribute selector (this is not considered compatible, it is a bug in hiding css)
p[id]{}div[id]{}
This is for IE6.0 and IE6 Versions below .0 are hidden. The functions of FF and OPera
There are still differences between attribute selectors and sub-selectors. The scope of sub-selectors is narrowed in form, while the scope of attribute selectors is relatively large, such as p[id ], all p tags with ids are of the same style.
The most ruthless method - !important;
If there is really no way to solve some detailed problems, you can use In this method, FF will automatically parse "!important" first, but IE will ignore it.
About the inclusive relationship of the container
Many times, especially when there are parallel layouts in the container, such as two , three float divs, the width is prone to problems. In IE, the width of the outer layer will be squeezed by the wider inner div. Be sure to use Photoshop or Firework to measure with pixel-level accuracy.
1. Write two lines of code to control an attribute to distinguish Firefox from IE:
background:orange; *background:green;
//This sentence When the code is written, if you browse it with Firefox, you will find that the background is orange, but it is green in IE. It is very simple, because Firefox cannot recognize *, but IE6 and IE7 can recognize *. Standard browsers (such as Firefox, Opera, Netscape) does not recognize *;.
2. Write two lines of code to control an attribute to distinguish IE7 from IE6:
background:green !important;background:blue;
//When this code is written and you browse it with IE7, you will find that the background of the area where the code is written is green. If you use IE6 When browsing, it is blue. This is because IE7 can recognize !important*. Once recognized, it is executed, ignoring the following sentence. However, IE6 cannot recognize !important, so the previous part is skipped and executed directly. The second half.
3. Write three lines of code to control an attribute to distinguish between Firefox, IE7, and IE6:
background:orange;*background:green !important;*background:blue;
//This sentence will cause the background to be orange in Firefox, green in IE7, and blue in IE6. The reason is the same as before. Firefox cannot recognize *, so the next two sentences are not executed, and the second sentence is executed directly. Of course, IE7 can also execute the first line of code, but because it can also recognize the second sentence, it executes the second sentence of code and filters out the previous effect. However, IE7 cannot recognize the last sentence. . IE6 cannot recognize !imprtant. It originally ran the first sentence of code, but the second sentence cannot be recognized, so it naturally executes the last sentence.
Note: IE can recognize *; standard browsers (such as Firefox, Opera, Netscape) cannot recognize *; IE6 can recognize *, but not !important, IE7 can recognize *, and can also recognize !important ;FF cannot recognize *, but can recognize !important;
************************ *************************************************** ************************************************
Comparative analysis of win10 home version and professional version
What do full-width characters mean?
Linux compression zip command usage
How to read a column in excel in python
Clean up junk in win10
Flutter framework advantages and disadvantages
How to use the mid function
How to restore IE browser to automatically jump to EDGE
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
