CSS巩固学习之一

一，css概念简介

    CSS 指层叠样式表 (Cascading Style Sheets)，简称CSS。样式表定义如何显示 HTML 元素，样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。大大提高了效率。

二，语法

This header is 36 pt
This header is blue

This paragraph has a left margin of 50 pixels
 

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

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

三，在HTML中如果插入样式表（CSS）

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

• 外部样式表(External style sheet)
• 内部样式表(Internal style sheet)
• 内联样式(Inline style)
  

    1，外部样式表

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

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

    2，内部样式表

      当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用     3，内联样式   

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

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

这是一个段落。

如果同一个元素被多种样式定义，它们的优先级是：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
并且取它们的并集来改变HTML元素。

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

四，CSS选择器

    选择器在编写css代码中至关重要，因为想要改变某个元素的样式，你必须要先通过选择器找到它。

    1，id选择器

     id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。CSS 中 id 选择器以 "#" 来定义。例如：

 
 




Hello World!
这个段落不受该样式的影响。

     2,class选择器

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

.center {text-align:center;}

   3，元素选择器

p
{
background-color:yellow;
} 

选择所有

元素 :

   4,属性选择器

     注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

      下面的例子是把包含标题（title）的所有元素变为蓝色：

Will apply to:
Hello world
runoob.com

Will not apply to:
Hello!

属性用中括号[ ]表示。
属性和值进一步选择， 下面的实例改变了标题title='runoob'元素的边框样式:

[title=runoob]
{
    border:5px solid green;
}

表单样式
元素+属性选择器样式无需使用class或id的形式:

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

5,组合选择器

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

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

• 后代选取器(以空格分隔)
• 子元素选择器(以大于号分隔）
• 相邻兄弟选择器（以加号分隔）
• 普通兄弟选择器（以破折号分隔）

   5.1后代选择器

     后代选取器匹配所有值得元素的后代元素。

     以下实例选取所有

元素插入到

元素中:

 
 





段落 1。 在 div 中。
段落 2。 在 div 中。


段落 3。不在 div 中。
段落 4。不在 div 中。

段落1,2背景变黄。

    5.2子元素选择器

    与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了

元素中所有直接子元素

：

 
 




Welcome to My Homepage

My name is Donald
I live in Duckburg.



I will not be styled.


My best friend is Mickey.

只有

I live in Duckburg.

背景变为黄色，

I will not be styled.

背景色没有变，只有儿子变了，孙子不变。而后代选择器是儿子，孙子，重孙子所有子孙都改变。

    5.3 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于

元素后的第一个

元素:

 
 




Welcome to My Homepage


My name is Donald
I live in Duckburg.


My best friend is Mickey.

I will not be styled.

只有My best friend is Mickey. 变黄。
    5.4后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有

元素之后的所有相邻兄弟元素

:

RUNOOB.COM







 

 






之前段落，不会添加背景颜色。


段落 1。 在 div 中。
段落 2。 在 div 中。

段落 3。不在 div 中。
段落 4。不在 div 中。




Copyright © 2013-2017菜鸟教程

段落3,4 背景色变黄。

6，伪类，伪元素

    CSS伪类、伪元素是用来添加一些选择器的特殊效果。使用冒号“：”来表示。例如：使用 :focus伪类

 
 





First name: 

Last name: 




注意:仅当 !DOCTYPE 已经声明时 IE8 支持 :focus.

当焦点选中输入框时，背景变黄色。
伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个

元素前面插入一幅图片：

h1:before 
{
    content:url(smiley.gif);
}

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个

元素后面插入一幅图片：

h1:after
{
    content:url(smiley.gif);
}

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

类似于这样的伪类、伪元素很多，更多的选择器请参考

http://www.runoob.com/cssref/css-selectors.html