目前css的最高版本是css3.0。需要先来学习css2.0，然后再学习css3.0.

本文链接：https://blog.csdn.net/YCC888/article/details/84097259

CSS

一、CSS基本概念：

（一）基础知识：

1．CSS（Cascading Style Sheets，层叠样式表）。

W3C标准化组织于1996年12月17日推出了CSS1规范，又于1998年5月12日推出了CSS2规范。

2．CSS样式表的功能：

(1)．弥补了HTML对网页格式化功能的不足；

(2)．设置字体变化和大小；

(3)．页面格式的动态更新；

(4)．排版定位。

（二）CSS规则：

语法格式：selector { property1:value1; property2:value2; ．．．．．．}

解释：selector也称为CSS的选择器。

property属性。

value属性的取值。

CSS中有很多selector选择器：

1．重定义HTML标记：

(1)．单个HTML标记的CSS定义：

例如：

h1 {font-size:12px;color:red;}

(2)．多个HTML标记有相同的CSS定义：

例如：

h1,h2,h3 {color:green;}

2．用户自定义类，也称为通用类：

用class定义通用类名，以点（．）开头，是用户自己定义的名称。

用id定义通用类名，以（＃）开头，是用户自己定义的名称。

区别：用id起的名字，在全页面中是唯一的，不能重复。

用class起来的名字，在全页面中可以复用。

3．虚类：

a:link 设置正常状态下链接文字的样式。

a:visited 设置访问过的链接文字的样式。

a:hover 设置鼠标放在链接上的链接文字样式。

a:active 设置鼠标单击时链接文字的样式。

4．具有上下文关系的HTML标记：

一种用空格隔开的两个或多个标记组成的字符串。

例如：

ul li ul li{color:red;}

5、选择性的找孩子。

（三）CSS与HTML的冲突：

当对同一段文本应用多个CSS样式时，由于这些样式之间可能存在着矛盾或样式与HTML之间存在着矛盾，可能在显示时无法出现预期的效果。

浏览器显示样式时，遵循以下3个规则。

规则1：样式叠加。

当多个不同的样式作用于同一元素时，若样式之间互不矛盾，则浏览器显示所有的样式。

规则2：距离优先。

当多个不同的样式作用于同一元素时，若样式之间存在矛盾，则浏览器显示距离元素较近的样式。

CSS选择符命名

关于CSS命名，和其他的程序命名差不多，主要有三种：驼峰、帕斯卡、匈牙利法。

1. 驼峰命名法：

除第一个单词首字母小写外，其余所有单词首字母都大家。

比如：#headBlock、.navMenuRedButton

1. 帕斯卡命名法：

与驼峰相似，区别就是所有单词首字母都大写。

比如：#HeadBlock、#NavMenuRedButton

1. 匈牙利命名法：

是需要在名称前面加上一个或多个小写字母作为前缀。

比如：#head_headblock、#nav_navmenuredbutton

其实CSS命名就一个原则“不能以数字和特殊字符开头”，起的名字容易理解，方便协同工作。

（四）CSS的基本写法：

1．内部样式块对象表示法

在<head>文件头部定义CSS样式，在<body>文件体部使用已经定义的样式。

定义CSS样式：

定义CSS类

</style>

若采用用户自定义类，则使用该类的标记采用class属性指定样式的名称。

2．内联定义表示法

在<body>文件体标签中使用标记的style属性指定样式。

例如：

3．<外接样式表>表示法

样式表文件：专门存放CSS样式定义信息的外部文件，扩展名为*.css。

① 在外部创建CSS样式表文件。

② 在要使用外部样式的html文件的<head></head>标记中写明：

③ 在要使用外部样式的html文件的<body></body>标记中直接使用外部样式。

4、导入样式：

@import url(要导入的样式路径)

导入样式的书写必须在所有的CSS规则书写之前。

导入的CSS样式不能被并行下载下来，不推荐使用。

注意：导入的样式需要放在其它样式的前面。

另外一种方法：也可以在CSS文件中导入CSS文件。

执行样式表顺序：内联 > 内部样式表 > 外接样式表

距离html标签就近原则

（五）CSS的单位

单位	描述	单位	描述
cm	厘米。	In	英寸，1in=2.54cm。
mm	毫米。	Pt	点，1pt=1/72 in。
em	相对长度单位。相对于当前对象内文本的字体尺寸	Pc	皮卡，1pc=12pt。
ex	相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。	Px	像素。
%	百分比

（六）CSS注释

/* 注释的内容 */

* 放多行的注释内容1

* 放多行的注释内容2

二、CSS属性：

CSS提供了以下9种属性类，共71个：

1．字体：控制网页中字符的显示方式。

2．文本：控制网页中文本的段落布局。

3．颜色：控制网页中文本的颜色。

4．背景：对网页背景作适当的设置。

5．定位：控制元素在页面上的位置及元素间的重叠。

6．列表：对页面的列表样式进行修改。

7．盒子：包括边界、填充、边框的设置。

8．鼠标形状：控制鼠标的外观。

9．滤镜：作用于文字或图像的外观特效。

三、字体属性（共5个）：

font-family:指定字体类形或字体类形列表。（* 相当于HTML中<font>标记的face属性）

如：font-family:”黑体”

font-size：指定字号。（* 相当于HTML中<font>标记的size属性）

如:font-size:18px

取值类型	值	说明
绝对大小	xx-small、x-small、small、medium、large、x-large、xx-large	medium为缺省值，字体从前向后越来越大。
相对大小	smaller、larger	分别表示比上一级元素中的字体小或大一号。
长度值	直接给出长度值	字体显示为给定长度的大小。
百分比	直接给定百分比	表示与缺省字体的百分比。

3．font-style：指定字体样式。

取值：normal（普通）、italic（斜体）、oblique（倾斜）。

如：font-style:italic

4．font-weight：指定字体粗细。

取值：normal（正常值，粗细度约为300）、bold（粗体，粗细度约为700）、

bolder（特粗体，粗细度约为900）、lighter（比正常值细）、

100~900（9个等级，数字越小越细）。

5．font-variant：字体变量。

取值：normal（正常值）、small-caps（把小写字母转换为大写字母，并显示为小型大写字母）。

四、文本属性（共8个）：

1．letter-spacing：设置字符间距。

取值: normal（正常值）、具体长度值（带单位）。[单位参照css单位]

注意：系统认为字符间距是单个英文字母之间、单个中文汉字之间的距离。

2．word-spacing：设置单词间距。

取值：normal（正常值）、具体长度值（带单位）。

注意：系统以空格分辨单词，英文单词之间的空格、中文汉字之间的空格均认可。

3．text-decoration：文本修饰属性。

取值：none（正常值）、underline（下划线）、overline（上划线）、line-through（删除线）、

blink（闪烁，该值仅Netscape浏览器支持，IE无此效果）。

4．text-align：文本水平对齐方式。

取值：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。

5．line-height:文本行高。

取值：normal（正常值）、具体长度值（带单位）。

6．text-transform:控制英文大小写。

取值：none（无文本转换）、capitalize（单词首字母大写）、

uppercase（小写转换为大写）、lowercase（大写转换为小写）。

7．text-indent:设置首行缩进。

取值：normal（正常值）、具体长度值（带单位）。Text-indent:2em 首行缩进2em

8．vertical-align:设置元素的垂直对齐方式。

取值：baseline（基线）、sub（下标）、super（上标）、top（顶部）、text-top（文本顶部）、

middle（中间）、bottom（底部）、text-bottom（文本底部）、

用法小技巧：此属性需要对图片进行设置，可以设置图片和文字的对齐方式。

此属性也可以解决图片底部留白的现象。如制作表单页面的时候，导航下面的两张带边框的图片。也可以使用font-size:0px;空白在有的浏览器中当作文字来看。

