网页制作之html基础学习3-css样式表

样式：CSS（Cascading Style Sheets,层叠样式表），作用是美化HTML网页。

在样式里面用 /* */ 进行注释。

1、样式表的基本概念

1.1、样式表分类

1、内联样式表

和html联合显示，控制精确，但是可重用性差，冗余多。

例：<p style="font-size:14px;">内联样式表</p>

2、内嵌样式表

作为一个独立区域内嵌在网页里，必须写在head标签里边。

p //格式对p标签起作用

{

样式;

}

</style>

3、外部样式表

　　新建一个CSS文件，用来放样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式→附加样式表。一般用link连接方式。

有些标签有些默认的边距，一般写样式表代码的时候都会先去除(也可以设置其他样式)，如下：

 <style type= "text/css">

 *    //格式对所有标签起作用

 {

      margin:0px;

      padding:0px;

 }

 </style>

1.2、选择器

1、标签选择器。用标签名做选择器。

p //格式对p标签起作用

{

样式;

}

</style>

2、class选择器。都是“.”开头。

　　<head>

　　.main /*定义样式*/

　　{

height:42px;

width:100%;

text-align:center;

　　}

　　</style>

　　</head>

　　<body>

　　</div>

　　</body>

3、ID选择器。以“#”开头

　　<head>

　　#main /*定义样式*/

　　{

height:42px;

width:100%;

text-align:center;

　　}

　　</style>

　　</head>

　　<body>

　　</div>

　　</body>

4、复合选择器。

   1）、用“，”隔开，表示并列。（并集选择器）

 　　<style type="text/css">

 　　p，span    /*标签p、span两者同样的样式*/

 　　{

           样式;

 　　}

 　　</style>

    2）、用空格隔开，表示后代。

     （子选择器：也就是只有对直接后代有影响的选择器，而对“孙子”以及对个层的后代不产生作用。

 格式如下：p>span{color:blue;}）

 　　<style type="text/css">

 　　.main p    /*找到使用样式“main”的标签，在该标签里的P标签使用该样式*/

 　　{

 　　    　样式；

 　　}

 　　</style>

     3）、筛选“.”。（交集选择器）

 　　<style type="text/css">

 　　p.sp    /*在标签p中的class="sp"的标签，执行以下样式*/

 　　{

           样式;

 　　}

 　　</style>

5、子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

 <!DOCTYPE HTML>

 <html>

 <head>

 <style type="text/css">

 h1 > strong {color:red;}

 </style>

 </head>

 <body>

 <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

 <h1>This is <em>really <strong>very</strong></em> important.</h1>

 </body>

 </html>

结果：

This is very very important.

This is really very important.

2、样式属性

2.1、背景与前景（前景：指文本）

　　background-color:#F90; /*背景色，样式表优先级高*/

　　background-image:url(路径); /*设置背景图片（默认）*/

　　background-attachment:fixed; /*背景是固定的，不随字体滚动*/

　　background-attachment:scroll; /*背景随字体滚动*/

　　background-repeat:no-repeat; /*no-repeat,不平铺；repeat,平铺；repeat-x,横向平铺；repeat-y,纵向平铺*/

　　background-position:center; /*背景图居中，设置背景图位置时，repeat必须为“no-repreat”*/

　　background-position:right top; /*背景图放到右上角（方位可以自己更改）*/

　　background-position:left 100px top 200px; /*离左边100像素，离上边200像素（可以设为负值）*/

　　字体

　　font-family:"新宋体"; /*字体。常用微软雅黑、宋体。*/

　　font-size:12px; /*字体大小。常用像素12px、14px、18px。还可以用“em”，“2.5em”即：默认字体的2.5倍。还可以用百分数*/

　　font-weight:bold; /*bold是加粗，normal是正常*/

　　font-style:italic; /*倾斜，normal是不倾斜*/

　　color:#03C; /*颜色*/

　　text-decoration:underline; /*下划线，overline是上划线，line-through是删除线,none是去掉下划线*/

　　text-align:center; /*（水平对齐）居中对齐，left是左对齐，right是右对齐*/

　　vertical-align:middle; /*（垂直对齐）居中对齐，top是顶部对齐，bottom是底部对齐。一般设置行高后使用。*/

　　text-indent:28px; /*首行缩进量*/

　　line-height:24px; /*行高。一般为1.5~2倍字体大小。*/

