什么是 CSS?

 

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

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

CSS 规则

 

由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

id 选择器

 

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

class 选择器

 

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

ID属性/类名不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

插入样式表的方法有三种:

 

外部样式表

内部样式表

内联样式

外部样式表

 

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr
{color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body
{background-image:url("images/back40.gif");}

</style>

</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">This
is a paragraph.</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3

{

color:red;

text-align:left;

font-size:8pt;

}

而内部样式表拥有针对 h3 选择器的两个属性：

h3

{

text-align:right;

font-size:20pt;

}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;

text-align:right;

font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1，浏览器缺省设置

2，外部样式表

3，内部样式表（位于
<head> 标签内部）

4，内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：
标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS 框模型(Box Model)

 

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了框模型(Box Model)：

不同部分的说明：

Margin - 清除边框区域。Margin没有背景颜色，它是完全透明

Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

Content - 盒子的内容，显示文本和图像

为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

Grouping
Selectors

在样式表中有很多具有相同样式的元素。

h1

{

color:green;

}

h2

{

color:green;

}

p

{

color:green;

}

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔.

在下面的例子中，我们对以上代码使用分组选择器：

实例

h1,h2,p

{

color:green;

}

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子，为所有p元素指定一个样式，为所有元素指定一个class="marked"的样式，并仅用于class="标记"，类内的p元素指定第三个样式：

实例

p

{

color:blue;

text-align:center;

}

.marked

{

background-color:red;

}

.marked p

{

color:white;

}

CSS
Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

  • <h1>
  • <p>
  • <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

  • <span>
  • <a>

如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

实例

li {display:inline;}

下面的示例把span元素作为块元素：

实例

span {display:block;}

CSS 组合选择符

Note组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)

子元素选择器(以大于号分隔）

相邻兄弟选择器（以加号分隔）

普通兄弟选择器（以破折号分隔）

W3CSchool CSS学习简记的更多相关文章

  1. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  2. Html+CSS 学习第二天

    趁着这两天,将html和CSS基本上学了一遍,大家如果想学习的话,可以百度w3cSchool,进行学习. 基础我就不说了,直接将我做的一个登陆页面放上去.刚学完CSS,写个漂亮的登录界面恶心死我了,感 ...

  3. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  4. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  5. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  6. css学习归纳总结（一） 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  7. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  8. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  9. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

随机推荐

  1. MySQL DB 主从复制之SSL

    需求架构 准备工作 主从服务器时间同步 # 主从服务器同时配置crontab任务,与NTP服务器同步时间即可 */5 * * * * ntpdate 172.16.0.1 &>/dev/ ...

  2. Git_git的诞生

    很多人都知道,Linus在1991年创建了开源的Linux,从此,Linux系统不断发展,已经成为最大的服务器系统软件了. Linus虽然创建了Linux,但Linux的壮大是靠全世界热心的志愿者参与 ...

  3. Spring源码解析 – @Configuration配置类及注解Bean的解析

    在分析Spring 容器创建过程时,我们知道容器默认会加载一些后置处理器PostPRocessor,以AnnotationConfigApplicationContext为例,在构造函数中初始化rea ...

  4. Spring <context:annotation-config/> 解说(转)

    在基于主机方式配置Spring的配置文件中,你可能会见到<context:annotation-config/>这样一条配置,他的作用是式地向 Spring 容器注册 AutowiredA ...

  5. Assembly类

    System.Reflection.Assembly类是一个比较常用到的类,在反射中就经常用到. 由于这个类实在有太多的字段.属性与方法.实在不想将一个个属性方法从MSDN复制出来然后逐个属性.方法敲 ...

  6. eclipse and systemtap

    http://wiki.eclipse.org/Linux_Tools_Project/Systemtap/User_Guide

  7. Setup Factory打包winform程序

    摘要 Setup Factory是一款软件安装工具.Setup Factory支持创建一个安装文件或一个单间的setup.exe文件,生成文件可以运行于任意版本的windows中. 步骤 1.安装Se ...

  8. java基础学习总结——哈希编码

    一.哈希编码

  9. 精心收集整理的SQL Server 2014/2012/2008/2005/2000简体中文企业版下载地址

    经常在网上看到有同学费尽心思的找SQL server数据库各版本的下载地址,看到别人的求助贴就不自觉的想去帮助他们,但是一个一个去帮助又不太现实,毕竟个人精力有限,既然大家有需求,那么笔者就本着乐于分 ...

  10. merge into优化sql（转）

    使用Merge INTO优化SQL,性能提升巨大 分类: Oracle 2017-04-13 10:55:07   说说背景:开发有个需求,需要对新加的一个字段根据特定的业务逻辑更新数据.TPS_TR ...