ホームページ > 記事 > ウェブフロントエンド > いくつかのCSS要素の簡単な説明 div ul dl dt oldiv_html/css_WEB-ITnose
いくつかのCSS要素の簡単な説明 div ul dl dt oldiv_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:28:001816ブラウズ
几个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 的元素)。(类型选择器)
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的内容！
上記のコードから、次の関係がわかります:
h1 と p は両方とも div の「子」であり、それぞれ div と「親/子」関係を形成します。
h1,p,strong はすべて div の「子要素」です。 (3 つはすべて div 内に含まれます)
div は h1 と p の「親要素」です。
strong と p は「親/子」関係を形成し、strong の「親要素」は p です。
しかし、strongとdivの関係は「父と子」の関係ではなく、「祖父母と孫」の関係ですが、Strongはdivの「子（孫）要素」であることに変わりはありません。
div は h1 p Strong の「祖先」であり、3 つは div の「子 (孫) 要素」です。
h1 と p は隣接しています。
上記の例を継承して、E と F の関係を具体的に示します。strong の内容を Green に変更する必要がある場合、どのような方法を使用できますか?
div Strong {color:green;}
p >strong {color:green;}
div >strong {color:green;}
近接セレクターとユニバーサル セレクター: ユニバーサル セレクターにはアスタリスクが付いています。 *" は、任意のタグを置き換えるために使用できることを意味します。
例:
h2 * { color:green }
2. セレクター分類の概要
1. ワイルドカード セレクター
構文:
* { sRules }
説明:
ワイルドカード セレクター。選択したドキュメント ツリー (DOM) 内のすべてのタイプの単一オブジェクト。
ワイルドカード セレクターが単一セレクターの唯一のコンポーネントではない場合は、「*」を省略できます。
例:
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none;
2. 型セレクター
E { sRules }
説明:
タイプセレクター。ドキュメント言語オブジェクト (Element) タイプをセレクターとして使用します。
例:
td { font-size:14px; width:120px; }
a { text-decoration:none; }
疑似クラスは、特殊なクラスと見なすことができます。 CSS をサポートするブラウザで自動的に認識できる特別なセレクター。その最大の用途は、さまざまな状態のリンクに対してさまざまなスタイル効果を定義できることです。
1. 構文
疑似クラスの構文は、元の構文に疑似クラス（疑似クラス）を追加します。
selector:pseudo-class {property: value}
(selector: pseudo-class) {property: Value})
疑似クラスは、CSS によってすでに定義されており、クラス セレクターのような他の名前で任意に使用することはできません。上記の構文によれば、オブジェクト (セレクター) として解釈できます。特別な状態 (疑似クラス) スタイルで。
クラス セレクターと他のセレクターは、疑似クラスと混合することもできます:
selector.class:pseudo-class {property: value}
(selector.class:pseudo-class{property: value})
2 。アンカー疑似クラス
最も一般的に使用されるのは、a (アンカー) 要素の 4 つの疑似クラスです。これらは、動的リンクの 4 つの異なる状態を表します: リンク、訪問済み、アクティブ、ホバー (未訪問のリンク、訪問済みのリンク、アクティブなリンク、およびマウスオーバーリンク)。それぞれに異なる効果を定義します:a:link {color: #FF0000; text-decoration: none}
a:visited {color: #00FF00; text-decoration: none}
a:hover {color : #FF00FF; text-decoration: 下線}
a:active {color: #0000FF; text-decoration: 下線}
(上記の例では、リンクにアクセスしていない場合、その色は赤色であり、下線はありません)アクセス後は緑色で下線が付きません。リンクがアクティブになると青色で下線が付きます。マウスがリンク上にあると紫色で下線が付きます)リンクにアクセスする前にマウスがそのリンクをポイントしても、リンクにアクセスした後にマウスが再びポイントすることはありません。これは、a:hover を a:visited の前に置くためです。この場合、後者の方が優先されるため、リンクにアクセスするときに a:hover の効果は無視されます。したがって、これらのリンク スタイルを定義するときは、積み重ね順序に従い、a:link、a:visited、a:hover、a:actived の順序で記述する必要があります。
3. 疑似クラスとクラスセレクター
疑似クラスとクラスを組み合わせることで、同じページ上に異なるリンク効果のグループを作成できます。たとえば、リンクのグループを赤く定義し、アクセスした後、それらは青になり、他のグループは緑になり、訪問後は黄色になります:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue: link {color: #00FF00}
a.blue:visited {color: #FF00FF}
現在、別のリンクに適用されています:
これは最初のリンク セット
これは 2 番目のリンク セットです
4. その他の疑似クラス
さらに、 CSS2 では、first-letter および first-line の疑似クラスも定義されており、要素の最初の文字または最初の行に異なるスタイルを設定できます。
以下の例を見てください。段落記号内のテキストの最初の文字サイズをデフォルトのサイズの 3 倍に定義します。
……
这是一个段落，这个段落的首字被放大了。
我们再定义一个首行样式的例子：
……
这是段落的第一行
这是段落的第二行
这是段落的第三行
(上記の例では、段落の最初の行は赤、2 行目と 3 行目はデフォルトの色です)
注: 最初の単語と最初の行の疑似クラスは IE5 でサポートされている必要があります。 .5以上。
1. Block要素とinline要素の比較
すべてのHTML要素はblockまたはinlineのいずれかに属します。
ブロック要素の特徴は次のとおりです:
常に新しい行で開始します。
高さ、行の高さ、および上下の余白はすべて制御できます。
設定されていない限り、デフォルトの幅はコンテナの 100% です。 width
、