display:none; /*none，不显示；inline-block,显示为块，不自动换行，宽高可设；block，显示为块，自动换行；inline，效果同span标签，不自动换行，宽高不可设。（针对行内元素可设定为block，块级元素可设定为inline）*/

块状元素	内联元素
address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易，也是CSS layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） ol - 有序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 无序列表	a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器，定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量

块状元素

内联元素

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS
layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2
- 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr -
水平分隔线
isindex - input prompt
menu - 菜单列表
noframes -
frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript -
可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 有序表单
p - 段落
pre - 格式化文本
table -
表格
ul - 无序列表

a
- 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big -
大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em -
强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd -
定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select
- 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong -
粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u -
下划线
var - 定义变量

visibility:hidden; /*可视性。hidden，隐藏但是占空间；visible，显示。*/

display与visibility区别：　　

a、Display的属性值

block：

/*表现为一个块级元素（一般情况下独占一行）*/

当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。

inline:

/*表现为一个行级元素（一般情况下不独占一行）*/

将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。

none:

/*元素不可见，并且不为其保留相应的位置*/

最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

b、Display的使用

1)、display默认属性值为块级的元素：

adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,

dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,

menu,ol,p,plaintext,pre,table,td,th,tr,ul

2)、display默认属性值为none的元素：

br,frame,nextid,tbody,tfoot,thead

3)、li元素的display属性默认值为：list-item

4)、其他元素display属性默认值都为inline

c、Display的特性

改变元素的display属性将对周围元素造成的影响有：

1、在属性值设为block的元素后面添加新行

2、从属性值设为inline的元素所在行中删除一行

3、隐藏属性值设为none的元素并且释放该元素在文档中所占的物理空间，对于其他元素来说，相当于该元素不存在，因此，该元素的位置被其他元素顶替

d、visibility的属性值

visibility:visible/*元素可见，默认值*/

visibility:hidden/*元素不可见，但仍然为其保留相应的空间*/

visibility:collapse
/*只对table对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden。*/

visibility:inherit
/*继承上级元素的visibility值。*/

e、visibility特性

　　用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

f、由以上可以了解到 Visibility:none 和 Display:hidden 的区别

　　display:none;

　　使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

　　visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

g、什么时候使用Visibility或者Display属性？

Visibility和Display属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。

如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：none。

在现实中更多的倾向于使用display属性（相信这也是大多数人的习惯，bolo注）。当你决定用display：none来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。

h、使用Visibility或者Display属性的注意事项

display:none:

1)、JS读取元素属性值

　　如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。

2)、SEO优化时需要注意

　　使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。

3)、样式文件

　　如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题

4)、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。

visibility:hidden:

如果想让某一段代码在前台不显示，最简单的方法是用css的display:none,这样，下边的内容就自动填补这个空隙。但是在一些特殊的情况下，我们只需要隐藏这个元素，但它的位置不能被占用了，那么，visibility:hidden就可以实现这个要求。

2.2、边界和边框

border（表格边框、样式等）、margin（表外间距）、padding（内容与单元格间距）

　　border:5px solid blue; /*四边框：5像素宽、实线、蓝色（相当于以下三行）*/

　　border-width:5px;

　　border-style:solid;

　　border-color:blue;

　　border-top:5px solid blue; /*上边框：5像素宽、实线、蓝色（分写同上）*/

　　border-bottom:5px solid blue; /*下边框：5像素宽、实线、蓝色（分写同上）*/

　　border-left:5px solid blue; /*左边框：5像素宽、实线、蓝色（分写同上）*/

border-right:5px solid blue; /*右边框：5像素宽、实线、蓝色（分写同上）*/

　　margin:10px; /*四边外边框宽度为10像素。auto，居中。*/

　　margin-top:10px; /*上边外边框宽度为10像素；其他三边边框类似*/

margin:20px 0px 20px 0px; /*上-右-下-左，四边外边框顺时针顺序*/

　　padding:10px; /*内容与边框的四边间距为10像素*/

　　padding-top:10px; /*内容与边框的上间距为10像素；其他三边间距类似*/

padding:20px 0px 20px 0px; /*上-右-下-左，内容与边框的四边间距顺时针顺序*/

2.3、列表与方块

　　width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用

　　list-style:none; /*取消序号*/

　　list-style:circle; /*序号变为圆圈，样式相当于无序*/

　　list-style-image:url(图片地址); /*图片做序号*/

　　list-style-position:outside; /*序号在内容外*/

　　list-style-position:inside; /*序号跟内容在一起*/