一 什么是css?

  ●css指层叠样式表(cascading style sheets)

  ●样式定义如何显示html元素

  ●样式通常存储在样式表中

  ●把样式添加到html4.0中,是为了解决内容与表现分离的问题

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

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

  ●多个样式定义可层叠为一

  注意:在学习css之前,你需要具备html的基本知识.之前已经粗略介绍过.后边还会详细介绍

  css允许你针对html元素应用特定的样式

  css的主要好处在于,它允许你将样式和页面内容进行分离

  仅适用html,样式和页面内容混在一起,这样的页面将会变得难以维护

  所有的web页面样式都可以(也应该)从html文档中分离出来,建立成一个单独的css文件使用

  二 内联 嵌入式 外部引用css

  在web文档中插入一个样式表是内联样式的使用方法之一.使用内联样式,将独特的样式应用于单个元素

  为了使用内联样式,将样式属性添加到相关的标签中.

  下面的例子展示了如何创建一个灰色背景和白色文本的段落:

  This is an example of inline styling.

  运行效果如下:

  ◆在

  This is my first paragraph.

  This is my second paragraph.

  结果所有的段落都变成白色字体和灰色背景

  ◆外部引用css:将所有的css样式保存在同一个后缀名.css的拓展文件中

  然后通过html标签在html页面的

  这是我的一个段落

  这是我的第二个段落

  这是我的第三个段落

  css部分:

  p{

  color:white;

  background-color:gray;

  }

  所有段落都是统一的样式

  ●相对路径和绝对路径都可以用来定义css文件的href.在我们的示例中css 网站变灰,路径是相对的,因为css文件和html文件位于同一目录下

  三 css规则与选择器

  css是由浏览器解释的样式规则,然后应用于文档中相应的元素.

  样式规则有三部分:选择器 属性 属性值

  例如,标题颜色可以定义为:

  h1 { color:orange;}

  选择器指向需要设置样式的html元素;

  声明块包含一个或多个用分号分隔的声明;

  每个声明都包含一个由冒号分隔的属性名称和值

  例如:

  h2{

  color:red;

  background:#fff;

  }

  ●最常见和最易于理解的选择器是类型选择器.该选择器以页面上的元素类型为目标

  例如,要定位页面上的所有段落

  p{

  color:red;

  font-size:130%;

  }

  ●css声明总是以分号结尾.而声明块则由大括号包围.

  id选择器允许你设置具有id属性的html元素,而不管他们在文档树中的位置.

  举例说明:

  html部分:

  今年过节送什么?

  w3cschool会员,送了都说好!

  css部分:

  #intro{

  color:white;

  background-colot:gray;

  }

  要选择具有特定ID的元素,请使用"#",然后使用元素的id跟随它

  class选择器以类似的方式工作.主要区别在于每个元素的id具有唯一性,id每个页面只能应用一次,而class可以在页面上多次使用.

  ●要选择具有特定类的元素,请使用"."符号,后跟该类的名称

  避免使用数字来命名id和class

  .mytext{

  color:black;

  }

  设置class="mytext"的文本颜色为黑色

  ●这些选择器用于选择另一个元素的后代的元素.选择后代的层级时,你可以根据需要选择尽可能多的层级

  例如,要仅定位"intro"部分第一段中的元素

  html部分:

  这是一个段落.

  这是第二个段落.

  这个段落不在intro部分

  这个段落也不在intro部分

  css部分:

  #intro .first em{

  color:pink;

  background-color:gray;

  }

  因此,只有选中的元素会受到影响.

  #test p{

  color:red;

  }

  上边的例子:为属于id="test"的元素的所有段落设置颜色为红色.

  四 css注释

  / 这是一个注释 / 注释用于解释你的代码 ,浏览器会自动忽略注释 .类似于java中的多行注释

  五 css的级联与继承

  页面的最终外观是不同的样式结合的结果

  通过样式的三个主要来源形成一个级联:

  ●由页面的作者创建的样式表

  ●浏览器的默认样式

  ●用户自定义的样式

  继承是指属性在页面上的流动方式.除非另有定义,子元素通常会继承父元素的特征

  例如:

  路人甲

  结果:路人甲的颜色为绿色css 网站变灰,样式效果和它的父元素是一样的

  由于段落标记(子元素)位于正文标记(父元素)内,因此它将采用指定给正文标记的任何样式.