CSS，通常称之为层叠样式表。样式，就是指网页中的内容（文字、图片）该以什么样子（大小、颜色、背景、插入位置）显示出来。层叠是指当CSS定义的样式发生了冲突，将依据层次的先后顺序来处理网页中的内容
尺度单位：相对类型、绝对类型
相对类型：相对于一个参考基础而设立的尺度单位
px：像素
Em：以目前字符的高度为单位
绝对类型：与分辨率无关
常用单位：
尺 度 单 位 说 明
in（英寸） 不是国际标准单位，极少用。
cm（厘米） 国际标准单位，较少用。
mm（毫米） 国际标准单位，较少用。
pt（点数） 最基本的显示单位，较少用。
pc（印刷单位） 应用在印刷行业中，1 pc = 12 pt
示例代码
<style type="text/css">
<!--#mm{text-indent:100}
-->
</style>
<p id=mm>这一段的首行缩进</p>
字符间距和段落行距：字符间距
#sp{letter-spacing: 10}
字符间距和段落行距：段落行距
#e{line-height:2}
段落的水平位置
#t{text-align:center}
段落的垂直位置
#hh{vertical-align：top}
化学方程式和数学式：
#li{vertical-align:sub;font-size:6}
#li{vertical-align:sup;font-size:6}
文字的字体设置：
P{font-family:黑体，宋体,幼圆}
P{font-style:oblique}
文字的粗细控制：
P{font-weight:900}
文字的大小控制：
{font-size:10px}
文字的加线效果：
#ss{text-decoration:overline}
英文字母的大小写转换：英文字母的大小写转换(p120)
#{text-transform:capitialize}
英文字母的大小写转换：小写字母转换为大写
{font-variant:small-caps}
列表中的符号：图像符号;列表符号缩进
P{list-style:url(001.jpg);list-style-postion:inside；color:red}
P{list-style:url(001.jpg);list-style-postion:outside;color:blue}
列表中的符号：各种序列符号
{list-style-type:lower-roman}
{list-style-image:url(001.jpg)}
{list-style-position:outside}
模块边界的设置：主要用来控制模块与其他组件的空白距离
{ Margin-top:30;
Margin-right:30;
Margin-left:30;
Margin-bottom:30
}
模块边框的设置：控制模块的边框宽度
{border-top-width:10}
{border-right-width:20}
{border-bottom-width:15}
{border-left-width:5}
{border-width:5}
模块边框的设置：控制模块的边框颜色
{border-corlor:red}
{border-left-corlor:red}
模块边框的设置：控制模块的边框样式
{border-style:dotted}
模块内边界的设置：
{padding-top:30}
{padding:30 20 10 20}
红色的网页背景，黄色的文字背景：
{background-color:red}
网页以及文字的图片背景设置：
{background-image:url(002.jpg)}
背景图片的并排设置：背景图片的横向平铺
{background-image:url(001.jpg);background-repeat:repeat-x}
图片的固定设置：
{background-attachment:fixed}
图片的定位设置：
{background-position:50% 50%}
多样的超链接链接颜色的设置
<style type="text/css">
<!--
a:link{color:red}
a:visitec{color:blue}
a:active{color:yellow}
a:hover{color:green}
-->
</style>
去除链接的下划线
a{text-decoration:none}
立体滚动条的制作
body{scrollbar-face-color:red;
scrollbar-shadow-color:green;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:blue;
scrollbar-darkshadow-color:purple;
scrollbar-track-color:pink;
scrollbar-arrow-color:black}
光标
a:hover{color:green;cursor:wait}
区域的定义：制作3个相邻的区域
<style type="text/css">
<!--
#d1{background-color:pink;font-siae=20;width:400;height=100;position:abosllute}
#d2{background-color:purple;font-siae=20;width=200;height=100}
#d3{background-color:black;font-siae=20;width=100;height=100}
-->
</style>
区域的定位：
#z1{position:absolute;top:0;left=0}
区域的定位：区域的定位
position:static:所有元素的默认定位都是position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。
position:relative:如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】
当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。
css的定义方式：
内部定义
方式一：
<head>
<style type="text/css">
<!–
h1{font-family:楷体;color:red}
-->
</style>
</head>
方式二：
<p>
<h1 style=“font-family:楷体”;color:red>
这个字体被定义为红色楷体
</h1>
</p>
外部定义
调用方式一：
<style type=“text/css”>
@import url(“02.css”)
</style>
调用方式二:
<head>
<link type=“text/css” rel=stylesheet href=01.css>
</head>
分享到：
相关推荐
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
### HTML与CSS学习笔记 #### 一、基础知识概述 HTML（HyperText Markup Language）与CSS（Cascading Style Sheets）是构建网页的基础技术。通过学习HTML与CSS，我们可以创建结构化且美观的网页。 - **WWW (World ...
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS ...
本资源为【html + css 学习笔记整理.zip】，是一份专为希望深入学习HTML和CSS的用户准备的实用资料。它涵盖了从基础到进阶的知识点，包括HTML的基本结构、常用标签及其属性，以及CSS的核心概念如选择器、盒模型、...
个人css学习笔记 精华版 CSS学习笔记中涵盖了CSS的基本概念、分类、基本语法、常用属性等知识点。下面将对这些知识点进行详细的解释和总结。 什么是CSS？ CSS（Cascading Style Sheet）是一种样式表语言，用于...
### CSS+DIV 学习笔记知识点总结 #### 一、CSS 概述 - **CSS 定义**：层叠样式表（Cascading Style Sheets, CSS）是一种用于定义网页表现形式的语言，它使得开发者能够独立地管理和控制文档的内容与样式。 - **CSS...
【标题】"Metro UI CSS学习笔记Demo"是一个关于利用Metro UI CSS框架进行Web设计和开发的实践案例集合。这个框架灵感来源于Windows 8的Modern UI风格，为网页设计师提供了构建现代、简洁且互动性强的界面的可能性。...
本资源是一套详尽的HTML和CSS学习笔记，旨在帮助初学者搭建坚实的Web开发基础。通过这份资料，学习者可以掌握HTML的基本标签和结构，如段落、标题、链接等，并了解如何使用CSS进行样式设计和布局控制。内容涵盖从...
### 级联样式表CSS学习笔记 #### 一、设置CSS的几种方式 在网页设计与开发过程中，级联样式表（Cascading Style Sheets，简称CSS）是一种用来描述HTML文档外观和格式的语言。CSS提供了多种应用方式，以便开发者...
"韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记" 本资源主要讲解了 DIV+CSS 的概念和应用， DIV 是 HTML 文档中用来提供结构和背景的元素，而 CSS 是一种用来表现 HTML 或 XML 等文件式样的...
这份“我的HTML+Css学习笔记”无疑是对于初学者来说极好的资源，它涵盖了从基础到进阶的重要概念。 HTML是网页内容的结构语言，通过一系列标签来定义网页的各个部分，如`<head>`、`<body>`、`<h1>`至`<h6>`的标题、...
在`CSS学习笔记-01.md`、`CSS学习笔记-02.md`和`CSS学习笔记-03.md`中，可能会深入讲解这些概念，包括更多选择器用法、布局技巧、CSS3特效和预处理器的使用，帮助读者逐步掌握这个强大的样式语言。
以上内容总结了DIV CSS学习笔记中的关键知识点，包括文档类型声明、CSS选择器、CSS引入方式、布局模型以及背景与边框设置。这些知识对于前端开发者来说至关重要，能够帮助他们创建结构良好、样式丰富的网页。
### CSS学习笔记（手写版） #### CSS基础知识 **CSS**（Cascading Style Sheets，层叠样式表）是一种用于定义HTML文档外观的语言。它可以让网页具有更好的视觉表现力，同时使得HTML文档更加语义化。 1. **CSS选择...