Home > Article > Web Front-end > A simple explanation of several css elements div ul dl dt oldiv_html/css_WEB-ITnose

A simple explanation of several css elements div ul dl dt oldiv_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 12:28:001792browse

几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好

ol 有序列表。

……

……

……

表现为：

1……
2……
3……

ul 无序列表，表现为li前面是大圆点而不是123

……

……

很多人容易忽略 dl dt dd的用法

dl 内容块
dt 内容块的标题
dd 内容
可以这么写：

标题: 内容1; 内容2

dt 和dd中可以再加入 ol ul li和p

理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局

由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，就需要统一class与id的名称，前天花了一点时间，按照大多人的习惯，制定了下面的常用关键字：
容器：container/box
头部：header
主导航：mainNav
子导航：subNav
顶导航：topNav
网站标志：logo
大广告：banner
页面中部：mainBody
底部：footer
菜单：menu
菜单内容：menuContent
子菜单：subMenu
子菜单内容：subMenuContent
搜索：search
搜索关键字：keyword
搜索范围：range
标签文字：tagTitle
标签内容：tagContent
当前标签：tagCurrent/currentTag
标　题：title
内容：content
列表：list
当前位置：currentPath
侧边栏：sidebar
图标：icon
注释：note
登录：login
注册：register
列定义：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)

代码精简

　　使用DIV CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到spider喜欢，这样对收录数量有一定好处。

　　表格的嵌套问题搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。

　　使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

　　而DIV CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。搜索引擎优化及营销都是非常有利的。搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但?思蜀本人保持这样的观点，有异议者可以拿三组以上基本同等质量的网站对比观察。内容来自中国站长资讯网(www.chinahtml.com)

　　我想，这样的情况可能不是排名规则，最大的可能还是spider爬行网站时，出现以上差异导致收录质量的不同。

　　毕竟廖胜于无，建议建站或改版的朋友们，技术许可的情况下，还是选择DIV CSS布局为好。

CSS布局常用的方法：float:none|left|right
取值：
none:　默认值。对象不飘浮
left:　文本流向对象的右边
right:　文本流向对象的左边

它是怎样工作的，看个一行两列的例子
xhtml:

这里是第一列

这里是第二列

CSS:
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}

position:static|absolute|fixed|relative
取值：
static:　默认值。无特殊定位，对象遵循HTML定位规则
absolute:　将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
fixed:　未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative:　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

它来实现一行两列的例子
xhtml:

这里是第一列

这里是第二列

CSS:
#wrap{position:relative;width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}
他们的区别在哪?
显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

CSS常用布局实例

单行一列
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}

两行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

三行一列
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;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

单行两列
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

两行两列
#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:420px;}

三行两列
#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:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

单行三列

绝对定位
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#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

Thisisthemaincontent.

Thisistheleftsidebar.

Thisistherightsidebar.

CSS
body{
margin:0;
padding-left:200px;
padding-right:190px;
min-width:200px;
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;
right:200px;
margin-left:-100;
}
#right{
width:190px;
margin-right:-100;
}

*html#left{
left:190px;
}

这样的一个指令：(position)，在DreamWeaver中文版中翻译为“定位”，常用的属性有两个：relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚，这里做一些细致的讲解。

　　position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是真正的移动，这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。

　　position:absolute; 表示绝对定位，如果定义了这个属性的元素，其位置将依据浏览器左上角的0点开始计算，并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。

　　于是产生了一个问题：现在大家做的网页大部分是居中的，如果我需要这个元素跟着网页中的某个元素位置，不论屏幕的分辨率是多少它的位置始终是针对页内的某个元素的，靠单纯的absolute是不行的。

　　正确的解决方法是：在元素的父级元素定义为position:relative;(这里可以是祖父级，也可以是position:absolute;，多谢谢old9的提出)需要绝对定位的元素设为position:absolute;

　　这样再设定top,right,bottom,left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧。

一.选择符模式

模式/含义/内容描述

匹配任意元素。(通用选择器)

匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)

E F

匹配元素 E 的任意后代元素 F 。(后代选择器)

E > F

