CSS巩固学习之一

来源：互联网发布：淘宝店铺注册单可靠吗编辑：程序博客网时间：2024/05/21 06:50

一，css概念简介

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

二，语法

<html><head><style>body {background-color:yellow;}h1   {font-size:36pt;}h2   {color:blue;}p    {margin-left:50px;}</style></head><body><h1>This header is 36 pt</h1><h2>This header is blue</h2><p>This paragraph has a left margin of 50 pixels</p> </body></html>

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

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

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

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

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

1，外部样式表

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

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

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

2，内部样式表

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

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

3，内联样式

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

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

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

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

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

四，CSS选择器

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

1，id选择器

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

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>即讯科技</title> <style>#para1{text-align:center;color:red;} </style></head><body><p id="para1">Hello World!</p><p class="center">这个段落不受该样式的影响。</p></body></html>

2,class选择器

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

.center {text-align:center;}

3，元素选择器

p{background-color:yellow;}

选择所有<p> 元素 :

4,属性选择器

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

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

<!DOCTYPE html><html><head><style>[title]{color:blue;}</style></head><body><h2>Will apply to:</h2><h1 title="Hello world">Hello world</h1><a title="runoob" href="http://www.runoob.com/">runoob.com</a><hr><h2>Will not apply to:</h2><p>Hello!</p></body></html>

属性用中括号[ ]表示。
属性和值进一步选择，下面的实例改变了标题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后代选择器

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

以下实例选取所有 <p> 元素插入到 <div> 元素中:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <style>div p{background-color:yellow;}</style></head><body><div><p>段落 1。 在 div 中。</p><p>段落 2。 在 div 中。</p></div><p>段落 3。不在 div 中。</p><p>段落 4。不在 div 中。</p></body></html>

段落1,2背景变黄。

5.2子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <style>div>p{    background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div><h2>My name is Donald</h2><p>I live in Duckburg.</p></div><div><span><p>I will not be styled.</p></span></div><p>My best friend is Mickey.</p></body></html>

只有<p>I live in Duckburg.</p> 背景变为黄色，<span><p>I will not be styled.</p></span>背景色没有变，只有儿子变了，孙子不变。而后代选择器是儿子，孙子，重孙子所有子孙都改变。

5.3 相邻兄弟选择器

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

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

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>div+p{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div><h2>My name is Donald</h2><p>I live in Duckburg.</p></div><p>My best friend is Mickey.</p><p>I will not be styled.</p></body></html>

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

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

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

RUNOOB.COM<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>div~p{    background-color:yellow;}</style></head><body><p>之前段落，不会添加背景颜色。</p><div><p>段落 1。 在 div 中。</p><p>段落 2。 在 div 中。</p></div><p>段落 3。不在 div 中。</p><p>段落 4。不在 div 中。</p></body></html>Copyright © 2013-2017菜鸟教程

段落3,4 背景色变黄。

6，伪类，伪元素

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

<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <style>input:focus{background-color:yellow;}</style></head><body><form action="demo-form.php" method="get">First name: <input type="text" name="fname" /><br>Last name: <input type="text" name="lname" /><br><input type="submit" value="提交" /></form><p><b>注意:</b>仅当 !DOCTYPE 已经声明时 IE8 支持 :focus.</p></body></html>

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

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

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

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

下面的例子在每个 <h1>元素前面插入一幅图片：

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

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

下面的例子在每个 <h1> 元素后面插入一幅图片：

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

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

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

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

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

阅读全文

0 0