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. jquery简单原则器（匹配除了指定选择器之外的元素 selector 表示选择器）

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

  2. Error Code: 1175.You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column.

    在MySQL Workbench里面使用SQL语句: delete from 表名 提示出错: Error Code: 1175.You are using safe update mode and ...

  3. python 学习笔记6（函数）

    函数 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 1.减少代码重复 2.保持代码的一致性 3.方便修改,可扩展性 函数的创建 #简单 ...

  4. c# datagridview禁止自动生成额外列

    在某些时候,处于重用pojo的考虑,我们希望在不同的datagridview之间进行复用,这就涉及到pojo中的字段会比有些datagridview所需要的字段多,默认情况下,.net对于pojo中的 ...

  5. JSON+YAML初步学习+ciscoconfparse

    Git git clone 在github.com右上角点击加号创建新的repository 在Linux或Mac命令行下,找到你想存放这个repository的目录,然后git clone 某个re ...

  6. html和css的编码规范

    HTML和CSS编码规范内容 一.HTML规范 二.CSS规范 三.注意事项: 四.常用的命名规则 五.CSS样式表文件命名 六.文件命名规则 一.HTML规范: 1.代码规范 页面的第一行添加标准模 ...

  7. 10款免费的响应式 WordPress 主题下载

    响应式和现代设计风格的 WordPress 主题与能够非常灵活的适应所有设备.而高级主题能够更大可能性的轻松定制.所有的主题是完全响应式的,您可以从主题选项中禁用/启用响应模式.下面这个列表收集了10 ...

  8. Ext.store.load callback

    var paramsReceivable = {};                paramsReceivable.querytext = Ext.getCmp('hiddquerytext').g ...

  9. 自定义Sublime Text图标详细教程

    改造后的Sublime 先看看我改造后的神器图标,接下来你就知道下面是干什么的了 :               之前无意间在刘哇勇的博客上看到这么一篇文章,很好奇就尝试着更改Sublime Text ...

  10. FlippingBook使用教程

    FlippingBook是一款收费的图书翻页效果的flash播放器.在线预览地址:FlippingBook,破解版下载地址 备用下载地址 预览效果: 它的文件结构如下: 其中:css文件夹是一个简单的 ...