CSS样式
一、CSS概念
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
二、CSS常用属性
字体
font-size 字体大小
font-famil 选择字体
font-weight 字体粗细
font-style:italic 斜体
color 字体颜色
背景
background-color 设置背景颜色
表格
border 粗细
solid 边框样式
border-radius 边框四角弯曲度
box-shadow 右宽
text-shadow 设置文字阴影
对齐
text-align 文字居中
text-decoartion:underline 下划线
text-decoration:line-through 删除线
text-left 左对齐
text-right 右对齐
line-height 行距
布局
float:left 靠左
float:right 靠右
position:absolute 绝对位置
position:relative 相对位置
position:fixed 固定定位
三、CSS样式
1.外部样式:可以通过更改一个文件来改变整个站点的外观。
例:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.内部样式表:单个文件需要特别样式时,就可以使用内部样式表。
例:
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3.内联样式:特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
例:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
四、优点
CSS对开发者构建Web站点的影响很大。CSS将网页的大部分甚至是全部的表示信息从HTML文件中移出,并将它们保留在一个样式表中有诸多优点,如降低文件大小、节省网络带宽以及易于维护等。此外,站点的表现信息和核心内容相分离,使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。
CSS简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。只要修改保存着网站格式的CSS样式文件就以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。这就避免了一个个网页的修改,大大减少了工作量。