CSS样式表代码布局基础教程

CSS样式表代码布局基础教程

古塔网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联公司于2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

CSS样式表代码布局基础教程—课程10：外部样式表(一)

十、外部样式表

外部样式表是把各种样式单独存在一个文件里，供其他多个网页调用，下面我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－保存”命令，以“lx10.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；

3）按照基础02课的方法，输入、和的内容；

2、外部样式表

1）点菜单“文件－新建”，新建一个空白文档，保存文件名为 style.css ，位置跟 lx10 放一起，这是一个单独的文件；

2）在里面输入下面的内容；

/* by TeliuTe */

body {

background-color: #ccffff;

font-size:1.2em;

span {

color:#800000;

.myblue {

color:blue;

3）第一行 /* ... */ 是注释，注明作者版权用途等，根据自己的需要，

下面的内容跟内部样式表相同，各个标签和它的样式，保存一下文件；

4）回到 lx10.html 文档中，在 head 区内加上下面一行外部引用标识；

5）然后在 body 区内，输入下面的内容；

1）点菜单“文件－新建”，新建一个空白文档，保存文件名为 style.css ，位置跟 lx10 放一起，这是一个单独的文件；

6）保存一下文件，回到自己文件夹中，打开 lx10 网页，看一下效果；

7）在多个网页具有相同样式时，使用外部样式表可以节省空间和减小网页大小；

本节学习了外部样式表的使用方法，你成功地完成了本教程，欢迎继续学习本站的其他课程！

本教程由86团学校TeliuTe制作

（计算机基础知识，电脑知识入门学习，请到http://电脑知识网）

CSS标签大全(一)

字体属性：(font)

大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

行高 line-height: normal;(正常) 单位：PX、PD、EM

粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)

变体 font-variant: small-caps;(小型大写字母) normal;(正常)

大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性：(background)

色彩background-color: #FFFFFF;

图片background-image: url();

重复background-repeat: no-repeat;

滚动background-attachment: fixed;(固定) scroll;(滚动)

位置background-position: left(水平) top(垂直);

简写方法 background:#000 url(..) repeat fixe辅助图片一律用背景处理d left top;

区块属性： (Block)

字间距letter-spacing: normal; 数值

对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进text-indent: 数值px;

垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

词间距word-spacing: normal; 数值

空格white-space: pre;(保留) nowrap;(不换行)

显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

方框属性：(Box)

width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左

边框属性： (Border)

border-style: dotted(点线); dashed(虚线); solid(实线); double(双线); groove(槽线); ridge;(脊状) inset;(凹陷) outset;

border-wid

th:; 边框宽度

border-color:#;

简写方法border：width style color;

列表属性： (List-style)

类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

图像list-style-image: url(..);

定位属性： (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切) css属性代码大全

一 CSS文字属性：

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

text-decoration:line-through; /*加删除线*/

text-decoration: overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分散对齐*/

vertical-align属性

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

二、CSS边框空白

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白*/

三、CSS符号属性：

list-style-type:none; /*不编号*/

list-st

yle-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*图片式符号*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*缩进*/

四、CSS背景样式：

background-color:#F5E2EC; /*背景颜色*/

background:transparent; /*透视背景*/

background-image : url(/image/bg.gif); /*背景图片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

指定背景位置

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

五、CSS连接属性：

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式：

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

六、CSS框线一览表：

border-top : 1px solid #6699cc; /*上框线*/

border-bottom : 1px solid #6699cc;

/*下框线*/

border-left : 1px solid #6699cc; /*左框线*/

border-right : 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 /*设置上框线top颜色*/

border-top-width :1px /*设置上框线top宽度*/

border-top-style : solid/*设置上框线top样式*/

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表单运用：

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单 选项1选项2

八、CSS边界样式：

margin-top:10px; /*上边界*/

margin-right:10px; /*右边界值*/

margin-bottom:10px; /*下边界值*/

margin-left:10px; /*左边界值*/

CSS 属性： 字体样式(Font Style)

序号 中文说明 标记语法

1 字体样式 {font:font-style font-variant font-weight font-size font-family}

2 字体类型 {font-family:"字体1","字体2","字体3",...}

3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字体风格 {font-style:inherit|italic|normal|oblique}

5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字体颜色 {color:数值;}

7 阴影颜色 {text-shadow:16位色值}

8 字体行高 {line-height:数值|inherit|normal;}

9 字 间 距 {letter-spacing:数值|inherit|normal}

10 单词间距 {word-spacing:数值|inherit|normal}

11 字体变形 {font-variant:inherit|normal|small-cps }

12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字体变形 {font-size-adjust:inherit|none}

14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本样式(Text Style)

序号 中文说明 标记语法

1

行 间 距 {line-height:数值|inherit|normal;}

2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:数值|inherit}

4 水平对齐 {text-align:left|right|center|justify}

5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 书写方式 {writing-mode:lr-tb|tb-rl}

背景样式

序号 中文说明 标记语法

1 背景颜色 {background-color:数值}

2 背景图片 {background-image: url(URL)|none}

3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:数值|top|bottom|left|right|center}

