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#连接数据库(SQL Server)进行数据的读取和写入,学习之. 1. 数据库连接 服务器:“Data Source=服务器IP; Initial Catalog=数据库; User ID=用户名 ...

  2. expect笔记

    #!/usr/bin/expect -f set ip [lindex $argv 0]; set password [lindex $argv 1];  set timeout 1 spawn ss ...

  3. （学习笔记）PHP的输出echo和print

    echo 和 print 之间的差异: echo - 能够输出一个以上的字符串 print - 只能输出一个字符串,并始终返回 1 echo语句 echo 或 echo()均可. 输出换行 echo ...

  4. 烦人的win10的输入法

    这段时间在使用win10,被win10的输入法折腾的要死要死的... 通过度娘把它设置得跟win7使用习惯差不多了, (见:http://jingyan.baidu.com/article/b2c18 ...

  5. Redis学习笔记2-使用 Redis 作为 LRU 缓存

    当 Redis 作为缓存使用时,当你添加新的数据时,有时候很方便使 Redis 自动回收老的数据.LRU 实际上是被唯一支持的数据移除方法.Redis 的 maxmemory 指令,用于限制内存使用到 ...

  6. 如何在window Form中使用Font Awesome？

    随着技术的发展,web上以前的图片按钮现在逐步换成了图标字体,这些图标字体是矢量的,矢量图意味着每个图标都能在所有大小的屏幕上完美呈现,可以随时更改大小和颜色,而且不失真,真心给人一种“高大上”的感觉 ...

  7. Quartz.NET开源作业调度框架系列(二):CronTrigger

    CronTriggers比SimpleTrigger更加的灵活和有用,对于比较复杂的任务触发规则,例如"每个星期天的晚上12:00"进行备份任务,SimpleTrigger就不能胜 ...

  8. 20个最新的照片 PS 技巧，提升摄影水平

    相信很多人都知道 Photoshop 在照片编辑方面的强大,所以几乎每张照片经过 PS 处理后都可以变成一个真正的杰作.这里分享的这组 Photoshop 教程可以帮助你学习到新的照片处理技术.你会发 ...

  9. JS中数组排序

    法一:升序原理:循环嵌套即双向遍历,在从前往后的遍历过程中,如果前一个位子大于后一个位子,把前一个位子的值付给后一个位子, 在从后往前遍历过程中如果前一个值大于后一个的值,把前面的值付给后面,过程中把 ...

  10. Number()、parseInt() 和 parseFloat() 的区别

    一:Number() 如果是Boolean值,true和false值将分别被转换为1和0. 如果是数字值,只是简单的传入和返回. 如果是null值,返回0. 如果是undefined,返回NaN. 如 ...