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. Java NIO：浅析I/O模型

    也许很多朋友在学习NIO的时候都会感觉有点吃力,对里面的很多概念都感觉不是那么明朗.在进入Java NIO编程之前,我们今天先来讨论一些比较基础的知识:I/O模型.下面本文先从同步和异步的概念 说起, ...

  2. Go学习笔记之基础数据类型

    http://studygolang.com/articles/1348 1 整数 在 Go 语言中,如果不加特殊前缀,都是10进制表示,例如:“100” 整数可以直接用指数形式,例如:“1E9”,意 ...

  3. 钉钉服务器端SDK PHP版

    项目地址: https://github.com/web3d/DingtalkSDK.git 钉钉官方有些简单的demo,但封装得有些粗糙. 开发的过程中,做了一个有点小意思的工具:json数据转换为 ...

  4. API 开发实践

    整个2015年,如果要给自己打上一个标签的话,那应该就是 API. 在各个不同的系统中定制各种 API 框架. 在做商城对接各种电商 ERP 的 API 开发中,我采用的是兼容SHOPEX 的 API ...

  5. 解决WindowsServer 2008 R2 未注册版一个小时自动强制关机

    仅用来学习交流,请大家购买正版,尊重正版版权. 安装了win2008R2,试了很多激活方法,终于激活后,不知道什么原因,过了一段时间后,每隔一段时间就自动关机,查了一下,发现是 wlms.exe在作祟 ...

  6. GJM ：FPSCalc-简单FPS观测类 [转载]

    版权声明:本文原创发表于 [请点击连接前往] ,未经作者同意必须保留此段声明!如有侵权请联系我删帖处理! FPSCalc--简单FPS观测类 利用Unity做的手游项目很多时候要保证流畅度,流畅度最直 ...

  7. FHS定义的Linux目录树

    根目录/: 最重要的一个目录,与开机/修复/还原有关.该目录所在的分区越小越好,安装的程序也最好不要放在该分区内. 根目录下必须存在的子目录: 目录 说明 /bin 存放了很多常用命令,能被root和 ...

  8. B树详解

    B树 具体讲解之前,有一点,再次强调下:B-树,即为B树.因为B树的原英文名称为B-tree,而国内很多人喜欢把B-tree译作B-树,其实,这是个非常不好的直译,很容易让人产生误解.如人们可能会以为 ...

  9. Grid – 入门必备！简单易懂的响应式设计指南

    如今,人们使用各种各样的移动设备访问网页,设计师们需要去适配不同的屏幕,让用户在都能有最佳的浏览体验.Grid 是一个简单的响应式设计指南,按照这些简单的步骤,你的就能够掌握基础的响应网页设计技巧. ...

  10. CSS的盒子模型

    1.边框:包裹内容的容器 统一设置:border: border-width border-style border-color 上:border-top 下:border-bottom 左:bord ...