6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

框架样式(Box Style)

序号 中文说明 标记语法

1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 补 白 {padding:padding-top padding-right padding-bottom padding-left}

3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

宽度值： thin|medium|thick|数值

4 边框颜色 {border-color:数值 数值 数值 数值} 数值：分别代表top、right、bottom、left颜色值

5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 边 框 {border:border-width border-style color}

上 边 框 {border-top:border-top-width border-style color}

右 边 框 {border-right:border-right-width border-style color}

下 边 框 {border-bottom:border-bottom-width border-style color}

左 边 框 {border-left:border-left-width border-style color}

7 宽 度 {width:长度|百分比| auto}

8 高 度 {height:数值|auto}

9 漂 浮 {float:left|right|none}

10 清 除 {clear:none|left|right|both}

分类列表

序号 中文说明 标记语法

1 控制显示 {display:none

|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 图形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目录列表 {list-style:目录样式类型|目录样式位置|url}

7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。break-word是控制是否断词的。normal是默认情况，英文单词不被拆开。break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。为了解决长串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。所以，综上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

CSS样式表代码布局基础教程—课程9：链接样式

九、链接样式

使用伪类可以设置链接的样式，比如改变颜色、去掉下划线等，下面我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－打开”命令，打开自己文件夹里的lx7.html

3）再点菜单“文件－另存为”命令，保存文件名为 “lx9.html”

2、设置伪类

1）在 head 区内，输入内部样式表，设定各个 的锚标记样式，如下；

2）第一个 a 设定全局锚点的样式，用块显示、宽度是50像素、背景色是浅绿色，接下来是锚点 a 的成员：

link 是链接，设定页面中的链接样式，颜色蓝色，不带下划线，

visted 是访问过的链接，设定样式为栗色、不带下划线，

active 是按下鼠标时的链接，设定颜色为绿色、无下划线，

hover 是鼠标移过来悬停，设定颜色为红色、有下划线，背景色改成黄色，hover 放在其他几个成员的后面；

3）保存一下文件，回到自己的文件夹中，打开 lx9 网页，试着用鼠标点击、拖动链接，看一下效果；

本节学习了设置链接样式的基本方法，如果你成功地完成了练习，请继续学习下一课内容；

CSS样式表代码布局基础教程—课程8：内部样式表(一)

八、内部样式表

内部样式表放在网页的...区内，集中在一起方便管理，下面我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－保存”命令，以“lx8.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；

3）按照基础02课的方法，输入、和的内容；

2、内部样式表

1）对系统标签使用样式，这会影响所有的这种标签，在 head 区输入下面的代码；

2）第一行是样式表开始，最后是样式表结束， 是注释标签，

首先是对 body 标签设置样式，这样凡是在 body 区里的内容，都会使用这个样式，设置背景色和文字大小

然后对 span 标签设置样式，设置内容的颜色，以后凡是用到 span 的地方，都使用这个颜色；

3）接着在 body 区里输入下面的内容；

1）对系统标签使用样式，这会影响所有的这种标签，在 head 区输入下面的代码；

4）保存一下文件，回到自己的文件夹里，打开 lx8 网页，看一下效果；

5）自定义样式选择符，除了系统的标签外，也可以自己定义需要的样式标记，在 head 的.样式表里加入下面的代码；

.myblue {

color:blue;

前面的点，表示这是一个通用的样式，可以重复使用，如果是 #号，表示是一个标识符，是专用唯一的 id，myblue 是自定义的样式名称；

6）在 body 区里加入下面的代码，加在上一行的前面，再加上

标签分成两段；

7）这儿使用的是 span，里面的 class 套用的是 myblue 样式，替换了前面设的样式，

保存一下文件，到浏览器中看看效果；

本节学习了使用内部样式表的基本方法，如果你成功地完成了练习，请继续学习下一课内容；

CSS样式表代码布局基础教程—课程7：ul列表(一)

七、ul 列表

对于排列有序的条目，可以使用列表来实现，下面我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－保存”命令，以“lx8.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；

3）按照基础02课的方法，输入、和的内容；

2、使用列表（计算机基础知识，电脑知识入门学习，请到http://电脑知识网）

1）在后面接着输入下面的代码；

第一课

第二课

第三课

2）前面的

建立一个列表，里面的各个

是列表项，各个列表项排列对齐缩进，前面有一个圆点列表符号，

保存一下文件，到自己文件夹里，打开 lx7 网页，看看列表的效果，这儿加了 超级链接；

3）如果要去掉前面的圆点，可以在 ul 的样式里设定，前面的缩进也可以设定内边距为 0，输入下面的代码；

第一课

第二课

第三课

4）保存一下，再到浏览器里看一下，三个列表都排到了左边对齐；

5）如果要排列成横向水平的菜单样式，可以在每个列表项里加上 float 属性，防止重叠再设定一个宽度，代码如下；

6）保存一下，再到浏览器里看一下，三个列表项都水平排列了；

本节学习了列表的基本使用方法，如果你成功地完成了练习，请继续学习下一课内容；

CSS样式表代码布局基础教程—课程6：div布局(一)

六、div 布局

默认 div 占据一行，第二个 div 到下一行去，怎样用 div 进行分栏布局，我们来看一个练习；

1、文本编辑器

1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；

2）点菜单“文件－打开”命令，打开上次的 lx5 网页，再点“文件－另存为”，以“lx6.html”为文件名，保存到自己的文件夹；

3）按照两列并排来进行布局；

2、定位布局

1）在下面加一个

标签，作为主框架，在标签里加入下面的样式；

2）前面的 id 是这个 div 的标识符，用来标记这个 div 容器，

在里面的样式里设置了颜色、边框、内边距，

设定了固定宽度 604，高度 202，这个可以计算出来，根据下面两列的宽度再加上内边距；

3）修改里面的古诗的 div 样式，加上背景色、去掉内外边距，最后加上一个左浮动 float:left

4）在这个后面，再加上另一个 div，样式相同，里面输入另一首古诗 ；

5）这儿的 float:left; 让这个 div 框，跟上一个框并排左对齐，而不是到下一行去，

最后再加一个标签，结束最外面的大框架；

6）保存一下文件，回到自己文件夹里，打开 lx6 网页看看效果；

本节学习了使用 div 布局的基本方法，如果你成功地完成了练习，请继续学习下一课内容；

;

CSS如何设置文字字体

如果你想你网站上的文字看起来更加不一样，就必须要给网页中的标题、段落和其他页面元素应用不同的字体。你可以用font-family属性在CSS样式里设置字体，如： font-family:Arial; 但是设置的这种字体，你电脑上必须装有该字体，否则将按原字体样式显示。当然，也可以写上多种字体，当对方浏览你的网站，没有安装第一种字体时，浏览器就会在列表中继续往上搜寻，直到找到有适合的字 体为止，像这样： font-family:Arial,Helvetica,sans-serif; 在上例中，Web浏览器会先看看是否安装了Arial字体。如果安装了，那么就用Arial字体显示；如果没有安装，浏览器就会继续寻找Helvetica字体；如果还是没有找到，最后它就会指定一种通用的字体--sans-serif。如果字体的名称中包含多个单词时，则必须用双引号（“”）将它们括起来，如： font-family:"Times New Roman",Times,serif; 以下就介绍几种常用的font-family字体类型组合，每一列的最后都包含一种通用的字体。 1、Serif字体：最适用于冗长的文字信息，因为读者都会觉得这种字体使字母主笔划的结尾处会有一些细小的“足”，能够比较有效地引导人们的视线从一个字母一到到下一个字母，阅读起来感觉更加轻松。serif字体包括：Times，Times New Roman、Georgia。 2、Sans-serif字体：它看起来干净而简洁，所有经常被用在标题上。Sans-serif字体包括：Arial、Helvetica、Verdana和Formata。 3、Monospaced字体：它经常用于显示计算机代码，它每个字母都是等宽的。

CSS常用样式二

实际应用，更多的使用italic属性值

实际应用中， 行高的数值通过设计图获取， 量取数值时需要使用一些辅助软件工具

选中文字工具，属性选中：不消除锯齿

字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。

font属性五个单一属性的值可以进行合写， 属性值可以有2到多个， 值之间用空格进行分隔。

font进行综合书写时， 必须有字号和字体参与， 而且必须字号在前， 字体在后， 不能颠倒顺序。

font属性经常对字体、 字号、 行高进行合写， 书写顺序必须是字号、 行高、 字体， 字号和行高之间必须用/进行分隔

如果font属性需要设置加粗和斜体， 两个属性值只能写在最前面， 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置

作用：设置文本整体是否有线条的装饰效果

作用：设置段落首行是否进行缩进

实际应用中，常用em

属性值区分正负， 正数表示向右缩进， 负数表示向左缩进

浏览器控制台中的盒模型图

作用： 设置可以添加元素内容的区域的宽度。

作用： 设置可以添加元素内容的区域的高度。

如果一个元素不添加 height 属性， 默认属性值为auto， 浏览器会自动计算出实际高度， 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。

书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左

设置四个属性值， 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值， 分配给上下、 左右 。

设置属性值只有一个， 四边的值相同。

作用： 设置边框的颜色。

属性值： 颜色名或颜色值， 整体类似 padding 综合属性写法。

每个单一属性都必须与复合属性 border 一致， 设置三个属性值。

书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左

设置四个属性值， 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值， 分配给上下、 左右 。

设置属性值只有一个， 四边的值相同。

给 body 标签设置整体文字样式， 让大部分后代标签全部去继承

设计图中盒子高度占位是固定的， 后面同级元素在高度下面加载。多余内容会溢出盒子。

设置了高度的盒子， 如果内部元素的加载高度超过父级， 会溢出。可以通过一个溢出的属性 overflow， 进行溢出部分内容的显示效果设置。

要求盒子高度必须自适应内部内容的高度。

或者设置height的属性值是自动的。

一个元素内部嵌套的子元素， 在父元素中居中。

针对类似 div 样式上必须独占一行的盒子， 如果子盒子宽度低于父盒子宽度， 可以设置子盒子的 margin 值， 水平方向的值都设置为 auto。

原因： auto 只在水平方向有作用， 水平方向的 margin 如果设置为 auto， 边距会自动无限增大， 直到撑满整个父元素除了子元素宽度之外剩余的区域， 如果两个水平方向都是 auto， 两边都要无限大， 只能达到一个平衡， 两边距离相同， 导致盒子居中。

一般情况下， 一个父元素内部可以放一个或多个子元素， 而且多个子元素要排成一行显示， 必须保证父元素的宽度一定要足够（不考虑溢出情况） ， 需要遵循一个设置尺寸的规律： 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin

如果不满足条件： 要么多余的子元素掉下来不能在一排， 要么溢出父元素

父子盒模型中， 只有一个子元素， 且子元素是类似 div 标签必须占一行的。不设置子元素的 width 属性， 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin， 不需要手动去进行内减， 子元素的 width 会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

在垂直方向如果有两个元素的外边距有相遇的， 浏览器中加载的真正的外边距不是两个间距的加和， 而是两个边距中值较大的， 边距值小的塌陷到了边距值大的值内部。

上面的元素有下边距， 下面的元素有上边距， 两个边距相遇， 真正的盒子间距离是较大的那个值

父子元素之间也会出现 margin 塌陷， 父元素和子元素都设置了同方向的margin-top 值， 两个属性之间没有其他的内容进行隔离， 导致两个属性相遇， 发生margin 塌陷。

本身父元素与上一个元素的距离是0， 子元素如果设置了垂直方向的上边距， 会带着父级一起掉下来。

水平方向的 margin 没有塌陷现象。

在标准流中， 大部分元素是区分等级的， 习惯将元素划分为几种常见的加载级别：块级元素、 行内元素、 行内块元素等。

大部分容器级标签包括p标签都是块级元素， 比如 div 、 h1 等。

大部分的文本级标签， 比如 span、 a、 b 等。

比如 img、 input 等。

可以通过 display 属性更改一个标签的显示模式。

属性值： 元素根据属性值不同， 可以加载对应元素等级的显示模式的特点。

display 属性更改的显示模式并没有改变标准流本质性质， 页面还是只能从上往下加载， 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括： 浮动、 绝对定位、 固定定位。

margin 塌陷现象出现在标准流中的， 浮动元素已经脱离标准流， 不再具有 margin塌陷现象。

与前面压盖效果结构类似， 同级元素中前面的元素浮动， 后面的元素不浮动， 不浮动的元素内部还有一些文字， 浮动的蓝盒子会压盖住粉盒子的一部分， 但是文字内容不会被盖住， 粉盒子中的文字会让开蓝盒子位置， 围绕它进行加载。这种效果称为字围现象。

可以利用字围现象制作一些特殊的图文混排布局效果

给标准流的父元素强制给一个合适的高度

作用： 清除标签元素自身受到的前面的浮动元素的影响。

给标准流父元素添加 clear 属性， 父元素不受前面浮动影响， 不会再占有浮动让出的位置。

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性， 可以解决浮动的所有问题。

父元素有了高度后， 可以管理住内部所有的浮动元素， 不会延伸到后面标签中影响贴边。

a 标签可以根据用户行为不同， 划分为四种状态， 通过a 标签的伪类可以将四种状态选中设置为不同的样式效果， 用户触发对应行为， 就可以加载对应的样式。

一般会将访问前和访问后状态设置为一样的效果， 保证了页面的统一性， 可以选择性的设置鼠标移上和鼠标点击状态。

更加常用的一种设置方式如下：

a 标签任何普通的选择器， 可以同时选中四种状态， 可以将四种状态设置为相同的样式， 属性可以设置所有的 a 默认显示样式的属性， 包括盒模型、 文字等。

a:hover 伪类选择器： 设置鼠标移上时不一样的样式属性。

属性值都是使用代表方向的单词进行书写。

使用像素值作为背景定位的属性值。

百分比表示法使用百分比数字作为属性值。

100%代表的数值：

background 属性可以将五个单一属性的值进行合写。

属性值： 可以有 1-5 个属性值， 值之间用空格进行分隔， 背景定位的两个属性值算作一个属性值， 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。

在h1 标签是权重最高的标签， 一般会在内部书写最重要的内容， 比如 logo 图片、 最大的标题等。

另外 h1 内部的文字， 可以帮助提高 SEO 搜索排名。

在设置的是 logo 图片时， 如果使用插入图， 就不能书写搜索关键字。

如果想解决 SEO 问题， 可以将 HTML 结构中， 插入图换成搜索关键字， 然后使用 css 添加背景图给 a 标签或 h1 标签。

在一个盒子中有背景图部分， 而且有文字内容， 文字会让开背景图区域进行加载，

背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图。

当用户访问一个网站时， 需要向服务器发送请求， 网页上的每张图像都要经过一次求才能展现给用户。

然而， 一个网页中往往会应用很多小的背景图像作为修饰， 当网页中的图像过多时，服务器就会频繁地接受和发送请求， 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数， 提高页面的加载速度， 出现了 CSS精灵技术（也称 CSS Sprites、 CSS 雪碧） 。

CSS 精灵是一种处理网页背景图像的方式。

它将一个页面涉及到的所有零星背景图像都集中到一张大图中去， 然后将大图应用于网页， 这样， 当用户访问该页面时， 只需向服务发送一次请求， 网页中的背景图像即可全部展示出来。

通常情况下， 这个由很多小的背景图像合成的大图被称为精灵图。

CSS3 支持背景半透明的写法， 颜色值增加了一种 rgba 模式。

rgba 模式 ： 在 rgb 基础上增加了一个不透明度的设置， 不透明度 alpha 取值范围在0-1 之间， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。

书写方式： rgba(红色， 绿色， 蓝色， 不透明度)

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

通过 background-size 设置背景图片的尺寸， 就像我们设置 img 的尺寸一样， 在移动 Web 开发中做屏幕适配应用非常广泛。

CSS3 中规定， 一个盒子上， 可以添加多个背景图片。

background-image 的属性值书写时， 以逗号分隔多背景的 URL路径地址。

注意： 背景加载时， 先写的背景压盖后写的背景图片。

属性名： position。

作用： 设置定位的元素， 它需要根据某个参考元素发生位置的偏移。

定位的元素要想发生位置的移动， 必须搭配偏移量属性进行设置。

水平方向： left、 right。

垂直方向： top、 bottom。

属性值： 常用 px 为单位的数值， 或者百分比。

子绝父相、 子绝父绝、 子绝父固

属性值： absolute， 绝对的意思。

参考元素： 参考的是距离最近的有定位的祖先元素， 如果祖先都没有定位， 参考body。必须搭配偏移量属性才会发生位置移动。

性质： 绝对定位的元素脱离标准流， 会让出标准流位置， 可以设置宽高， 也可以随时定义位置， 绝对定位的元素不设置宽高只能被内容撑开。

注意1： 绝对定位的参考元素是不固定的， 不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同， 具体位移效果不同。

注意2： 在绝对定位中， 由于参考点不同， left 正值不再等价于 right 的负值。

以 body 为参考元素时， 参考点的确定与偏移量方向有关

第一， 如果有 top 参与的定位， 参考点就是 body 页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。

第二， 如果有 bottom 参与的绝对定位， 参考点是 body 页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。

实际应用中， 如果以 body 为参考元素， 不同分辨率的浏览器中， 绝对定位的元素位置是不同的， 所以较少使用 body 作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素， 就不会去参考 body 。

参考元素： 参考的是祖先元素中有任意定位的， 在 HTML 结构中距离目标最近的祖先。

如果绝对定位的参考元素是某个祖先级， 参考点是盒子 border 以内的四个顶点， 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离， 会忽视参考元素的 padding 区域。

所有的定位类型都可以实现压盖效果。

由于绝对定位的元素脱标， 不占标准流位置， 压盖效果更彻底， 实际工作中， 常见的是 绝对定位制作压盖。

定位的元素不区分定位类型， 都会去压盖标准流或浮动的元素。

如果都是定位的元素， 在 HTML 中 后写定位压盖先写的定位 。

更改定位的元素的压盖顺序， 设置一个 z-index 属性。

属性值： 数字。

css样式设置字体最好怎么设？

CSS最基础的问题

我因为兴趣，正在自学asp，现在刚接触到CSS。

这几天在修改创力3.1，想做一个网站。

我想用css来控制一些标题栏的文字。请问在CSS中应该么写，在asp中如何调用。

比如字体是宋体，大小9号，红色。

我对ASP有一定了解，但对CSS一窍不通。但我想只要入了门，就容易了。

问题补充：在ASP中代码如下：

table class=title_main cellSpacing=0 cellPadding=0 width="100%" align=center border=0

tr

td img src="{%picurl%}title_ico.gif" width=11 align=absMiddle

最新文章/td

td align=right

p align="center"a href="{%webdir%}Article/ShowUpdate.asp" target=_blankfont color=#666666

more.../font/a/td

/tr

/table

在CSS中对应代码：

.title_main /*中间标题*/

{

font-size: 12px;

background-image: url({%picurl%}title_bg.gif);

height: 30px;

例:把12px修改成9px或再大一些如28px，在前台显示无变化。请问这是什么原因？如想把字体变成红色，该怎么写？

方法有以下几种

1.没有变化,可能是因为样式是应用表格上的缘故,如果是应用在td class=title_main最新文章/td 应该即可;

2.单独给标题设置样式, 采用span calss="title_1"标题/span

CSS的样式代码如:

.title_main{font-size:12px; color:#f00; line-height:20px;}

样式解释:

font-size 表示字体大小, color 颜色, line-height表示行高,我这里设了20px, 这样就显得比较开阔,容易阅读,就和WORD 里面1.5倍行距比1倍行距容易阅读的道理一样. 因为浏览器默认字体是 宋体, 所以font-family:宋体 可以省略,如果是其他字体则需要这条.

如果是比较大的标题: 可以采用以下样式:

.title_main{font-size:20px; color:#f00; line-height:30px; font-weight:bold}

和上面的样式相比,这个字体扩大,行距加大,字体加粗.

3.给标题设置样式,其实还可以用h1标签

h1文章标题/h1

说明:

h1(除了h1,还有h2h3h4h5h6) 这些是专门用于设置不同大小的代码, 其中这些代码默认值都是有加粗的,字体大小由h1到h6逐渐变小,字体颜色默认为黑色,当然,大小/粗细/颜色都能修改的.

比如设置h1样式,css样式代码如:

h1{font-size:12px; color:#f00; line-height:20px;}

注意,h1前面没有任何标点,这样的话,整张网页里面所有用过h1标签的都会应用这个样式. 和 .title_main 只有加了class="title_main" 才应用样式不同.

而且和 CLASS 类相比, h1更加简洁,如果样式设置一样

span calss="title_1"标题/span 和 h1文章标题/h1 效果是一样的.

CSS 还有其他许多功能, 你可以在DreamWeaver里一个个添加 尝试 /对比 ,很快就能基本掌握CSS 基础的设置了,当然,有些设置还是需要经验和实践才能运用的比较娴熟和简练的.

}

DIV+CSS怎么样改字体样式

1、先给想要改字体样式的div加一个class或者id

2、用选择器找到中国div（.class或者#id）

2、在style标签里给这个div写css样式，

!doctype html

html

head

meta charset="UTF-8"

titleDIV+CSS怎么样改字体样式/title

style

.one{

font-family:"微软雅黑";  //把 font-family: "设置字体名称" 里的字体名称改成你需要

font-size:12px;  //字体大小

color:red;  //字体颜色

font-weight:normal; //加粗 normal默认值 bold粗体 数值100-900

}

/style

/head

body

div class="one"DIV+CSS怎么样改字体样式/div

/body

/html

扩展资料

br换行

bb标签设置加粗/b

ii标签设置斜体/i

uu设置下划线/u

h1最重要的标题H1/h1

h2次要栏目或标题-小标题H2/h2

h3再次要栏目或分类小标题H3/h3

h4文中分类小标题H4/h4

pre定义预格式化文本，空格和换行会保留，常常应用于表示计算机的源代码。/pre

当前文章：css文字标题样式,css标题字体大小
本文网址：http://scyanting.com/article/dsdccse.html