html-css样式表

一、CSS:Cascading Style Sheet—层叠样式表,其作用是美化HTML网页。

样式表分类:内联样式表、内嵌样式表、外部样式表

1、内联样式表

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

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

红色部分即内联样式表,style即添加样式。

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、标签选择器

<style type="text/css">

p--------------标签选择器 //对P标签起作用

{

  样式

}

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

<head>

<style type="text/css">

.main--------------------/*定义样式*/-----类选择器

{

  height:42px;

  width:100%;

  text-align:center;

}

</style>

</head>

<body>

<div class="main">----------------调用class样式,可引用多次区别ID选择器

</div>

</body>

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

<head>

<style type="text/css">

#main--------------------/*定义样式*/-----ID选择器

{

  height:42px;

  width:100%;

  text-align:center;

}

</style>

</head>

<body>

<div id="main">----------------调用class样式,仅可以引用一次,区别与class选择器

</div>

</body>

4、复合选择器

1)、用“,”隔开,表示并列

<style type="text/css">

p, span--------------对标签P和span两者都执行同样的样式

{

  样式

}

</style>

2)、用空格隔开,表示后代。

<style type="text/css">

.main p----------------类标签→p标签//首先找到引用“main”的标签,对该标签中的P标签起作用

{

  样式

}

</style>

3)、筛选“.”

<style type="text/css">

p.sp----------------p标签→类标签//首先找到p标签,对于p标签中引用了class="sp"的标签起作用,执行以下样式

{

  样式

}

</style>

三、练习:

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>---------------内嵌样式表
*-------------------------------------对所有标签去除边距和间距
{
margin:0px;
padding:0px;
}
</style>
<link href="yangshi1.css" rel="stylesheet" type="text/css" />-----------------------------引用外部样式表
</head>

<body>
<div>
<p style="font-size:24px; font-weight:bold; background-color:#FFC; color:#F00; text-align:center;">你好,欢迎浏览!</p>--------内联样式表
</div>
<div class="shi">------------------引用类选择器
<p>写一首诗</p>
<p class="shineirong">床前明月光</p>----------类选择器可多次引用
<p class="shineirong">哈哈哈哈哈</p>----------类选择器可多次引用
<p class="shineirong">哈哈哈哈哈</p>
<p class="shineirong">哈哈哈哈哈哈哈哈哈</p>
</div>
<div id="ge">-------------引用id选择器,只能引用一次
<p>唱一首歌</p>
</div>
<div id="wu">
<p>跳个舞</p>
</div>
<p><a href="http://www.baidu.com" target="_blank">百度</a>----------超链接
</p>
</body>
</html>

外部样式表:

@charset "utf-8";
/* CSS Document */
<style type="text/css">
p{---------------------------标签选择器
margin:0px;
padding:0px;
}
.shi{----------------------------类选择器
height:200px;
width:200px;
font-weight:bold;
color:#F03;
background-color:#CCC;
text-align:center;
}
#ge{--------------------------id选择器
margin:0px 290px 0px;
height:200px;
width:300px;
font-weight:bold;
color:#F03;
background-color:#0FF;
text-align:center;
line-height:200px;
}
.shineirong{
font-size:14px;
color:#30F;
font-weight:bold;
line-height:40px;
vertical-align:middle;
}
#wu{
height:auto;
width:auto;
font-size:24px;
font-weight:bold;
text-align:center;
margin:10px;
background:#0F0;
}
a:link{--------------------超链接样式,未点击,展示时样式
color:#000;
font-weight:bold;
font-size:35px;
text-decoration:none;
}
a:visited{----------------------访问完成时样式
color:#000;
}
a:hover{----------------------鼠标指向悬浮时样式
color:yellow;
}
a:active{-----------------------点击时样式
color:green;
}
</style>

时间: 08-26

html-css样式表的相关文章

网站开发综合技术 第二部分 CSS样式表

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

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

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

css样式表分类

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="index.css"><!--用link标签引入的是外部样式表--> 7 8 9 &

CSS样式表规划经验总结

最近看到一些关于CSS文件管理的问题,下面我就自己的经验说说,一个好的CSS文件主要是看他是否具有易维护性.下面我就说说我个人的看法: 一.CSS文件的规划 我在规划CSS的时候,我比较喜欢建立全局css及各模块css.在html页面中引用全局css,在全局css中引用各模块css.比如,建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式.在全局样式中通过“@import url(”xxx.css”);”引入模块css. 关于模块CSS

网页css样式表部分

层叠样式表:CSS Cascading Style Sheet.V2.1  (3.0版本有些旧系统不支持) 控制页面样式外观. 一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用. <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线) 2.内嵌样式表.

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

css样式表中设置table的第一列的宽度是固定值

table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的宽度都会和他一样. *注意 第一行 第一个用的是 td 还是 th css样式表中设置table的第一列的宽度是固定值,布布扣,bubuko.com

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

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

CSS样式表初始化代码

CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="