CSS 基本知识
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 基本知识相关的知识，希望对你有一定的参考价值。
1、CSS 简介
CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。
html 标签被设计为用于定义文档内容，也就是文档结构，为了增强代码的可读性，实现网页结构与表现相分离的原则，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML4 之外创造出样式（Style）。CSS 目前最新版本是 CSS3，相对于传统 HTML 的表现而言，CSS 能够对网页中对象的位置排版进行像素级的精确控制，拥有对网页对象编辑的能力，易于维护和改版，提高页面浏览速度，使用 CSS 布局页面更符合 W3C 标准，他是目前基于文本展示最优秀的表现设计语言。
CSS 样式表极大地提高了工作效率：样式通常保存在外部的 .css 文件中，通过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中所有页面的布局和外观。
2、CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。如下：
1 p{ 2 color:red; 3 text-indent:2em; 4 }
选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。
CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。如下：
1 p{ 2 color:red; 3 text-indent:2em; /* 段落缩进2个字，即段落开头空2个汉字的位置。 */ 4 }
3、创建 CSS
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。
(1)、内联样式
内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。如下：
<div style="width:200px;height:100px;border:1px solid black;"></div>
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。
(2)、内部样式
内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用 <style> 标签在文档头部定义内部样式表，如下：
1 <head> 2 <style> 3 div{ 4 width:200px; 5 height:100px; 6 border:1px solid black; 7 } 8 p{ 9 color:blue; 10 font-size:14px; 11 } 12 span{ 13 color:black; 14 font-weight:bold; 15 } 16 </style> 17 </head>
当单个文档需要特殊的样式时，就应该使用内部样式表。
(3)、外部样式
外部样式也叫做外联样式，即使用 <link> 标签链接到外部样式表，如下：
1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css"> 3 </head>
当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意：<link> 标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。
外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。注意：不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那么它在不同的浏览器中可能无法正常工作，导致意向不到的结果。
(4)、样式优先级
样式优先级，也可以称为层叠次序，即同一个 HTML 元素不止被一个样式定义时，会优先使用哪个样式。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中：
内联样式 > 内部样式 > 外部样式
内联样式（在 HTML 元素内部）拥有最高的优先权，即优先采用在元素内部定义的样式信息，然后是内部样式表（位于 <head> 标签内部），最后是外部样式表中的样式声明，浏览器中的样式声明（缺省值）同外部样式处于同一层次。
优先级的顺序是有一个前提的，即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。
但是内部样式 > 外部式也有一个前提，即内部样式的位置一定在外部样式的后面。如下：
1 <link rel="stylesheet" type="text/css" href="css/style.css"> 2 <style> 3 ... 4 </style>
(5)、多重样式
样式表允许以多种方式规定样式信息，样式可以规定在单个的 HTML 元素中，或在 HTML 页的 <head> 元素中，亦或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表，但是最终多重样式将被层叠为一个。那就意味着：如果你使用了外部文件的样式，在 <head> 中也定义了该样式，那么内部样式会取代外部文件中的样式。
4、id 和 class 选择器
如果要给 HTML 元素设置 CSS 样式，则需要在元素中设置 "id" 和 "class" 属性，该属性用作选择器。
(1)、id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。
1 <head> 2 <style> 3 #heading{ 4 color:red; 5 text-align:center; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 id="heading">CSS 选择器</h1> 11 </body>
(2)、class 选择器
class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：类名的第一个字符也不能使用数字。
实例：所有拥有 center 类的 HTML 元素均为居中显示。
1 <head> 2 <style> 3 .center{ 4 text-align:center; 5 } 6 .col{ 7 color:red; 8 } 9 .font{ 10 font-size:18px; 11 font-family:"Microsoft YaHei"; 12 } 13 </style> 14 </head> 15 <body> 16 <h1 class="center">class 选择器</h1> 17 <p class="center col">我是一个段落。</p> 18 <p class="center font">我是另一个段落。</p> 19 </body>
实例：所有的 p 元素使用 class="center"，让该元素的文本居中。
1 <head> 2 <style> 3 .center{ 4 color:blue; 5 } 6 p.center{ 7 text-align:center; 8 } 9 p.col{ 10 color:red; 11 } 12 .font{ 13 font-size:18px; 14 font-weight:bold; 15 font-family:"Microsoft YaHei"; 16 } 17 </style> 18 </head> 19 <body> 20 <h1 class="center col">class 选择器</h1> 21 <p class="center col">我是一个段落。</p> 22 <p class="center col font">我是另一个段落。</p> 23 <h2 class="center">h2 标题</h2> 24 </body>
(3)、ID 选择器和类（class）选择器的区别
相同点：可以应用于任何元素。
不同点：
①、ID 选择器只能在文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
②、可以使用类选择器词列表方法为一个元素同时设置多个样式。在一个 HTML 文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的，不能使用 ID 词列表，即一个元素可以指定多个类名，如 <span class="one two three">文本</span>，而 ID 只能指定一个。
5、CSS 元素选择器
最常见的 CSS 选择器就是元素选择器，即标签选择器，也就是说 HTML 的元素就是最基本的选择器。
如果使用元素选择器设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 body、h1、p、a，也可以是 html 本身。
在 W3C 标准中，元素选择器也叫做类型选择器，类型选择器匹配文档中元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例，也就是如果使用元素选择器，比如 h1{color:red;}，他会匹配文档中所有的 h1 元素，即页面上所有的 h1 标题都显示为红色。
6、CSS 背景
background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有以下五种：
①：background-color
②：background-image
③：background-repeat
④：background-position
⑤：background-attachment
(1)、background-color：背景颜色
background-color 属性定义了元素的背景颜色。页面的背景颜色可以使用 body 元素选择器进行定义：
1 body{ 2 background-color:gray; 3 }
CSS 中，颜色值通常使用以下方式定义：
①：十六进制，如："#ff0000"，类似这样的形式，可以缩写为："#f00"。
②：RGB，如："rgb(255,0,0)"。
③：颜色名称，如："red"。
(2)、background-image：背景图像
background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体，页面背景图片设置如下：
1 body{ 2 background-image:url(‘images/wallpaper.jpg‘); 3 }
(3)、background-repeat：背景图像设置水平或垂直平铺或不平铺
默认情况下，background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些：background-repeat:repeat-x，定义垂直方向平铺语法：background-repeat:repeat-y。
在使用背景图像时，默认会平铺重复显示，这样不仅不具有美感，还会影响文本的排版。如果不想让图像平铺，并且只显示一次，那么就这样定义：background-repeat:no-repeat。
1 <head> 2 <style> 3 body{ 4 background-image:url(‘images/wallpaper.jpg‘); 5 background-repeat:no-repeat; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 class="center col">class 选择器</h1> 11 <p class="center col">我是一个段落。</p> 12 <p class="center col font">我是另一个段落。</p> 13 <h2 class="center">h2 标题</h2> 14 </body>
(4)、background-position：背景图像设置定位
在上面的例子中，背景图像与文本显示在同一个位置，这样不利于文本的阅读，为了让页面排版更加合理，可以利用 background-position 属性改变图像在背景中的位置：
1 body{ 2 background-image:url(‘images/wallpaper.jpg‘); 3 background-repeat:no-repeat; 4 background-position:right top; 5 }
此时，背景图像会显示在页面的右上角。background-position 属性设置背景图像的位置，如果背景图像要重复，也将从这一点开始。
background-position 属性值可以使用关键字表示：left | right | center，如果仅指定一个关键字，其他值将会是 "center"。该方法可能的值的有：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。
background-position 属性值也可以使用百分比表示：x％y％，默认值为：0％0％，第一个值是水平位置，第二个值是垂直位置。左上角是 0％0％，右下角是 100％100％。如果仅指定了一个值，其他值将是 50％。
background-position 属性值还可以使用长度单位精确表示，单位可以是像素或任何其他 CSS 单位，通常都使用像素。第一个值是水平位置，第二个值是垂直位置，左上角是 0 0，两个数值之间用空格隔开，例如：background-position:12px 24px; 表示背景图片距离该元素左上角的水平方向位置是 12px，垂直方向位置是 24px。该属性就是图像左上角相对于元素左上角的位置偏移，如果取负值，则向上向左偏移。该方法在制作 CSS 雪碧图（即 CSS Sprite，也叫做 CSS 精灵）时，将十分重要。
(5)、background-attachment：背景图像设置固定或滚动
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，默认值是 scroll，背景图片随页面的其余部分滚动。如果需要设置图像不随着页面的其他部分滚动，那么属性值则使用 fixed，定义背景图像是固定的，如下：
1 <head> 2 <style> 3 body{ 4 height:2000px; 5 background-image:url(‘images/fix.gif‘); 6 background-repeat:no-repeat; 7 background-attachment:fixed; 8 } 9 </style> 10 </head> 11 <body> 12 <p>我是一个段落,我是一个段落</p> 13 <p>我是一个段落,我是一个段落</p> 14 <p>我是一个段落,我是一个段落</p> 15 <p>我是一个段落,我是一个段落</p> 16 <p>我是一个段落,我是一个段落</p> 17 <p>我是一个段落,我是一个段落</p> 18 <p>我是一个段落,我是一个段落</p> 19 <p>我是一个段落,我是一个段落</p> 20 <p>我是一个段落,我是一个段落</p> 21 <p>我是一个段落,我是一个段落</p> 22 <p>我是一个段落,我是一个段落</p> 23 <p>我是一个段落,我是一个段落</p> 24 <p>我是一个段落,我是一个段落</p> 25 <p>我是一个段落,我是一个段落</p> 26 <p>我是一个段落,我是一个段落</p> 27 <p>我是一个段落,我是一个段落</p> 28 <p>我是一个段落,我是一个段落</p> 29 <p>我是一个段落,我是一个段落</p> 30 <p>我是一个段落,我是一个段落</p> 31 <p>我是一个段落,我是一个段落</p> 32 <p>我是一个段落,我是一个段落</p> 33 </body>
(6)、背景属性简写
在上面实例中，设置页面的背景效果时，通过很多的单个属性来进行定义，这样代码就显得很繁琐，为了简化这些属性的代码，可以将这些属性合并在同一个属性中，如下：
1 body{ 2 background:green url(‘images/fix.gif‘) no-repeat fixed 12px 24px; 3 }
background 属于复合属性，也叫快捷属性，他可以简化代码，提高页面的运行效率，但是在使用 JS 时却不能使用复合属性来获取元素的样式，需要使用单个属性精确获取，如果一个元素定义了多个背景样式，那么使用复合属性获取，浏览器并不知道你到底需要哪个样式，就出错了。类似这样的复合属性还有：font、border、padding 和 margin 等。
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
以上属性无需全部使用，可以按照页面的实际需要使用，比如只定义背景颜色，就可以这样设置：background:#90C;
7、CSS 文本格式
(1)、文本颜色
color 属性被用来设置文字的颜色，可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。
1 <head> 2 <style> 3 body{ 4 background-color:#d5f3f4; 5 } 6 h1{ 7 color:#00c; /* color:#0000cc; */ 8 } 9 </style> 10 </head> 11 <body> 12 <h1>文字颜色</h1> 13 <p>可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。</p> 14 </body>
(2)、文本对齐方式
text-align 文本排列属性可以用来设置文本的水平对齐方式，文本可以居中或对齐到左或右，两端对齐。
该属性有4个值，默认值为 left，由浏览器决定，把文本排列到左边，即对齐到左。center 则为文本居中，right 为文本对齐到右边。
1 <head> 2 <style> 3 h1{ 4 text-align:center; 5 } 6 h3{ 7 text-align:以上是关于CSS 基本知识的主要内容，如果未能解决你的问题，请参考以下文章