CSS（Cascading 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连接方式。

注：css文件中不需要写style标签

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

注：上图就是先去掉边距和间距。

（二）选择器

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

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

   注：class选择器可以和标签选择器叠加，显示出不同效果。

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

   注：ID选择器可以和标签选择器叠加，显示出不同效果。

<div id="样式名">

4.复合选择器

（1）用“，”隔开，表示并列。

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

（3）筛选“.”。

二、样式属性

（一）背景与前景

1.背景：

2.前景字体：

（二）边界和边框

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

（三）列表与方块

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

css样式表代码显示：

css文件代码：

 @charset "utf-8";

 /* CSS Document */

 */*所有标签起作用，边距和间距都设为0px*/

 {

     margin:0px;

     padding:0px;}

 p,span   /*直接写个标签名字，表示所有的p标签都执行这个样式*/

 {

     background-color:#F6C;

     color:#0F0;}

 p.sp

 {

     background-color:#FF0;

     color:red;

     font-size:36px;}

 .main/*以.开头，使用class引用此样式表*/

 {

     height:50px;

     width:300px;

     background-color:#0FF;

     font-size:45px;}

 .main p/*表示使用class=main的标签内若有p标签，执行此样式*/

 {

     width:400px;

     font-size:36px;}

 #main/*以#开头，使用id选择器引用此样式表*/

 {

     height:60px;

     width:500px;

     background-color:#60C;

     font-size:36px;}

html文件代码：

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 </style>

 <link href="Untitled-1.css" rel="stylesheet" type="text/css" />

 </head>

 <body>

 <div style="background-color:#0F0">1234567</div>

 <p>春天来了。</p>

 <p>花儿开了，草儿绿了。</p>

 <p class="sp">鹅鹅鹅，曲项向天歌。</p>

 <span class="main">锄禾日当午<p>汗滴禾下土</p></span>

 <p class="main">白日依山尽</p>

 <p id="main" >床前明月光</p>

 <span>疑是地上霜</span><br />

 </body>

 </html>

运行效果显示：

HTML基础（三）——css样式表的更多相关文章

  1. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  2. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  3. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  4. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  5. html基础 CSS样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  6. CSS三种样式表

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  7. CSS的三种样式表和优先级

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  8. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  9. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

随机推荐

  1. C#的变迁史 - C# 2.0篇

    在此重申一下,本文仅代表个人观点,如有不妥之处,还请自己辨别. 第一代的值类型装箱与拆箱的效率极其低下,特别是在集合中的表现,所以第二代C#重点解决了装箱的问题,加入了泛型.1. 泛型 - 珍惜生命, ...

  2. 基于吉日嘎底层架构的Web端权限管理操作演示-菜单模块管理

    按照顺序,这一篇介绍菜单模块管理,主要演示如下操作: 新增.修改.锁定.解锁.删除.撤销删除 排序 角色成员管理 用户成员管理 导出菜单模块数据 也许你会问,你在这自吹自擂,你这个BS的权限管理有啥缺 ...

  3. 【C#进阶系列】20 异常和状态管理

    异常就是指成员没有完成它的名称所宣示的行动. public class Girl { public string Name { get; set; } } public class Troy{ Gir ...

  4. MVC中几种常用ActionResult

    一.定义 MVC中ActionResult是Action的返回结果.ActionResult 有多个派生类,每个子类功能均不同,并不是所有的子类都需要返回视图View,有些直接返回流,有些返回字符串等 ...

  5. Using Recursive Common table expressions to represent Tree structures

    http://www.postgresonline.com/journal/archives/131-Using-Recursive-Common-table-expressions-to-repre ...

  6. RSA加密解密（python版）

    RSA的算法涉及三个参数,n.e.d. 其中,n是两个大质数p.q的积,n的二进制表示时所占用的位数,就是所谓的密钥长度. e1和d是一对相关的值,e可以任意取,但要求e与(p-1)*(q-1)互质: ...

  7. 泛函编程（25）－泛函数据类型－Monad－Applicative

    上两期我们讨论了Monad.我们说Monad是个最有概括性(抽象性)的泛函数据类型,它可以覆盖绝大多数数据类型.任何数据类型只要能实现flatMap+unit这组Monad最基本组件函数就可以变成Mo ...

  8. 初识Web 服务(即Web Service)

    一.什么是Web服务 简单来说就是在Internet上提供的这种服务,我们称这种服务为Web服务. 二.Web服务的主要目标? 是支持跨平台的可互操作性. 三.Web服务的优势 四.Web服务提供了一 ...

  9. Training - Problem and Change Management

    Problem Management Problem management seeks to identify the underlying causes of incidents in an IT ...

  10. css知多少（7）——盒子模型

    1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ...