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

样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页

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

1、样式表的基本概念

1.1、样式表分类

1、内联样式表

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

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

2、内嵌样式表

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

<style type= "text/css">

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

{

样式;

}

</style>

3、外部样式表

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

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

<style type= "text/css">

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

{

margin:0px;

padding:0px;

}

</style>

1.2、选择器

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

<style type= "text/css">

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

{

样式;

}

</style>

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

  <head>

  <style type="text/css">

  .main     /*定义样式*/

  {

height:42px;

width:100%;

text-align:center;

  }

  </style>

  </head>

  <body>

  <div class="main">       <!--调用class样式-->

  </div>

  </body>

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

  <div id="样式名">

  <head>

  <style type="text/css">

  #main     /*定义样式*/

  {

height:42px;

width:100%;

text-align:center;

  }

  </style>

  </head>

  <body>

  <div id="main">       <!--调用id样式-->

  </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>

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 - 定义变量 

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;    /*序号跟内容在一起*/

时间: 2024-10-07 09:44:57

网页制作之html基础学习3-css样式表的相关文章

网页制作之html基础学习6-CSS浏览器兼容问题

初学html和css时,每天切图,总会遇到很多浏览器兼容性问题.最近一直关注移动平台开发,就html和css来说,不用考虑那么多浏览器兼容性问题.到现在,以至于很多浏览器兼容性几乎忘光了.今天把以前总结的知识拿来分享一下,顺便自己也复习一下.当然,其中肯定有很多不足,望指正啊. 1 ie6.0横向margin加倍 产生因素:块属性.float.有横向margin. 解决方法:display:inline: 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size

网页制作之html基础学习1-简介

学习网页制作主要分为三大块 1.HTML    超文本标记语言( 全称:Hyper Text  Markup Language) 专门编辑静态网页 2.CSS      网页美化:是HTML控制的样式.格式的一部分 3.Javascript   脚本语言:主要是编写网页中动态效果的. html 模块部分 一.简介: 超文本标记语言,静态网页.可以说是一系列“标签”组成的“文本文档”.HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,其主要特点如下:

网页制作之html基础学习4-格式与布局

1.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗 例: <head> <title>123</title> <style type="text/css"> #a { border:5px solid blue; width:100px; height:100px; margin:10px; background-color:#0F3; left:30px; bottom:20px; positio

网页制作之html基础学习5-background-position用法

我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body.td.p等的背景,道理一样. 代码: div{ background:#FFF url(image) no-repeat fixed x y;} 这里的background的属性值依次为: #FFF 背景色:(颜色值,背景图片没有覆盖的地方,或者没有背景图片时表现的背景色)image 背景图片:(这里是图片的地址)no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repe

网页制作之html基础学习2-标签

一.html结构组成 1 <html> --开始标签 2 3 <head> 4 5 网页上的控制信息 6 7 <title>页面标题</title> 8 9 </head> 10 11 <body> 12 13 页面显示的内容 14 15 </body> 16 17 </html> --结束标签 注释语法:<!--注释掉的内容--> 标签格式:双标签元素:<标签名 属性 style="

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

HTML静态网页(css样式表)美化

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p >内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p   //格式对p标签起作用 { 样式: } </sty

CSS基础,认识css样式

1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于 定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字 有着统一的字体.字号或者颜色等. 2.CSS代码的语法 css 样式由选择符和声明组成,而声明又由属性和值组成, 选择符: 又称选择器