Div+CSS基础代码网页布局+实例教程(2)

我未被加粗 CSS 加粗基础技巧实例

.yangshi1{ font-weight:bold}

.yangshi2{ font-weight:800}

代码：

<span class="yangshi1">我被加粗</span><br />

<span class="yangshi2">我也被加粗了</span><br />

我未被加粗

Padding 属性

Padding属性包含了

padding left ：左补距离（设置距左内边距）

；padding top：头顶补距离（设置距顶部内边距）

；padding right ：右补距离（设置距右内边距）

；padding bottom ：底补距离（设置距低内边距）。

其二维构建图可见CSS属性二维图。

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

Padding 解析图

padding left用法：

padding-left:10px; 这个意思距离左边补距10像素，可跟百分比如（padding-left:10%; 距离左边补10%的距离）；

padding right用法：

padding-right:10px; 这个意思距离右边补距10像素，可跟百分比如（padding-right:10%; 距离右边补10%的距离）；

padding top用法：

padding-top:10px; 这个意思距离顶边补距10像素，可跟百分比如（padding-top:10%; 距离顶边补10%的距离）；

padding bottom用法：

padding-bottom:10px; 这个意思距离低边补距10像素，可跟百分比如（padding-bottom:10%; 距离底边补10%的距离）；

注意padding中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结束，并且全部用小写半角字母。

CSS 注解

作用：css注解（css 注释）可以帮助我们对自己写的CSS文件进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性，同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的，以便顺利快速开发div css网页。

CSS注解是以“/*”斜杠一个星号开始，以“*/”星号斜杠结束，注解说明内容放到“/*”“*/”中间。

css注解——div+CSS注释示例如下：

/* css注解实例css注释实例 */

/* body定义 */

body{ text-align:center; margin:0 auto;}

/* 头部css定义 */

#header{ width:960px; height:120px;}

CSS超链接

超链接的代码

<a href="/" target="_blank" title="关于div css的网站">DIV+CSS</a> 解析如下：

href 后跟被链接地址目标网站地址这里是/

target

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

_blank -- 在新窗口中打开链接

_parent -- 在父窗体中打开链接

_self -- 在当前窗体打开链接,此为默认值

_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

CSS可控制超链接样式 css链接样式 如下

a:active是超级链接的初始状态

a:hover是把鼠标放上去时的状况

a:link 是鼠标点击时

a:visited是访问过后的情况

超链接样式案例

1、通常对全站超链接样式化方法

a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none;

a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;

2、通过链接内设置类控制超链接样式css方法

案例超链接代码<a href="/" class="yangshi">CSS</a>

对应CSS代码

a.yangshi{color:#333;text-decoration:none; }

a.yangshi:hover {color:#CC3300;text-decoration:underline;}

通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式

3、通过对应超链接外的父级的css类的css样式来控制超链接的样式

案例超链接代码<div class="yangshi"><a href="/">CSS</a></a> 对应CSS代码

.yangshi a{color:#333;text-decoration:none; }

.yangshi a:hover {color:#CC3300;text-decoration:underline;}

这里值得注意的是a.yangshi与.yangshi a的样式css代码区别

字体（font-family）

CSS运用实例代码：

.divcss5{ font-family:黑体;}

<div class="divcss5">我也是黑体字体</div>

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

Html的文字字体设置代码：

<font face="黑体">我是黑体字</font>

边距 margin

CSS优化

CSS代码优化地方：

1、border()简写：

border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid

#000;border-right:1px solid #000;

可以简写为：border:1px solid #000;

2、padding（）简写：

padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;

可简写为：padding:1px 2px 3px 4px;

padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;

可简写为：padding:1px;

3、简写

margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;

可简写为：margin:1px 2px 3px 4px;

margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;

可简写为：margin:1px;

4、简写

background-color:#000;可以简写为background:#000;

background-image:url(图片地址)

可简写为：background:url(图片地址)

5、简写

font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;

可简写为：font:12px/12px Arial, Helvetica, sans-serif;

二、CSS重用优化

这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便

如下：

.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}

.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}

他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同

我们就可以提取他们相同属性

Div+CSS基础代码网页布局+实例教程,唐山小鱼网络提供

.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{text-align:right; }

CSS ID与CSS CLASS

Css id 知识

一个网页里ID只能使用一次。当然即使一个id在一个网页内被使用多次，其CSS样式仍然可以实现生效，但是一般规定W3C标准是使用一次

id 选择器以 "#" 来定义，命名。

定义命名css id选择器例子 …… 此处隐藏：2761字，全部文档内容请下载后查看。喜欢就下载吧 ……