Home >Web Front-end >HTML Tutorial >Introduction to DIV CSS in WEB web design (reprinted from: China Webmaster Online)_html/css_WEB-ITnose
Introduction to DIV CSS in WEB web design (reprinted from: China Webmaster Online)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:29:511249browse
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
一、基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1、颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
2、定义字体
web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
3、群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
4、派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
5、id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
Then define it like this in the style sheet:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
where "menubar" is the id name you defined. Note the "#" sign in front.
The id selector also supports derivation, for example:
#menubar p { text-align : right; margin-top : 10px; }
This method is mainly used to define layers and those that are more complex and have many derived elements.
6. Category selector
Use a dot in CSS to indicate the category selector definition, for example:
.14px {color : #f60 ;font-size:14px ;}
in the page , use the class="category name" method to call:
14px size font
This method is relatively simple and flexible, and you can create and create new ones at any time according to the needs of the page. delete.
7. Define the link style
Four pseudo-classes are used in CSS to define the link style, namely: a:link, a:visited, a:hover and a: active, for example:
a :link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a :hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
above The statements respectively define the styles of "links, visited links, when the mouse is over, and when the mouse is clicked". Note that you must write in the above order, otherwise the display may be different from what you expected. Remember they are in order "LVHA".
Haha, I feel a little dizzy after reading so much. In fact, there are many more grammatical specifications for CSS. Here are just some commonly used ones. After all, we are taking it step by step, and we cannot become fat in one bite:)
2. Introduction to CSS layout
The biggest difference between CSS layout and traditional table layout is that the original positioning uses tables, through the spacing of tables or using colorless and transparent GIF images. Control the spacing of text layout sections; now, layers (divs) are used for positioning, and the spacing of sections is controlled through the margin, padding, border and other attributes of the layer.
1. Define DIV
Analyze a typical definition div example:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING: 20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
The description is as follows:
on the page.
MARGIN refers to the blank space left outside the border of the layer, used for page margins or to create a gap with other layers. "10px 10px 10px 10px" respectively represents the four margins of "top, right, bottom and left" (clockwise). If they are all the same, they can be abbreviated to "MARGIN: 10px;". If the margin is zero, write "MARGIN: 0px;". Note: When the value is zero, except for the RGB color value 0% which must be followed by a percent sign, in other cases the unit "px" does not need to be followed. MARGIN is a transparent element and cannot define a color. PADDING refers to the space between the layer's border and the layer's content. Like margin, specify the distance from the top, right, bottom and left borders to the content respectively. If they are all the same, they can be abbreviated to "PADDING:0px;". To specify the left side individually, you can write "PADDING-LEFT: 0px;". PADDING is a transparent element and cannot define color. BORDER refers to the border of the layer. "BORDER-RIGHT: #CCC 2px solid;" defines the right border color of the layer as "#CCC", the width as "2px", and the style as "solid" straight line. If you want a dotted line style, you can use "dotted". BACKGROUND defines the background of the layer. It is defined in two levels. First define the image background and use "url(../images/bg_logo.gif)" to specify the background image path; secondly define the background color "#FEFEFE". "no-repeat" means that the background image does not need to be repeated. If you need to repeat it horizontally, use "repeat-x", to repeat it vertically, use "repeat-y", and to repeat it to cover the entire background, use "repeat". The following "right bottom;" means that the background image starts from the lower right corner. If there is no background image, you can only define the background color BACKGROUND: #FEFEFE. COLOR is used to define font color, which has been introduced in the previous section.
TEXT-ALIGN is used to define the arrangement of content in the layer, center is in the middle, left is in the left, and right is in the right.
LINE-HEIGHT defines the line height. 150% means that the height is 150% of the standard height. It can also be written as: LINE-HEIGHT:1.5 or LINE-HEIGHT:1.5em, which have the same meaning. WIDTH is the width of the defined layer, which can be a fixed value, such as 500px, or a percentage, like "60%" here. It should be noted that this width only refers to the width of your content, and does not include margin, border and padding. However, it is not defined this way in some browsers, so you need to try more.
MARGIN refers to the blank space left outside the border of the layer, used for page margins or to create a gap with other layers. "10px 10px 10px 10px" respectively represents the four margins of "top, right, bottom and left" (clockwise). If they are all the same, they can be abbreviated to "MARGIN: 10px;". If the margin is zero, write "MARGIN: 0px;". Note: When the value is zero, except for the RGB color value 0% which must be followed by a percent sign, in other cases the unit "px" does not need to be followed. MARGIN is a transparent element and cannot define a color. PADDING refers to the space between the layer's border and the layer's content. Like margin, specify the distance from the top, right, bottom and left borders to the content respectively. If they are all the same, they can be abbreviated to "PADDING:0px;". To specify the left side individually, you can write "PADDING-LEFT: 0px;". PADDING is a transparent element and cannot define color. BORDER refers to the border of the layer. "BORDER-RIGHT: #CCC 2px solid;" defines the right border color of the layer as "#CCC", the width as "2px", and the style as "solid" straight line. If you want a dotted line style, you can use "dotted". BACKGROUND defines the background of the layer. It is defined in two levels. First define the image background and use "url(../images/bg_logo.gif)" to specify the background image path; secondly define the background color "#FEFEFE". "no-repeat" means that the background image does not need to be repeated. If you need to repeat it horizontally, use "repeat-x", to repeat it vertically, use "repeat-y", and to repeat it to cover the entire background, use "repeat". The following "right bottom;" means that the background image starts from the lower right corner. If there is no background image, you can only define the background color BACKGROUND: #FEFEFE. COLOR is used to define font color, which has been introduced in the previous section.
TEXT-ALIGN is used to define the arrangement of content in the layer, center is in the middle, left is in the left, and right is in the right.
LINE-HEIGHT defines the line height. 150% means that the height is 150% of the standard height. It can also be written as: LINE-HEIGHT:1.5 or LINE-HEIGHT:1.5em, which have the same meaning. WIDTH is the width of the defined layer, which can be a fixed value, such as 500px, or a percentage, like "60%" here. It should be noted that this width only refers to the width of your content, and does not include margin, border and padding. However, it is not defined this way in some browsers, so you need to try more.
2. CSS2 box model
Since the launch of CSS1 in 1996, the W3C organization has recommended that all objects on the web page be placed in a box (box). Designers can control this box by creating definitions. Properties, these objects include paragraphs, lists, titles, images, and layer
. The box model mainly defines four areas: content, padding, border and margin. The sample layer we talked about above is a typical box. For beginners, they are often confused about the levels, relationships, and mutual influences among margin, background-color, background-image, padding, content, and border. Here is a 3D schematic diagram of the box model, I hope it will be easier for you to understand and remember.
欢迎进入新《网页设计师》:web标准教程及推广
这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？
The specific style sheets are written in the corresponding sections. The key point is that the #mainbox layer is nested in three layers: #menu, #sidebar and #content. When the content of #content increases, the height of #content will increase, and the height of #mainbox will also expand, and the #footer layer will automatically move down. This achieves a high degree of adaptability.
3. All auxiliary images should use background processing
Using XHTML CSS layout, there is a technology that you are not used to at first. It should be said that it is a way of thinking and tradition. The table layout is different, that is: all auxiliary images are implemented with backgrounds. Something like this:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
Although it is possible to insert directly into the content, this is not recommended. The "auxiliary pictures" here refer to pictures that are not part of the content to be expressed on the page, but are only used for decoration, interval, and reminder. For example: pictures in photo albums, pictures in picture news, and the 3D box model pictures above are all part of the content. They can be directly inserted into the page using the
element, while others are similar to logos, title pictures, and list prefixes. Images must be displayed using background or other CSS methods.
There are two reasons for this:
Completely separate the performance from the structure, and use CSS to control all appearance and performance to facilitate revision.
Make the page more usable and friendly. For example, if a blind person uses a screen reader, pictures implemented using background technology will not be read aloud.
3. The first CSS layout example
The next step is to actually design the layout. As with the traditional method, you first have to have a rough outline idea in your mind, and then draw it out using photoshop. You may see that most websites related to web standards are very simple, because web standards pay more attention to structure and content. In fact, it has no fundamental conflict with the beauty of web pages. You can design it however you want. The layout is implemented using the traditional table method. DIV can also be implemented. Technology has a maturation process. Think of DIV as the same tool as TABLE. How to use it depends on your imagination.
Note: In actual application, DIV is indeed not as convenient as a table in some places, such as the definition of background color. But everything has gains and losses, and the choice depends on your value judgment. Okay, without further ado, let’s start:
1. Determine the layout
The initial design sketch of w3cn is as follows:
用表格的设计方法的话，一般都是上中下三行布局。用DIV的话，我考虑使用三列来布局,成为这样。
2、定义body样式
先定义整个页面的body的样式,代码如下：
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。
3、定义主要的div
初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:
/*定义页面左列样式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定义页面中列样式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定义页面右列样式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }
注意：定义中列和右列div我都采用了POSITION: absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。
这时候整个页面的代码是：
页面左列
页面中列
页面右列
这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？
4、100%自适应高度?
为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法。
自适应高度
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)：
Body
#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}
#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }
#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }
#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }
#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}
#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。
这个例子的页面主要代码如下：
The specific style sheets are written in the corresponding sections. The key point is that the #mainbox layer is nested in three layers: #menu, #sidebar and #content. When the content of #content increases, the height of #content will increase, and the height of #mainbox will also expand, and the #footer layer will automatically move down. This achieves a high degree of adaptability.
It is also worth noting that #menu and #content are floating on the right side of the page "FLOAT: right;", #sidebar is floating on the left side of the #menu layer "FLOAT: left;", this is floating Method positioning, you can also use absolute positioning to achieve such an effect.
There is another problem with this method, that is, the background of the sidebar #sidebar cannot be 100%. The general solution is to fill it with the body's background color. (The background color of #mainbox cannot be used because the background color of #mainbox is invalid in browsers such as Mozilla.)
4. 3D diagram of the CSS2 box model
in CSS2 The box model is key to our layout positioning. For example,
follows the box model specification. The margin, background-color, background-image, padding, content, and border defined by the box model are often confused by beginners’ levels, relationships, and interactions. Here is a 3D schematic diagram of the box model, I hope it will be easier for you to understand and remember.
Original image from: hicksdesign
It should be noted that IE and Mozilla browsers have inconsistent interpretations of the box model, resulting in The difficulty in our positioning is that the main difference is:
When IE calculates the distance between two divs, it will include the 1px border, but Mozilla does not; after setting the width of the div, if you add a value to padding , IE will subtract this value from the width, and Mozilla will add this value to the width.5. Introduction to w3c technical architecture
Original text: http://www.w3.org/Consortium/technology
Original author: w3c
Translation: A Hong
Legend
W3C Technical Architecture Diagram depicts a two-layer model: World Wide Web Architecture (labeled "One Web") Built on the Internet architecture. The rich Web layer in the figure shows the areas of concern and developing technologies of W3C.
Web architecture is depicted as a series of layers, each layer built on top of the other. From bottom to top:
URI/IRI, HTTP Web Architectural Principles XML Infosets; RDF(S) Graphs XML, Namespaces, Schemas, XQuery/XPath, XSLT, DOM, XML Base, XPointer , RDF/XML, SPARQL
Contains six boxes at the top level, corresponding to the main W3C activity groups: Web Applications, Mobile, Voice, Web Services, Semantic Web, and Privacy.
The "Interaction" box lists: XHTML, SVG, CDF, SMIL, XForms, CSS, and WCID. The "Mobile" box lists XHTML Basic, Mobile SVG, SMIL Mobile, XForms Basic, CSS Mobile, MWI BP. "Voice" box lists VoiceXML, SRGS, SSML, CCXML, and EMMA "Web Services" box The "Semantic Web" box lists SOAP, XOP, WSDL, WS-CDL, and WS-A. The "Semantic Web" box lists OWL, SKOS, and RIF. The "Privacy" box lists Listing P3P, APPEL, XML Encryption, XML Signature, and XKMS
An orange horizontal bar connects these fields: Web Accessibility (Web accessibility), Internationalization (Internationalization), Mobile Access ( Mobile Access), Device Independence, and Quality Assurance.
This example diagram shows the basic framework of the World Wide Web and the focus of W3C's work.
The foundation of URI, HTTP, XML and RDF supports five areas of work. Topics such as web accessibility, internationalization, device independence, and quality management are integrated into W3C technologies.
The W3C is working to transform the World Wide Web from its original design (basic HTML, URIs, and HTTP) into the model it will need in the future. W3C's technology will help the future World Wide Web become a highly stable, scalable and adaptable basic framework in the information world.
6. Analysis of CSS compatibility points IE vs FF
CSS compatibility points:
DOCTYPE affects CSS processing
FF: div setting margin- When left and margin-right are set to auto, they are already centered. IE cannot >
FF: After setting padding, the div will increase the height and width, but IE will not, so you need to use !important to set an additional height and widthFF: Support !important, but IE will ignore it, available !important Specially set the style for FF
The vertical centering problem of div: vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text and it will be vertically centered. The disadvantage is that you need to control the content without wrapping
cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be displayed in IE
FF: To add borders and background colors to links, you need to set display: block and float: left to ensure no line breaks. Referring to the menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If the height is not set, you can insert a space in the menubar. XHTML CSS Compatibility Solution Collection
There are many benefits to using the XHTML+CSS architecture. But there are indeed some problems, whether it is due to unskilled use or unclear thinking, I will first write down some of the problems I encountered below to save everyone from looking around^^
1. In mozilla firefox The inconsistent explanation with the BOX model in IE leads to a difference of 2px. Solution:
div{margin:30px!important;margin:28px;}
Note that the order of these two margins must not be reversed. According to Ajie, the !important attribute cannot be recognized by IE, but other browsers can. So it is actually interpreted like this under IE:
div{maring:30px;margin:28px}
If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important ;
2. The BOX interpretation of IE5 and IE6 is inconsistent. The width of div{width:300px;margin:0 10px 0 10px;}under IE5 will be interpreted as 300px-10px (right padding)-10px (left Padding) The final width of the div is 280px, while on IE6 and other browsers the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following modifications
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
, about this/**/. I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands, please let me know, thanks! :)
3. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so define it first
ul{margin:0;padding:0;}
can solve most problems
4. Regarding scripts, the language attribute is not supported in xhtml1.1. You only need to change the code to