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

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

<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（内容与单元格间距）。

（三）列表与方块

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

链接的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. phalcon: 过滤（Phalcon\Filter（））

    过滤,就是清除不需要的数据,留下想要的数据. 其调用方法如下,一: $filter = new \Phalcon\Filter(); $filter->sanitize("some(o ...

  2. Google V8扩展利器发布：v8-native-binding-generator

    用C++扩展Google V8很简单,但是类比较多时还是很烦的.前段时间开发cantk-runtime-v8时,我写了一个代码产生器v8-native-binding-generator,让扩展Goo ...

  3. MYSQL 表结构的修改

    -- 修改字段 默认值 ALTER TABLE house_owner ALTER COLUMN addr SET DEFAULT ""; -- 修改字段 名称 COMMENT & ...

  4. Jquery元素追加和删除

    原文链接:http://www.cnblogs.com/william-lin/archive/2012/08/12/2635402.html 介绍    DOM是Document Object Mo ...

  5. 为大家分享一个 Ajax Loading —— spin.js（转）

    原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Load ...

  6. 20145236 《Java程序设计》实验四实验报告

    20145236 实验四 Android开发基础 实验内容: 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android组件.布局管理器的使用: 3.掌握An ...

  7. hadoop学习笔记：hadoop文件系统浅析

    1.什么是分布式文件系统? 管理网络中跨多台计算机存储的文件系统称为分布式文件系统. 2.为什么需要分布式文件系统了? 原因很简单,当数据集的大小超过一台独立物理计算机的存储能力时候,就有必要对它进行 ...

  8. 使用cnblogs.com的用户体验和提出来的建议

    1.是否提供良好的体验给用户(同时提供价值)? 我是很久以前就有CN的账号了的,因为这个网站有很多有用的信息,和比较活跃的论坛.很多不懂的问题可以求助上面的大神.但是,我第一次登陆主页面的时候我是懵逼 ...

  9. JavaScript实现冒泡排序、快速排序、插入排序

    JavaScript实现冒泡排序.快速排序.插入排序 时间:2014-01-09 18:05:51  来源:  作者:胡晗 冒泡排序的基本思想:所谓冒泡就是泡泡一个一个往上冒,让体积最轻的泡泡浮在最上 ...

  10. go——beego的数据库增删改查

    一直都不理解使用go语言的时候,为什么还要自己去装beego,以为使用go便可以解决所有的问题,结果在朋友的点拨下,才意识到: go与beego的关系就好比是nodejs与thinkjs的关系,因此也 ...