1_34_CSS入门学习_1015

CSS入门

CSS简介

CSS指的是Cascading Style Sheets，即层叠样式表，是一种设计网页样式及布局的技术。所谓“层叠”，实际上指的是将显示样式与显示内容分离。

在Web标准中，表现是赋予页面内容显示的样式，包括版式、颜色和大小等等。也就是说，页面中显示的内容放在结构里，而修饰、美化放在表现里，做到结构（内容）与表现分开，这样，当页面使用不同的表现时，呈现的样式是不一样的，就像人穿了不同的衣服，表现就是结构的外衣，W3C推荐使用CSS来完成表现。

CSS语法

CSS 语法由三部分构成：选择器、属性和值。

selector {

property1: value1;

property2:value2;

}

P{

Text-align : center;

Color:red;

Background-color: greenyellow;

}

•
选择器（selector）是指给页面的哪个或哪些元素定义样式，通常是希望定义样式的元素标签。

•
属性（property）是定义的具体样式（如颜色、字体等），每个属性都有一个值，属性和值用冒号隔开，并用大括号括起来。

•
属性和值组成样式声明（declaration），可以定义多个声明，多个声明之间用分号隔开。

•
当有多个声明时，建议在每行只描述一个声明，这样可以增强样式的可读性，如：

p {text-align:
center;color: black;font-family: arial;}

p {

text-align: center;

color: black;

font-family: arial;

}

•
CSS对大小写不敏感，是否包含空格不会影响CSS在浏览器的效果。

CSS常用选择器

1.元素选择器

•
元素选择器就是元素自身，定义时直接使用元素标签名称。如定义段落样式，可以选择p元素的名称，即把p作为选择器。例如：

•

p,h1,form ,table,html, table{color:green;}

例：

这是body内的文字

这是标题1文字

2. 通用选择器

•
通用选择器是一种特殊的选择器，用“”表示，CSS中的通用选择器与Windows通配符“”具有相似的功能，可以定义所有元素的样式。如：

•
{font-size:12px; /<定义文档中所有字体大小为12像素>*/}

•
上面的样式将会影响文档中所有元素，即文档中所有字体大小都被定义为12像素。使用通用选择器时要慎重，一般常用于定义文档中各种元素的共同属性，如字号、字体等。

3. 分组选择器

•
可以对选择器进行分组，被分组的选择器就可以共享相同的声明。用逗号将需要分组的选择器隔开。

•
下面的例子中，对所有的标题元素进行了分组，所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6{color:green;}

4.包含选择器

包含选择器是根据元素在其位置的上下文关系来定义样式，也称后代选择器。如在下面代码中，希望列表中的strong元素变为斜体字，而不是默认的粗体字。

粗体字

• 斜体字
• 正常字体

• •
  可以定义如下派生选择器，这样只有li元素中的strong元素样式为斜体字。

  li
  strong{font-style:italic;font-weight:normal;}

  5. id选择器（精确定位）

  •
  id选择器使用元素的id属性值为元素指定样式，id选择器必须在元素的id属性值前加“#”。如:

  #red{color:red;}

  #green{color:green;}

  •
  在下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色

  这个段落是红色。

  这个段落是绿色。

  •
  id选择器常用于建立包含选择器。例如：

  #sidebar
  p{font-style:italic;text-align:right;}

  6.类选择器

  •
  类名的第一个字符不能使用数字！它无法在Mozilla或Firefox中起作用。

  •
  和id选择器一样，类选择器也常常被用作派生选择器。例如：

  .one td{color:#f60;background:#666;}

  类名为one的元素内部的表格单元格都会以灰色背景显示橙色文字

  7. 子元素选择器

  •
  子元素选择器只能选择作为某元素的子元素声明样式，子选择器使用“>”号。

  •
  如希望选择只作为h1元素的子元素strong，可以这样写：

  h1>strong{color:red;}

  •
  这个规则会把下面代码中第一个h1下面的strong元素变为红色，但是第二个strong不受影响。

  这是非常重要的

  这个已经非常重要了

  8. 小总结：

  1.元素选择器 html{}

  2.统配符 选择器
  *

  3. 分组选择器
     h1，h2{}

  4. 包含选择器
     li strong {}

  5. id 选择器
     #id_name{}

  6. 类选择器
     .class{}

  7.子元素选择器
  h1 > strong{}

  注意： 4，和
  7 的区别 ： 子元素选择器 只对 子元素起作用 而 包含选择器 对包含在里面的子元素 和 子孙元素都起作用

  CSS样式的3种使用方式

  1内嵌方式

  v 内嵌方式指的是将CSS规则混合在HTML标签中使用的方式。CSS规则作为HTML标签的style属性值。例如：

  这是使用样式的超级链接

  v 内嵌样式只对其所在的标签起作用，其它的同类标签不受影响。

  Eg：

  

  使用内嵌样式的超级链接

  
  
  

  普通的超级链接

  2．内部样式表

  内部样式表指的是在HTML文档的标记内嵌入样式表，格式如下：

  eg:

  
  3．使用标记链接外部样式表

  v 外部样式表是使用一个单独的文件保存样式规则，扩展名为“.css”，需要使用样式表的HTML文件链接样式表文件。

  v 链接样式表使用标签，此标签作为的子标签使用，指明当前HTML页面和链接的样式表之间的关系，其格式为：

  其中：

  v href是外部样式表的路径，一般使用相对路径；

  v rel指的是被链接的文件的类型，stylesheet表示被链接的是CSS文件；

  v type指的是被链接的文件的内容类型；