CSSCascading Style Sheet,叠层样式表),作用是美化HTML网页。

/*注释区域*/    此为注释语法

一、样式表

(一)样式表的分类

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.标签选择器。用标签名做选择器。

<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"> <!--调用样式-->
</div>
</body>

4.复合选择器

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

<style type="text/css">
p,span /*标签p、span两者同样的样式*/
{
样式;
}
</style>

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

<style type="text/css">
.main p /*找到使用样式“mian”的标签,在该标签的p标签使用该样式*/
{
样式;
}
</style>

(3)筛选“,”。

<style type="text/css">
p.sp /*在标签p中的class=“sp”的标签,执行以下样式*/
{
样式;
}
</style>

二、样式属性

(一)背景与前景

1.背景:

2.前景字体:

(二)边界和边框

border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。

(三)列表与方块

widthheight、(topbottomleftright)只有在绝对坐标情况下才有用。

链接的style

  a:link 超链接被点前状态

  a:visited 超链接点击后状态

  a:hover 悬停在超链接时

  a:active 点击超链接时

  在定义这些状态时,有一个顺序l v h a

HTML--3css样式表的更多相关文章

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

    样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /*  */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...

  2. CSS样式表分类

    1.内联样式表 <p  style="font-size:11px;">内联样式表</p> 2.内嵌样式表 写在head标签里 <style  typ ...

  3. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  5. CSS样式表基础

    CSS的样式表其实就是美观页面的,加一些样式. 一.样式表的三种分类: ①内联样式:写在某一个标签里面的样式. 优点:控制精确. 缺点:代码重用性差.(太多了不好写)页面代码乱.(太乱,后期不方便看) ...

  6. 深入理解脚本化CSS系列第四篇——脚本化样式表

    × 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...

  7. CSS:CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  8. Qt——浅谈样式表

    优秀的程序,不仅要有严密逻辑,而且应该有美观的外表.从软件界面,便可看出你是否用心在做,是否是一个有思想的人. Qt样式表的术语和语法规则和HTML CSS有很多相似之处. 样式规则 Qt中样式规则由 ...

  9. 3、CCS样式表

    一.CCS样式表的分类(优先级从低到高): 1.浏览器默认样式表 2.外部样式表:在外部创建的.ccs文件中.使用外部样式表可以使样式应用于多个网页.通过这个方法只需改动一个文件就能改变整个网站的外观 ...

  10. html嵌入样式表

    1.针对文件中的字体还有属性进行设置主要设置文字的大小及其颜色问题,未涉及div飘操作 处理页面CSS 先检测该内容部分是否已经设定了样式,如果没有单独设定再按照总体设计进行限定. eg:  h1 h ...

随机推荐

  1. iOS 控制单个控制器旋转

    iOS 控制单个控制器旋转 控制单个ViewController 的旋转 //不旋转,保持竖屏 //iOS 5 - (BOOL) shouldAutorotateToInterfaceOrientat ...

  2. 关于as中的事件与回调函数

    对于Observer模式, 在as中object(被观察者)既可以用事件(event),也可以用回调函数(caller)来通知观察者(observer).那在实际的开发中到底应该选择用event还是用 ...

  3. linux笔记:目录处理命令ls,mkdir,cd,pwd,rmdir,cp,mv,rm

    linux命令的格式:命令 [-选项] [参数]例:ls -la /etc 命令:ls命令所在路径:/bin/ls功能:显示目录文件用法:ls [-aldh] []参数:-a 查看所有文件,包括隐藏文 ...

  4. noip赛前小结2

    嗯...赛前的第二份小结. 总结一下应该做的几个事情就好了. (1)关于做题顺序 做题顺序是很重要的. 开始的时候先审题,看清数据范围什么的,随便想一想,大概估计一下自己的得分. 第二题再把每道题仔细 ...

  5. 我常用的Webstorm快捷键

    ctrl+b 跳转到方法内部 meta:vp + tab 生成移动端 ctrl + alt + l 整理代码 ctrl + shift + up/down 行移动 ctrl + shift + ent ...

  6. JS控制css float属性的用法经验总结

    JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...

  7. datagridview 中添加了一个button类型的列,怎么写button的事件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. Loadrunner基础:Loadrunner Controller基本概念和使用

    Loadrnner Controller 介绍 当Vuser脚本开发完成以后,可以使用Controller将这个执行脚本的用户从单用户转化为多用户,从而模拟大量用户的操作,形成负载(多用户单循环,多用 ...

  9. 多分类问题中,实现不同分类区域颜色填充的MATLAB代码(demo:Random Forest)

    之前建立了一个SVM-based Ordinal regression模型,一种特殊的多分类模型,就想通过可视化的方式展示模型分类的效果,对各个分类区域用不同颜色表示.可是,也看了很多代码,但基本都是 ...

  10. css3内容溢出属性

    overflow是css2.0的属性,css3中新增了overflow-x和overflow-y属性. overflow-x主要是用来定义对水平方向内容溢出的剪切,而overflow-y主要是用来定义 ...