也可以设置：一个行内元素和一个行内块元素的对齐方式。

行内块元素都有：img <input type=”submit” />

对溢出文本显示省略号有两个好处，一是不用通过程序限定字数；二是有利于SEO。

需要使用对对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。通常的做法是这样的：
          1.overflow:hidden;
          2.text-overflow:ellipsis;
          3.-o-text-overflow:ellipsis;
          4.white-space:nowrap;
overflow: hidden;、text-overflow:ellipsis;和white-space: nowrap都是必须写的，否则不会显示省略号；-o-text-overflow: ellipsis针对Opera这个浏览器的；

解释：width:120px; 限定长度，text-overflow:ellipsis ：当对象内文本溢出时显示省略标记…，white-space:nowrap：强制文本在一行内显示，overflow:hidden：溢出内容为隐藏。

五、颜色属性（共1个）：

color：指定颜色。（* 相当于HTML中<font>标记的color属性）

取值：可以是颜色代码，也可以是颜色名称。

六、背景属性（共5个）：

1．background-color:设定背景颜色。（* 相当于HTML中<body>标记的bgcolor属性）

2．background-image:设定背景图片。（* 相当于HTML中<body>标记的background属性）

格式：selector {background-image:url(image_path);}

3．background-repeat:背景图片重复方式：

取值：repeat（图片平铺）、repeat-x（以x轴方向平铺）、repeat-y（以y轴方向平铺）、

no-repeat（不重复）。

4．background-position:设定背景图片位置。

取值：水平和垂直两值

垂直：top（图片垂直局顶）、bottom（图片垂直居底）、

水平：center（图片居中）、left（图片水平居左）、right（图片水平居右）、

value（具体值），格式为：selector {background-position:x y;}。

5．background-attachment:设定图片附件。（* 相当于HTML中<body>标记的bgproperties属性）

取值：scroll（页面滚动时图片滚动）、fixed（页面滚动时图片不动）。

七、定位属性（层）（共8个，重点）：

4．width:宽度。

5．height:高度。

7．overflow:溢出，当定位元素的内容超出定位元素所能容纳的范围时所采取的方案。

取值：visible（可见）、hidden（隐藏）、scroll（滚动条）、auto（自动）。

含义：① visible:无论定位元素的大小，内容都可以显示出来。

② hidden:将多出定位元素的部分内容隐藏。

③ scroll:不管内容是否超出定位元素的范围，都添加滚动条。

④ auto:只在定位元素内容超出定位元素的范围时才显示滚动条。

注意：① top、left用来确定定位元素的位置；width、height用来确定定位元素的范围。

② overflow属性对于HTML中的<img>标记不起作用，图片会随着width、height属性的变化而进行缩放。若想使图片也受该属性的影响，必须将<img>标记加放在<span></span>之间，再在<span>标记中使用class属性确定样式。

③ “定位元素”相当于Dreamweaver中的“层”。

8．clip:剪辑，限定只显示裁切出来的区域。

解释：裁出的区域为矩形，只要确定两个点的坐标即可。一个是矩形左上角的顶点，由top、left指定；另一个是矩形右下角的顶点，由bottom、right指定。

格式：selector {clip:rect(top right bottom left);}

含义：top:第一个顶点的x坐标。

left:第一个顶点的y坐标。

bottom:第二个顶点的x坐标。

right:第二个顶点的y坐标。

注意：该属性只能再position属性选为absolute（绝对定位）时才可以使用。

分析下列例子：

例如：

<html>

<head>

<!--

.dw1{position:absolute;top:20px;left:10px;}

.dw2{position:relative;top:20px;left:10px;width:200;height:100;overflow:auto;}

.dw3{position:absolute;clip:rect(20px 100px 100px 20px);}

-->

</style>

</head>

<body>

<span class="dw1" style="z-index:2">全国计算机等级考试</span><br>

全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博

文报名点；全国计算机等级考试博文报名点。

</span>

</body>

</html>

八、列表属性（共3个，重点）：

1．list-style-type:设置项目符号和编号的类型。

取值	描述	说明
disc	缺省值，实心黑点。●
circle	空心圆圈。○
square	方形黑块。□
decimal	数值：1，2，3．．．
lower-alpha	小写字母：a，b，c．．．
upper-alpha	大写字母：A，B，C．．．
lower-roman	小写罗马字母：i，ii，iii．．．
upper-roman	大写罗马字母：I，II，III．．．
none	无样式。

2．list-style-image:设置图片为列表项目的符号。

格式：selector {list-style-image:url(image_path);}

3．list-style-positon:设置列表项缩进。目录列表项标记显示在文本内还是文本外。

取值：outside（列表紧贴左侧边框，不缩进）、inside（列表缩进）。

可以缩写：list-style:

九、盒子属性（共27个，重点）：

盒子：在格式化页面对象时，CSS将所有的对象都放置在一个容器中，这个容器称为盒子，也叫区块。

盒子有四大类属性，共27个。

（一）边界（共5个）：盒子与浏览器窗口边界或前一个元素边界的距离。

1．margin-left:左边界宽度。

2．margin-top:上边界宽度。

3．margin-right:右边界宽度。

4．margin-bottom:下边界宽度。

5．margin:按照上、右、下、左的顺序同时设置四个边界的宽度。

格式：selector {margin:top right bottom left;}

注意：① 如果仅指定一个值，则四个边界采用相同的宽度。

② 如果指定了2个或3个值，则没有指定边界宽度的边将采用对边的宽度。

③ 如果指定的是负值，可以获得特殊的效果。

③ Margin： 0 auto; 可以让块级元素水平的居中。

原理： auto是设置外边距自动赋值。如果左右都是auto的时候，会把盒子所在行剩余的宽度除以2，然后分别赋值给左右的magin值，自然就会让盒子居中显示了。

③ 行内元素的margin（padding）只能在水平方向起作用。垂直方向不起作用。

外边距合并

第一种外边距合并的情况：

当两个块级元素，上面块级元素拥有下外边距，下面的块级元素拥有上外边距的时候。两个盒子上下的距离会取两个边距的最大值，而不是把两个盒子的边距进行加和处理。

第二种外边距合并的情况：

当块级元素进行嵌套的时候，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和父盒子的上外边距会进行合并。

（二）填充（共5个）：盒子边框与内容之间的距离。

1．padding-left:左填充宽度。

2．padding-top:上填充宽度。

3．padding-right:右填充宽度。

4．padding-bottom:下填充宽度。

5．padding:按照上、右、下、左的顺序同时设置四个填充的宽度。

格式：selector {padding:top right bottom left;}

注意：① 如果仅指定一个值，则四个填充采用相同的宽度。

② 如果指定了2个或3个值，则没有指定填充宽度的边将采用对边填充的宽度。

③ 不能指定为负值。

（三）边框（共15个）：盒子填充与边界之间的部分。

1．宽度属性：

border-left-width:左边框宽度。

border-top-width: 上边框宽度。

border-right-width: 右边框宽度。

border-bottom-width: 下边框宽度。

border-width: 按照上、右、下、左的顺序同时设置四个边框的宽度。

2．颜色属性：

border-left-color:左边框颜色。

border-top-color:上边框颜色。

border-right-color:右边框颜色。

border-bottom-color:下边框颜色。

border-color: 按照上、右、下、左的顺序同时设置四个边框的颜色。

3．样式属性：

border-left-style:左边框样式。

border-top-style:上边框样式。

border-right-style:右边框样式。

border-bottom-style:下边框样式。

border-style: 按照上、右、下、左的顺序同时设置四个边框的样式。

边框样式取值	描述
none	无边框。
dotted	边框由点组成。
dashed	边框由短线组成。
solid	实线边框。
double	双实线边框。
groove	沟槽。
ridge	脊状。
inset	凹陷。
outset	凸出。