CSS 是 Cascading Style Sheet
的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
一、如何把样式加入到你的网页。
1、链接外部样式。
<head>
<title>文档标题</title>
<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css"
type="text/css">
</head>
特点：格式与代码分离。
2、定义内部样式块对象。
<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!–
body {font: 10px "Arial"}
h1 {font: 15px/17px "Arial"; font-weight: bold; color: maroon}
h2 {font: 13px/15px "Arial"; font-weight: bold; color: blue}
p {font: 10px/12px "Arial"; color: black}
–>
</style>
</head>
<body>
特点：页面内部使用，方便，下载流量会适当减少。
3、内联定义。
<p style="margin-left: 0.5in;
margin-right:0.5in">这一行被增加了左右的外补丁<p>
特点：随意、方便。
上面三种方式都可以达到我们需要的效果，主要看我们想达到什么效果，还要看个人习惯，如果想格式和代码分离，就用第一种；如果是一个页面内部的应
用，用第二种和第三种方式都可以；第三种方式很随意，但是有一点不足的地方，下面会讲到。
二、语法
样式表语法 (CSS Syntax)
元素 { 属性:值 }
元素的写法将在下面第三部分讲到，属性和值将在第四部分讲到。
三、书写方法
1、直接用标签。
div{
font-size:12px;
}
<div>定义的样式</div>
特点：不用定义额外的元素，直接可以写CSS样式。
2、#开头的代表的是id。
#id{
font-size:12px;
}
<div id="text">定义的样式</div>
特点：可以为单独为某个元素定义的样式。
3、.开头的代表类
.text{
font-size:12px;
}
<div class="text">定义的样式</div>
特点：可以为一个页面里面多个应用此类的元素定义样式。
4、连写方式，中间加空格 (*)
div #text{
font-size:12px;
}
<div id="text">定义的样式</div>
#text p{
font-size:12px;
}
特点：精准定位到某个元素。
<div id="text">定义的样式<p>在p里面的样式</p></div>\
上面四种写法在我们平时用的都比较多，对于第四种是前三种的一种灵活的写法。具体用哪种方式，大家可以根据自己的情况来定。
四、常用的属性。
1、字体：font, font-size, font-family, font-weight, text-decoration,
line-height
A. font是一个复合属性。所有后面的这几个属性的值都可以放在font里面用。
B. font-size定义文字的大小。
C. font-family定义字体。
D. font-weight定义文字的粗细。
E. text-decoration定义文字的装饰。
F. line-height定义行高。
2、文本：text-indent, vertical-align, text-align, word-break
A. text-indent，设置对象的缩进。
B. vertical-align，设置对象的上下对齐方式。
C. text-align，设置对象的左右对齐方式。
D. word-break，设置字体的强制换行。
3、背景：background, background-color, background-image,
background-position, background-repeat
A. background定义背景的一个复合属性。和上面的font一样，可以把后面这几个属性的值都放在font里面用。
B. background-color定义的是背景的颜色。
C. background-image定义的是背景的图片。
D. background-position定义背景的位置。
E. background-repeat定义背景的是否平铺。
4、定位：position, z-index, top, right, bottom, left.
A. position定位方式。
B. z-index 定义层叠顺序。
C. top, right, bottom 和left表示距离他父级的上边，右边，下边和左边的距离。
5、尺寸：width, height
A. width定义对象的宽度。
B. height定义对象的高度。
6、布局：clear, float, display
A. clear 设置不允许又浮动对象的边。
B. float设置对象浮动及如何浮动。
C. display设置对象是否及如何显示。
D. visibility 设置对象是否显示。
7、外补丁：margin, margin-top, margin-right, margin-bottom, margin-left
A. margin定义外补丁的一个复合属性。同上。
B. margin-top定义对象的上边距离父级的外补丁。
C. margin-right 定义对象的右边距离父级的外补丁。
D. margin-bottom 定义对象的下边距离父级的外补丁。
E. margin-left 定义对象的左边距离父级的外补丁。
8、边框：border, border-top, border-right, border-bottom, border-left
同上（外补丁）。
9、内补丁：padding, padding-top, padding-right, padding-bottom,
padding-left
同上（外补丁）。
10、列表：list-style, list-style-image, list-style-position,
list-style-type
A.list-style是一个定义列表项目的复合属性。
B. list-style-image定义列表项目的图标。
C. list-style-type定义列表项目的标记。
11、其他：Cursor
这里只讲cursor，就是定义鼠标的显示样式，可以用图标。
12、伪类：:link, :visited, :hover, :active
:link定义链接未被点击时候的样式。
:visited定义链接点击之后的样式。
:hover定义鼠标移动到链接上的样式。
:active定义链接被激活时候的样式。
伪类只讲这四个，因为这四个用的最多，而且很多人容易出错，这里强调一个地方，书写顺序。在CSS里面写这四个伪类的时候，就按上面的顺序来写，
不要颠倒顺序，否则可能达不到我们想要的效果。
13、伪对象：:first-letter
这里只讲这一个伪对象，他的作用是定义对象的第一个字母的样式。
14、声明：!important
提升应用样式的优先权。这个声明在firefox和ie7上面支持，在ie6上面不支持。他的主要作用是用来调整不同浏览器显示效果的差异。
五、单位
1、长度：Px
px象素，in英寸等。用得最多的是象素px。
2、颜色：rgb(RGB),#RRGGBB
Rgb(255,255,255)，#FFFFFF
3、Color name：red, blue
六、注意
1、html代码和css代码尽量小写。
2、子随父姓，就近原则。
分享到：
相关推荐
【CSS基础学习】是网页设计领域中的重要环节，它是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS（层叠样式表）让网页设计者能够分离内容与表现，使得网页设计更加灵活且易于...
在IT领域，CSS...总结，学习CSS基础不仅涉及语法和选择器，还包括布局、响应式设计以及预处理器的使用。通过不断实践和了解这些概念，初学者可以逐步提升CSS技能，从而更好地设计和构建美观、功能完善的网页。
DIV+CSS教程——第一天XHTML_CSS基础知识
本“CSS基础学习源码”是一个适合初学者的资源包，提供了丰富的实践材料，帮助理解并掌握CSS的基础知识。 首先，我们来详细探讨CSS的基础概念： 1. **选择器与声明**：CSS的核心在于选择器和声明。选择器用于定位...
### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**，全称为 **Cascading Style Sheets**（级联样式表），是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观，如字体、颜色、间距、大小...
书名：CSS基础教程 作者：（英）柯林森 著，刘志忠 等译 来源：人民邮电出版社 出版时间：2007年09月 ISBN:9787115164629 定价：49元 内容介绍： 本书是优秀的CSS 入门书，重点讲述了如何使用CSS 实现基于Web ...
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
### CSS基础知识解析 #### 一、CSS简介 - **1.1 HTML的局限性** HTML是一种用于构建网页内容的标准标记语言。它主要用于定义网页内容的结构和意义，例如使用`<h1>`标签来表示一级标题，使用`<p>`标签来表示段落...
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
《HTML XHTML CSS基础教程（第6版）》是由著名IT教育家Elizabeth Castro编著的一本经典教程，专门针对初学者设计。这本书详细介绍了网页开发的基础技术，包括HTML、XHTML和CSS，帮助读者掌握构建现代网页的核心技能...
**CSS基础** 1. **选择器与声明**：CSS通过选择器（如元素选择器、类选择器、ID选择器等）来定位HTML元素，然后用声明（属性：值）来设置样式。 2. **盒模型**：CSS盒模型包括内容、内边距、边框和外边距，影响...
css基础教程，适合新手使用，仅供参考
CSS，层叠样式表，是用于控制网页元素样式的重要语言。在这篇关于"CSS基础选择器"的讲解中，我们将深入理解CSS选择器的概念以及如何使用它们来定位并应用样式到HTML...这样可以帮助你更好地理解和应用CSS基础选择器。
CSS基础-介绍及语法，css入门必备资料
### CSS基础代码详解 #### CSS入门精要：掌握核心概念与实践技巧 **CSS（Cascading Style Sheets）**，即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的标记语言。它使得网页设计更加灵活、高效...
html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css...
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
DIV+CSS基础教程全攻略，让你熟练如何更好的掌握DIV+CSS
【CSS基础知识】是针对初学者入门的一门课程，旨在教授如何使用CSS来控制网页的样式和布局。CSS，即层叠样式表（Cascading Style Sheets），是一种样式语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...