匹配元素 E 的任意子元素 F 。(子选择器)

E:first-child

当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-child 伪类)

E:link E:visited

如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)

E:active E:hover E:focus

在确定的用户动作中匹配 E 。(动态伪类)

E:lang(c)

如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)

E F

如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器)

E[foo]

匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)

E[foo="warning"]

匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)

E[foo~="warning"]

匹配其“foo”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)

E[lang|="en"]

匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)

DIV.warning

仅 HTML。用法同 DIV[class~="warning"]。(类选择器)

E#myid

匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)

我们用下面的例子来解释“父元素”、“子元素”、“父/子”及“相邻”这几个概念。

这是是h1的内容

这是一个段落p的内容！这里是strong的内容这是一个段落p的内容！

From the above code, we can find this relationship:

h1 and p are both "sons" of div, and they form a "parent/child" relationship with div respectively.

h1, p, strong are all "child elements" of div. (All three are contained within a div)

div is the "parent element" of h1 and p.

strong and p form a "parent/child" relationship, and the "parent element" of strong is p .

However, the relationship between strong and div is not a "father/son" relationship, but a "grandparent-grandson" relationship, but strong is still the "child (grandson) element" of div.

div is the "ancestor" of h1 p strong, and the three are the "child (grandson) elements" of div.

h1 and p are adjacent.

Inherit the above example to demonstrate the relationship between E and F: If we need to change the content of strong to green, what methods can we use?

div strong {color:green;}

p > strong {color:green;}

div > strong {color:green;}

Proximity selectors and universal selectors: Universal selectors are represented by an asterisk "*" and can be used to replace any tag.

Example:

h2 * { color:green }

2. Introduction to selector classification

1. Wildcard selector

Syntax:

* { sRules }

Description:

wildcard selector. All types of single objects in the selected document tree (DOM).

If the wildcard selector is not the only component of a single selector, the "*" can be omitted.

Example:

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

2. Type selector

Syntax:

E { sRules }

Description:

Type selector. Use the document language object (Element) type as the selector.

Example:

td { font-size:14px; width:120px; }

a { text-decoration:none; }

Pseudo class can be seen as a special class selector that can be automatically recognized by browsers that support CSS. Its greatest use is that it can define different style effects for links in different states.

1. Syntax

The syntax of pseudo-class is to add a pseudo-class (pseudo-class) to the original syntax:

selector:pseudo-class {property: value }

(selector: pseudo-class {attribute: value})

Pseudo-classes are different from classes. They are already defined by CSS and cannot be arbitrarily used with other names like class selectors. According to the above syntax, it can be interpreted as the style of the object (selector) in a special state (pseudo-class).

Class selectors and other selectors can also be mixed with pseudo-classes:

selector.class:pseudo-class {property: value}

(selector.class :pseudo-class {attribute: value})

2. Anchor pseudo-class

The most commonly used ones we use are the 4 pseudo-classes of a (anchor) elements, which represent the 4 types of dynamic links Different states: link, visited, active, hover (unvisited link, visited link, active link and mouse over link). We define different effects for them respectively:

