1.CSS 指层叠样式表 (Cascading Style Sheets)

2.说明:

样式定义如何显示 HTML 元素;
     样式通常存储在样式表中;
     把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题;
     外部样式表可以极大提高工作效率;
     外部样式表通常存储在 CSS 文件中;
     多个样式定义可层叠为一 ;

3.分类:  一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
    1)浏览器缺省设置
    2)外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css" />

3)内部样式表(位于 <head> 标签内部)<style type="text/css"></style>
    4)内联样式(在 HTML 元素内部)

4.CSS 语法:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

5.选择器分类:

1)派生选择器:派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

strong {
color: red;
}

h2 {
color: red;
}

h2 strong {
color: blue;
}

下面是它施加影响的 HTML:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

2)id 选择器:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

3)类选择器:类选择器以一个点号显示:

.center {text-align: center}

在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

4)属性选择器: 对带有指定属性的 HTML 元素设置样式。
      可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

下面的例子为带有 title 属性的所有元素设置样式:

[title]
{
color:red;
}

6.常用样式设置:

1)a:link{}

2) a:visited{}

3) a:hover:{}

4) a:active{}

CSS使用简介的更多相关文章

  1. css012 css布局简介

    css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的h ...

  2. CSS 选择器简介

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...

  3. LESS CSS 框架简介(转)

    原文地址:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML ...

  4. LESS CSS 框架简介

    使用 LESS 简化层叠样式表(CSS)的编写 LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.本文将通过实例,为大家介绍这一框架. 简介 CSS(层叠样式表 ...

  5. 转:LESS CSS 框架简介

    原文来自于:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTM ...

  6. 【转】 LESS CSS 框架简介

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...

  7. CSS动画简介

    现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端. 但是,CSS动画除外,它实在太有用了. 本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出 ...

  8. LESS CSS 框架简介与使用

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...

  9. 1.CSS基础简介

    一.基础简介 1.简介 CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观.通过使用CSS实现页面的内容 ...

  10. CSS的简介

    CSS(Cascading Style Sheets):层叠样式表 层叠:一层一层的 样式表:有很多的属性和属性值 css将网页内容和显示样式进行分离,提高了显示功能 CSS通常被称为CSS样式表或层 ...

随机推荐

  1. C程序的内存分配

    一.预备知识-程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)- 由编译器自动分配释放,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. ...

  2. CentOS7安装Hadoop2.7完整流程

    总体思路,准备主从服务器,配置主服务器可以无密码SSH登录从服务器,解压安装JDK,解压安装Hadoop,配置hdfs.mapreduce等主从关系. 1.环境,3台CentOS7,64位,Hadoo ...

  3. Dropbox 有哪些鲜为人知的使用技巧?

    作者:Feeng链接:http://www.zhihu.com/question/20104959/answer/13991578来源:知乎著作权归作者所有,转载请联系作者获得授权. 原文:The B ...

  4. QTimer源码分析(以Windows下实现为例)

    QTimer源码分析(以Windows下实现为例) 分类: Qt2011-04-13 21:32 5026人阅读 评论(0) 收藏 举报 windowstimerqtoptimizationcallb ...

  5. HDU2521反素数

    只是了解下这种简单的数论定义,解释可以戳这个 http://www.cnblogs.com/Findxiaoxun/p/3460450.html ,然后按Ctrl+ F搜索   反素数  ,找到那一部 ...

  6. NSMutableArray 排序

    NSMutableArray *array1=[NSMutableArray arrayWithObjects:@"1",@"3",@"2" ...

  7. Android WIFI 操作

    代码 package com.wifitest; import java.util.List; import android.content.Context; import android.net.w ...

  8. Servlet概述

    1.Servlet简介 Servlet是使用Java Servlet应用程序设计接口及相关类和方法的Java程序.它在Web服务器上或应用服务器上运行并扩展了该服务器的能力.Servlet装入Web服 ...

  9. !!无须定义配置文件中的每个变量的读写操作,以下代码遍历界面中各个c#控件,自动记录其文本,作为配置文件保存

    namespace PluginLib{    /// <summary>    /// 遍历控件所有子控件并初始化或保存其值    /// </summary>    pub ...

  10. ubuntu13.04下载android4.0.1源码过程

    最初我参考的是老罗的博客http://blog.csdn.net/luoshengyang/article/details/6559955 进行下载安装的,但弄着弄着就发现不太对劲了.这里记录下详细过 ...