Head Frist HTML and CSS-div与span

<div>元素

逻辑区(logical section)

就是页面上彼此相关的一组元素.利用这一概念,我们可以将一个页面的内容分为几个逻辑区,并将这些逻辑区分别包围在一个<div>元素中.一种常用的方法就是在属于一个逻辑区的元素周围放置<div>元素的开始和结束标记.

标出<div>

为了表达出分组的含义,需要利用id属性为<div>提供唯一一个标签,e.g.

<div id="cats">
    <p>1111</p>
</div>
<div id="dogs">
    <p>2222</p>
</div>

也可以为每一组元素指定样式,e.g.

#cats
{
    font-size: small;
}

#dogs
{
    color: #007e7e;
}

嵌套结构

e.g.

<div id="pets">
{
    <div id="cats">
        {
            <p>1111</p>
        }
    </div>
    <div id="dogs">
        {
            <p>2222</p>
        }
    </div>
}
</div>

注意

在页面中要使用<div>元素,但不要滥用.如果这样有助于你将页面分解成逻辑区,从而保证结构清晰并便于指定样式,那么可以增加更多的结构.如果只是为了在页面中创建大量的结构而使用<div>,就会使得页面复杂,而没有实际好处.

width属性

只指定内容区的宽度

text-align属性

作用:会对块元素中的所有内联内容对齐(居中/居左/居右)

子孙选择器

格式:父元素+空格+子孙元素{属性}

选择直接孩子:父元素+>+直接孩子

line-height属性

可以对它直接使用一个数字,例如使用数字1,就代表各个元素行高是其字体大小的1倍.

一些快捷方式

内边距简写

padding-top:    0px;
padding-right:  20px;
padding-bottom: 30px;
padding-left:   10px;//可以按照"上右下左"的顺序简写为:

padding: 0px 20px 30px 10px;

padding-top:    20px;
padding-right:  20px;
padding-bottom: 20px;
padding-left:   20px;//可以简写为:

padding: 20px;

padding-top:    20px;
padding-right:  0px;
padding-bottom: 20px;
padding-left:   0px;//若上下相同,左右相同则可以按照"上下,左右"的顺序简写为:

padding: 20px 0px;

外边距同理.

边框简写

边框的简写更加灵活,可以按照喜欢的顺序来指定:

border-width: thin;
border-style: solid;
border-color: #007e7e;//可以简写为:

border: thin solid #007e7e;
或
border: solid thin #007e7e;
等

背景图像同理.

字体简写

font: font-style font-variant font-weight font-size/line-height font-family;

/*前三个都是可选的,不过必须出现在font-size之前.

line-height也是可选的,放在font-size的后面,需要加/符号.

font-family必须指定一个字体,建议有候选字体,不同字体之间用逗号隔开.*/

<span>元素

<div>元素为块级元素创建逻辑划分,而<span>元素则用类似的方式建立内联内容的逻辑分组.

<ul>
<li><span class="cd">1111</span>,<span class="artist">2222</span></li>
<li><span class="cd">3333</span>,<span class="artist">4444</span></li>
<li><span class="cd">5555</span>,<span class="artist">6666</span></li>
</ul>

也可以增加一些样式.

.cd
{
    font-style: italic;
}

.artist
{
    font-weight: bold;
}

伪类

link:未访问,

visited:已访问,

hover:悬停,

focus:焦点(有些浏览器允许按下Tab键来轮流访问页面上的所有链接,浏览器访问到某个链接的时候,这个链接就拥有了焦点,这样利用键盘来访问链接的人就可以知道何时选择到正确的链接),

active:活动(用户第一次单击一个链接的时候,这个链接就处于活动状态).

a:link//没有空格
{
    color: green;
}

a:visited
{
    color: red;
}

a:hover
{
    color: yellow;
}

层叠

样式优先级

!important>作者>读者>浏览器

特定性计算

0   0   0分别代表id 类或伪类 元素名.

有则加1.

最后比较特定性数的大小,数字越大越特定.