CSS

2017-11-24 13:57:40

CSS：Cascading Style Sheets，也就是层叠样式表。在制作网页的时候采用CSS样式，可以有效的对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。CSS大大提高了开发者对信息展现格式的控制能力，特别是在目前比较流行的CSS + DIV布局的网站中，CSS的作用更是举足轻重。

在网页中使用CSS样式不仅可以美化页面，而且可以优化网页的速度。因为CSS样式表文件只是简单的文本格式，不需要安装额外的第三方插件。另外，由于CSS提供了很多的滤镜效果，从而避免了使用大量的图片，这样将大大减少文件的体积，提高下载速度。

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中

样式表定义元素怎样去显示.外部样式表能够让你改变所有出现在你WEB中的外观和布局,而仅仅通过编辑一个单独的CSS文档.(原理就是一动多变)。

CSS是一个在设计领域中的突破,因为它允许开发者一下就能控制多个WEB页的样式和布局.作为一名WEB开发者你可以为每个HTML元素和应用他的每个页面定义一个你想要的样式.来实现全面的改变,简单的改变样式,所有与之相关的元素都会自动更新。

多个样式的优先级：行内样式(在一HTML元素内)>内嵌样式表(在<head>标签内)>外部样式表>浏览器默认

CSS的语法由三部分组成: 一个选择器，一个属性和一个值.

例如：selector {property: value}

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

// 你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来，它们的颜色都变为绿色
 h1,h2,h3,h4,h5,h6 { color: green }

// 如果要对同一标签进行不同的样式，可以采用属性的方式进行区分
// 注意：每个HTML元素只能有一个类属性
<p class="right"> This paragraph will be
right-aligned. </p>
<p class="center"> This paragraph will be
center-aligned. </p>

p.right {text-align: right}
p.center {text-align: center}

// 可以省略标签名，这样就是对同一属性的所有标签进行样式的设定
// 下面的例子就能让所有HTML中所有带class="center"的元素居中文字：
 .center {text-align: center}

// 使用id 选择器你可以为不同的HTML元素定义相同的样式
<h1 id="green">Some text</h1>
<p id="green">Some text</p>
p#green {color: green}

// 同理，也是可以省略标签名，就是对所有相同id的标签进行样式的设定
#green {color: green}

在html中使用CSS样式：

外部样式表

使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。<link>标签在head区域使用。

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

内嵌样式表

内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式。

<head>
<style type="text/css">
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

行内样式表

在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red。

<p style="color: red; margin-left: 20px"> This is a paragraph </p>