a:link {color: #FF0000; text-decoration: none}

a:visited {color: #00FF00; text-decoration: none }

a:hover {color: #FF00FF; text-decoration: underline}

a:active {color: #0000FF; text-decoration: underline}

（ In the above example, the link is red without underline when it is not visited, green without underline when accessed, blue and underlined when the link is activated, purple and underlined when the mouse is on the link)

Note: Sometimes this link has an effect when the mouse points to it before accessing it, but has no effect when the mouse points to the link again after the link is accessed. This is because you put a:hover in front of a:visited. In this case, because the latter one has a higher priority, the effect of a:hover will be ignored when the link is accessed. Therefore, according to the stacking order, when we define these link styles, we must write them in the order of a:link, a:visited, a:hover, and a:actived.

3. Pseudo-class and class selectors

By combining pseudo-classes and classes, you can create several sets of different link effects on the same page. For example, we define a The group link is red and blue after visiting; the other group is green and yellow after visiting:

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

Now applied in different On the link:

This is the first set of links

This is the second set of links

4. Other pseudo-classes

In addition, CSS2 also defines the first word and first line ( First-letter and first-line) pseudo-classes can set different styles for the first word or first line of elements.

Look at this example below. We define the size of the first word of the text in the paragraph mark to be 3 times the default size:

……

这是一个段落，这个段落的首字被放大了。

我们再定义一个首行样式的例子：

……

这是段落的第一行

这是段落的第二行

这是段落的第三行

(In the above example, the first line of the paragraph is red, and the second and third lines are the default color)

Note: The pseudo-classes of the first word and first line need to be supported by IE5.5 or above. .

1. Comparison of Block and inline elements

All HTML elements are between block and inline one.

The characteristics of the block element are:

always starts on a new line;

Height, line height and top and bottom margins can all be controlled;

The default width is 100% of its container, unless a width is set

,
,
and < ;li> is an example of a block element.

On the contrary, the characteristics of inline elements are:

and other elements are on the same line;

height, line height and top and bottom margins cannot be changed;

The width is the width of its text or image and cannot be changed.

, , , , , and are examples of inline elements.

Use the display: inline or display: block command to change this feature of an element. When do you need to change this attribute?

Let an inline element start on a new line;

Keep block elements and other elements on one line;

Control the width of inline elements (especially useful for navigation bars);

Control the height of inline elements;

You can set a background color with the same width as the text for a block element without setting the width.

2. Another box hacking method

The reason why there are so many box hacking methods is because before IE 6, the understanding of box was different from others. Its width must include edges. wide and blank. To make IE5 consistent with other browsers, you can use CSS:

padding: 2em;

border: 1em solid green;

width: 20em;

width: 14em;

The first width is recognized by all browsers, but IE5. Stupid syntax analysis!), so IE5.

3. 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 also work on IE, you can put a
under the tag, and then specify a class for the div:

Then the CSS is designed like this:

#container

{

min-width: 600px;

width:expression(document.body.clientWidth < 600? "600px": "auto" );

}

The first min-width is normal; but the second one width uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

The same method can also be used to achieve the maximum width for IE:

#container

{

min-width: 600px;

max-width: 1200px;

width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px" : ”auto";

}

4. Problems with IE and width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. . This is a big problem. If you only use width and height, these two values will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.

For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:

.box

{

width: 80px;

height: 35px;

}

body .box

{

width: auto;

height: auto;

min-width: 80px;

min-height: 35px;

}

All browsers can use A box setting, but IE does not recognize the second setting because the second setting is more special, so it will overwrite the first setting.

In previous web development columns, I introduced many methods of processing HTML tables, although the method of using tables to layout web pages is no longer fashionable. , but you can still use tables to display table column data.

There are many ways to display and style tables. In this article, I will introduce how to use CSS to style table borders. .

Link

CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一个可选的锚标记和单元格以及数据行，表格模型包含以下的元素：表格、锚、数据行、数据行组、数据列、数据列组和单元格。这篇文章将集中讲解表格中各个元素的边框处理方法。

边框

根据不同的需求，您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框：

TABLE { 5px solid black; }

除此以外，您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型：

l none: 指定表格没有边框，所以边框宽度为0。

l dotted: 由点线组成的表格边框。

l dashed: 由虚线组成的表格边框。

l solid: 由实线组成的表格边框。

l Double: 由双实线组成的表格边框。

l Groove: 槽线效果边框。

l ridge: 脊线效果边框，和槽线效果相反。

l inset: 内凹效果边框。

l outset: 外凸效果边框，和内凹效果相反。

每个边框类型都可以指定一种颜色，边框是绘制在背景颜色上的，列表A使用边框属性来样式化整个表格以及锚标记和单独的单元格。

HTML Table

Person
Sales
First Quarter Sales

Mr. Smith 600.00
Mr. Jones 0000.00
Ms. Williams 0000.00

Let's sale, sale, sale!

列表A

这个例子展示了很多可供使用的表格边框的选项，您可以使用您熟悉的度量单位（像素、磅，行长单位等）。设定边框的尺寸，您可以使用十六进制数值或颜色名称来指定边框颜色。以下的例子演示了定义边框的方法。

border: 5px solid red;

在这一条语句中融合了宽度、样式和颜色属性的定义，但是您也可以对这些元素进行单独定义，如下所示：

border-width: 5px;

border-style: solid;

border-color: red;

除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别进行定义，包括顶部、底部、左边和右边。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。

CSS布局常用的方法

float:none|left|right

取值：

none: 默认值。对象不飘浮

left: 文本流向对象的右边

right: 文本流向对象的左边

它是怎样工作的，看个一行两列的例子

xhtml代码:

Example Source Code

这里是第一列

这里是第二列

CSS Code:

Example Source Code

#wrap{width:100;height:auto;}

#column1{float:left; width:40;}

#column2{float:right;width:60;}

.clear{clear:both;}

position:static|absolute|fixed |relative

Value:

static: Default value. There is no special positioning. The object follows HTML positioning rules

absolute: Drag the object out of the document flow and use left, right, top, bottom and other attributes relative to its closest parent object with the most positioning settings. Perform absolute positioning. If no such parent object exists, the body object is used. The cascade is defined through the z-index attribute

fixed: Not supported. Object positioning follows the absolute method. But some specifications must be followed

relative: Objects cannot be stacked, but will be offset in the normal document flow based on left, right, top, bottom and other attributes

It implements one row and two columns Example

xhtml code:

Example Source Code

This is the second column

CSS Code:

Example Source Code [www.52css.com]

#wrap{position:relative;width:770px;}

#column1{ position:absolute;top:0;left:0;width:300px;}

#column2{position:absolute;top:0;right:0;width:470px;}

them What's the difference?

Obviously, float is relatively positioned and will change with the size and resolution of the browser, but position does not work, so under normal circumstances, it is still a float layout!

In the past, creating a printer-friendly version of a web page meant designing a layout and formatting with modified separate pages so that you can get satisfactory results when printing. Now, by using structured XHTML and CSS, you can achieve the same effect with far less effort.

From screen display to printing

Most web pages are designed to be viewed on a computer screen. However, sometimes users need to print out certain pages, perhaps to keep a long-term record or to use them as convenient offline reference.

The trouble now is that many of the features that make Web pages look eye-catching and colorful on a computer color screen do not have the same effect on a printed version of a Web page?? Especially when the printer is When it's black and white. When downgraded to grayscale printing, color combinations will lose contrast; graphics will look distorted and take too long to print; navigation buttons that play an important role on Web pages will not print properly. There is also no use on the page.

In order to overcome these problems, Web creators often design a printer-friendly version of the page so that visitors will have the desire to print. Printer-friendly versions usually contain the same content as the main Web page, but omit most graphics, background, and navigation elements. The page also converts color into some form to produce an acceptable grayscale image.

CSS Solution

One advantage of using structured XHTML markup and CSS formatting to separate content and presentation is that by changing the CSS style, you can easily re- format. Therefore, creating a printer-friendly page is a matter of linking a different CSS file to the same XHTML page.

You can link both screen style sheets and print style sheets into the same XHTML file, so there is no need to create a separate printer-friendly page, just a printer-friendly style sheet. When you include a multimedia type file in the link code, you are telling the browser which CSS rules to follow or ignore for screen output, and which rules to use for print output.

Here is an example of linking to a pair of CSS files:

/>

If you need to support older browsers, you must stick to the CSS1 media descriptors screen and print. They are mutually exclusive, so browsers ignore print style sheets when generating pages for screen display, and vice versa. Therefore, each style sheet needs to contain the same style selector, but have different rule declarations to generate page styles separately for different output devices.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A good way to control the absolute centering of DIV pages using CSS_html/css_WEB-ITnoseNext article：A good way to control the absolute centering of DIV pages using CSS_html/css_WEB-ITnose
Related articles
See more
Summary of Html knowledge
How to learn HTML quickly
The difference between html xhtml xml
The difference between src and href attributes
About HTML5 and CSS replacement use

Mr. Smith	600.00
Mr. Jones	0000.00
Ms. Williams	0000.00
Let's sale, sale, sale!