CSS总结 -基础笔记

 

 

 

简介

 

Css casading style sheets层叠样式表

Css的主要目的，是给html标记添加各种各样的表现形式，比如，文字样式、背景、文本样式、链接样式、、、

内部样式表

 

外部样式表

 

提示：css是给html标记加的样式，js是给html添加的行为。Html是最先出现的。

l Html超文本标注语言，各种html标记。

l Css层叠样式表，给html加的样式

l JavaScript脚本程序，给html加的程序。

 

 

语法格式

 

l 一个css规则，由“选择器”和“格式声明语句”构成。

l “选择器”，就是选择html标记，换句话说就是给那个html标记加样式。

l “格式声明语句”，由{}构成，{}中是各种格式语句。

l 一条格式语句由“属性名：属性值；”构成

l 每一条格式语句，必须用英文下的;结束

l 属性名：就是css中的各种属性，这些属性是固定的

l 属性值：一个属性名可以取不同的值，这个值不加引号

l Css中的数字单位，都是像素px,这个px单位不能省略。

 

CSS选择器

基本选择器

1．“*”号选择器，通配符。

l 描述：将匹配所有的html标记，所有标记都会改变的。

l 语法：*{color:red;}

l 注意:”*”尽量少用，因为IE6不支持

2．标签选择器

l 描述：将匹配指定的html标记

l 语法：h1{color:red;}

l 注意：css标签选择器，与html中标记名称一样，但是不能加尖括号。

 

3．Class选择器（类选择器）

l 描述：给一类的html标记加样式，这里指的“一类”是：每个html标记都有一个class属性，且class属性一样，class属性是公共属性，每个html标记都有。

 

l 类选择器必须以小数点“.”开头,后面跟html标记class属性的值如.box{color:red;};

l Html标记的class属性的值，不能以数字开头。

4.        Id选择器

a)        描述：给指定的id元素添加样式

b)       注意：网页中的html标记的id属性的值，必须是唯一的

c)        每一个html标记都有一个id的公共属性

d)       注意：id属性一般是给js使用的，不是用来让你加样式的，class属性只能给css使用，不能给js使用。

e)      Id选择器是以“#”开头，后面跟html标记的id属性的值。

 

 

组合选择器

1.        多元素选择器

a)        描述：给多个元素加同一个样式，多个元素之间用“,”号隔开。

b)       举例说明：

2.后代元素选择器

a)        概述：给某个标签的后代元素加样式。选择器之间用空格隔开。

b)       举例：div .title{color:red;}，

 

3.子元素选择器

 

a)        描述：给某个元素的子元素加样式

b)       举例说明

c)        只给儿子元素加样式

CSS伪类选择器

给超链接加的样式（链接的不同状态加样式）

一个超链接，有四个状态;

l  正常状态：(:link)鼠标没有放到链接之前的样式

l  放上状态:(:hover)鼠标放到 链接上时的样式

l  激活状态：(:active)按住鼠标左键不松开的样式，这个状态特殊短暂

l  访问过的状态：(:visited)按下鼠标左键，并弹起，这时的状态。

在平常工作中，会使用以下写法，来给链接加不同的样式:

a：link，a:visited{color:#444;text-decoration:none;}//j将“正常状态”和“访问过的状态”合二为一

a:hover{color:#990000;text-decoration:underline;}//鼠标放上，做单一效果。

 

 

 

CSS注释

Css注释/*css注释*/

Html注释<!--html注释-->

CSS常用属性

CSS尺寸属性

a)        Width:元素的宽度，一般要加px单位

b)       Height:元素高度

c)        注意在容器中，width和height只是指内容高度/宽度,不包括margin和padding。

CSS文字属性

a)        Font-size:文字大小，如font-size:14px;

b)       Font-family:字体，如font-family:宋体；

c)        Font-style:斜体，取值italic如：font-style:italic;

d)       Font-weight：粗体，取值bold，如font-weight:bold;

CSS文本属性

a)        Color:文本颜色；

b)       Text-decoration：文本的修饰线，取值none(无）、underline(下划线）、overline（上划线）、line-through（删除线）

c)        Text-align：文本对齐方式，取值left、center、right

(如果想让行中文字垂直居中，可以使行高与当前元素高度一致)

d)       Line-height:行高，可以用固定值，也可以使用百分比，如line-height:24px； line-height:150%；

e)        text-indent：首行缩进，如text-indent:28px;

f)         letter-spacing:字间距。

CSS列表属性

List-style:列表样式。取值：none，去掉项目符号或者前面的各种符号。

 

项目符号在ul 或者ol标签不在li标签之内，要想在一个块元素内显示项目符号可以采用外边距来进行辅助。

CSS边框属性 

每个元素都可以加边框线

l  Border-left:左边框线。

n  格式：border-left:粗细 线型 线的颜色;

n  线型：none(无线)、solid（实线）、dashed（虚线）、dotted（点状线）

n  举例：border-left：5px dashed red;

l  Border-right:右边框线

l  Border-top:上边框线

l  Border-bottom:下边框线

l  Border：同时给四个边加边框线

 

 

 

 

CSS内边距属性

边框线到内容之间的距离。

注意：平常我们说的width和height属性，他们指的是内容的宽度和高度，不包含内外边距和边框线。

l  Padding-left:左内填充距离，左边线到内容之间距离

l  Padding-right:右内填充距离，右边线到内容之间距离

l  Padding-top:上内填充距离，上边线到内容之间距离

l  Padding-bottom:下内填充距离，下边线到内容之间距离

l  缩写形式：上右下左

n  Padding：10px;//四个边的内填充分别为10px;

n  Padding:10px 20px;//上下为10px,左右为20px;

n  Padding:5px 10px 20px;//上为5px，左右10px，下20px；

n  Padding：5px 10px 15px 20 px;//上右下左

 

 

CSS外边距属性

边线往外的距离

l  Margin-left:左边线往外的距离

l  Margin-right:右边线往外的距离

l  Margin-top:上边线往外的距离

l  Margin-bottom:下边线往外的距离

l  Margin:简写形式

n  Margin：10px;全部10px

n  Margin:10px 20px;上下10左右20

n  Margin:5px 10px 20px;上5左右10 下20

n  Margin:5px 10px 15px 20px;//上右下左

 

 

CSS背景属性

l  Background-color:背景颜色

l  Background-image:背景图片地址。如background-image:url(images/1.jpg);

l  Background-repeat:背景平铺方式，取值，no-repeat（不平铺）、repeat-x（水平方向）、repeat-y（垂直方向），默认水平和垂直都平铺。

l  Background-size:cover;只能用在body中

l  Background-position:背景定位。background-position:水平方向定位、垂直方向定位

n  用英文单词定位：background-position:left|center|right   top|center|bottom;

n  用固定值定位：background-position:50px50px;//背景距离容器左边50px顶端50px；

n  用百分比的方式进行定位:background-position:50%50%;//水平居中垂直居中

n  用混合方式定位：background-position:left10px;//背景靠左边对齐，距离容器顶端10px；

l  简写方式

n  Background:背景色 背景图 平铺方式 定位方式；

n  举例background:url(images/0.jpg)no-repeat center center;

n  举例 background:#ccc url(0.jpg)no-repeat left 10px；

CSS透明度属性

 

l   filter:alpha(opacity=20); /*IE 透明度20% */

l  -moz-opacity:0.8; /* Moz + FF 透明度20%*/

l  opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/

 

案例一

 

 

 

 

案例二

 

 

 

 

 

 

CSS浮动和清除

l  Float:让元素浮动；取值left(左浮动)、right(右浮动)。

l  Clear：清除浮动，取值：

n  Clear:Left（清除左浮动）

n  Clear:right（清除右浮动）

n  Clear:both.（同时清除上面的左浮动与右浮动）

CSS浮动

l  浮动的元素，将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止。

l  浮动的元素，不再占空间了，并且，浮动元素的层级，要高于普通元。

 

 

l  浮动的元素，一定是块元素。不管他原来是什么元素。

 

l  如果浮动的元素，没有指定宽度的话，浮动后将尽可能变窄，因此，浮动元素一般要指定宽和高。

l  一行中的多个元素，要浮动都浮动。（照顾到各个浏览器的兼容性）

l  浮动的功能，可以实现将多个块元素并列排版

 

如何让包围元素，包住浮动元素？

你就要在浮动元素的下边，使用清除浮动操作。使用前后对比：

 

 

 

 

 

CSS清除浮动

l  CSS清除浮动的功能有两个：

n  可以包围元素，从视觉上包住浮动元素

n  清除之下的其他元素将恢复默认排版

l  有浮动就得有清除。浮动和清除浮动是一对操作。

l  如果包围元素指定了高度了，那么可以不使用清除功能。（前提是浮动下面没有普通元素了。指定高度完全只是为了实现清除浮动后的包围形式）

 

案例：我们开学了

 

 

 

 

CSS继承性

Css属性继承：外层元素的样式，会被内层元素进行继承，多个外层元素的样式，最终都会“层叠”到内层元素上。

 

什么样的CSS属性能被继承呢？

CSS文本属性都会被继承：

Color、font-size、font-family、font-style、font-weight、text-align、textdecoration、text-indent、letter-spacing、line-height。

提示：body中定义的css属性，会被所有子元素继承。

CSS优先级

 

1.        单个选择器的优先级

行内样式>Id选择器>class选择器>标签选择器

 

同名CSS属性的值，会被优先级高的选择器替换。

 

2.        多个选择器的优先级

多个选择器的优先级，一般情况下指向越明确，优先级越高。

特殊情况下，我们需要假设一些值

 

值越大，优先级越高。

 

一个简单布局

 

 

特殊属性

Display属性

l  功能：规则网页元素如何显示的问题。

l  取值：none(隐藏)、block（以块元素显示）、inline（以行内元素显示）。

l  block：可以实现将行内元素转成块元素。

l  Inline：可以实现将块元素转成行元素。

 

Overflow属性

Overflow属性，当内容溢出时，该如何显示。取值：visible(可见)、hidden（隐藏）、scroll（滚动条）、auto(自动)；

Cursor光标类型

Cursor网页中的光标类型，取值;help（帮助）、wait（等待）、hand（小手，不兼容）、pointer（小手）、text（文本）等。

 

 

CSS表格属性

Border-collapse:表格边框线合并，取值：collapse。与html中rules=”all”属性一样，但是兼容性更强。

border-collapse:collapse;/*collaps:塌陷；作用：制作细线表格*/

 

CSS定位

l  Position:元素定位方式，取值static、fixed、relative、absolute。

l  Static:静态定位（默认状态，不定位）:

l  Fixed（固定定位）:

l  Relative（相对定位）:

l  Absolute（绝对定位）:

定位方式，要与定位坐标属性配合使用。

定为坐标：指定定位的元素，偏移目标元素多远的距离。

l  Left：定位元素，距离目标元素左边的距离left:0px;

l  Top：定位元素，距离目标元素上边的距离top:0px;

l  Right：定位元素，距离目标元素右边的距离

l  Bottom：定位元素，距离目标元素下边的距离

固定定位，position:fixed

l  固定定位是相对于浏览器窗口来进行的定位。

l  固定定位，不占空间，层级要高于普通元素。他不会随着网页的滚动而滚动。

l  固定定位，如果不指定定位坐标的话，固定定位元素的位置在原地不动。不占空间。

l  固定定位元素，一定是”块元素”,不管原来他是什么元素

相对定位，position:relative

l  相对定位，是相对于“原来的自己”进行定位。

l  相对定位，依然占空间。

l  如果不指定定位坐标的话，相对定位元素的位置在原地不动。

l  相对定位，原来是行内元素，定位后还是行内元素，原来是块元素，定位后还是块元素

 

 

提示：相对定位和决定定位一般情况下配合使用。

绝对定位，position:absolute

l  相对于祖先定位元素（相对定位，绝对定位），进行的定位

n  如果绝对定位元素的父元素，没有进行任何定位的话，就再往上找抵不过为元素

n  如果一直找到<body>都没有找到定位元素的话，那就相对<body>来进行定位。

l  绝对定位元素，不占空间，层级高于普通元素。

l  如果不指定坐标的话，绝对定位的位置在原来的位置不动。

l  绝对定位元素，是一个块元素，不管原来是什么元素。

 

限时抢购案例

 

 

注意，本案例中的li元素的relative定位与img(抢)图片的absolute定位的结合使用。

HTML引入CSS的方法

嵌入式

通过<style>标记，来引入CSS样式

语法格式：<style type=”text/css”><style>

提示：<style>中的CSS样式只能给当前网页使用，同一个网页中可以写多个<style>标记

外联式

通过<link>标记引入一个外部的CSS文件(.css)，可以实现公共css代码多个网页的共享

<link rel=”stylesheet”type=”text/css href=”css.public.css””/>

<link>标记的常用属性

l  rel:引入的文件的类型，取值stylesheet（样式表）

l  Type:内容类型

l  Href:文件的路径。

提示：<link>标记放在<head>标记中。

同一个网页可以引入多个<link>来链入多个外部样式文件。

行内式（主要用语js控制元素的样式）

l  每一个html标记，都有一些公共的属性:class、id、title、style。

l  Html标记中的style属性的值，与css中样式一模一样。

l  提示：行内样式中，css代码不能写的过多。

l  行内样式中，多个css属性不能换行，也就是一行写完。

l  行内样式优先级是最高的，比id选择器都要高。

 

 

盒子模型

我们可以把每一个html标记，都看成是一个“盒子”。

这个“盒子”有哪些特征：内容的高度或高度、边框线、内填充、外边距

盒子的总宽度=内容宽度+边框宽度*2+左填充*2+外边距*2；

 

上下外边距合并问题

上下两个块元素，如果每一个元素都指定了四个外边距，那么上下相邻的外边距会发生合并，取值较大的外边距。

如何实现上下两个<div>之间的距离为100px,该如何实现？

1将其中一值设置为100px;

2上下两个div之间加一个空的div。并给空的div指定高度100px;

 

综合示例

排版前的准备工作

l  网页的背景色、背景图

l  网站主页的宽度、1000px

l  将所有素材复制到当前目录下

l  创建一个css文件，并将该css文件引入到html文件中

 

小技巧

同一个class后面可以有多个类名样式，多个类名之间空格隔开。

 

 

浏览器兼容性简介

一个网页在不同的浏览器下，显示的效果可能不一致，这就是所谓的不兼容。

兼容性调试，主要调试IE8、IE7、IE6、Firefox。

浏览器市场份额：http://tongji.baidu.com/data/browser

IE浏览器的调试工具：IETESTer

兼容性从以下三个方面讲解：

l  全局CSS设置

l  常用兼容性技巧

l  CSS HACK

 

全局CSS设置

1.        清除所有的标记内外边距

Body,ul,li,img,a,p,input{margin:0px;padding:0px;}

2.        去除项目符号或编号前面的编号。

ul,ol,li{list-style:none;}

3.        全局链接效果

a:link,a:visited{color:#444;text-decoraion:none;}

a:visited{color:red;}

4.        网页中所有文字大小颜色

Body{font-size；12px;font:family:宋体;color:#444;}

5.        去除图片的链接边框线，主要针对IE浏览器。

Img{border:none;}

6.        全局的类样式

.floatL{float:left;}

.floatR{float:right;}

.clear{clear:both;}

.blank10{height:10px;clear:both;}

.red{color:red;}

.blue{color:blue;}

常用的兼容性技巧

1.        实现所有浏览器主页居中

Firefox下主页居中代码：.box{margin:0px auto;}

IE5.5下主页居中代码: .body{text-align:center;}

将以上两种代码，合在一起书写：

.body{

Text-align:center;/*IE5.5下*/

}

.box{

Text-align:left;/*IE居中*/

 

}

2.        单行文本上下居中

.h1{

Height:30px;

Line-height:30px;

}

3.        在IE6下，左右margin会加倍，应该是IE6一个bug。

解决的方案：使用display:inline;主要是块元素会有换行符，改成行元素后就没有这种问题。

提示：排版时，能使用padding解决的，坚决不用margin。如果实在想用的话，就是用其中一边。

CSS HACK

针对不同的浏览器，书写不同的CSS代码的过程，称为“CSS HACk”

也就是说：写一个CSS代码，让IE6识别，其他浏览器不识别。

下面，针对不同的浏览器，有几个符号：

这些符号是在CSS属性的前面加的，用于分辨不同的浏览器版本。

l  “*”IE6和IE7都识别，如.box{*background-color:red;}针对这两个版本（及以下版本）

l  “_”只有IE6(及以下版本)识别，如：.box{_background-color:green;}

CSSHACK编写顺序：Firefox---IE7---IE6

使用CSSHACK来处理IE6下margin加倍的问题

 

注意：CSSHACK不是W3C的标准，因此，我们尽量少用，如果调试兼容性，调试不好时，可以偶尔使用一下，不建议大篇幅使用。、

图片和表格是没有行高的，只有单行文本才有行高

CSS3新增属性

CSS3边框

 

l  border-radius：圆角边框；

n  border-radius:2em;等价于：

u  border-top-left-radius:2em;

u  border-top-right-radius:2em;

u  border-bottom-right-radius:2em;

u  border-bottom-left-radius:2em;

n  border-radius: 2em 1em 4em / 0.5em 3em;等价于：

u  border-top-left-radius: 2em 0.5em;

u  border-top-right-radius: 1em 3em;

u  border-bottom-right-radius: 4em 0.5em;

u  border-bottom-left-radius: 1em 3em;

 

 

l  box-shadow：用于向方框添加阴影：

n  h-shadow 必需。水平阴影的位置。允许负值。

n  v-shadow 必需。垂直阴影的位置。允许负值。

n  blur 可选。模糊距离。

n  spread     可选。阴影的尺寸。

n  color       可选。阴影的颜色。

n  inset 可选。将外部阴影 (outset) 改为内部阴影。

举例

 

l  border-image：使用图片来创建边框；

n  border-image-source：用在边框的图片的路径。     

n  border-image-slice  图片边框向内偏移。   

n  border-image-width 图片边框的宽度。      

n  border-image-outset：边框图像区域超出边框的量。      

n  border-image-repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

 

Background

 

l  background-clip     规定背景的绘制区域。      

n  border-box      背景被裁剪到边框盒。

n  padding-box   背景被裁剪到内边距框。

n  content-box    背景被裁剪到内容框

l  background-origin  规定背景图片的定位区域。

n  border-box      背景被裁剪到边框盒。

n  padding-box   背景被裁剪到内边距框。

n  content-box    背景被裁剪到内容框

l  background-size:规定背景图片的尺寸。

文本效果

 

l  text-shadow：文字阴影。

n  h-shadow 必需。水平阴影的位置。允许负值。

n  v-shadow 必需。垂直阴影的位置。允许负值。      

n  blur 可选。模糊的距离。    测试

n  color       可选。阴影的颜色

l  word-wrap：  允许对长的不可分割的单词进行分割并换行到下一行。

n  normal    只在允许的断字点换行（浏览器保持默认处理）。

n  break-word     在长单词或 URL 地址内部进行换行。

字体

 

@font-face 规则

l  在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

l  通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

l  当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

l  您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

 

属性：

l  font-family     name       必需。规定字体的名称。

l  src   URL       必需。定义字体文件的 URL。

l  font-stretch     可选。定义如何拉伸字体。默认是 "normal"。

n  normal

n  condensed

n  ultra-condensed

n  extra-condensed

n  semi-condensed

n  expanded

n  semi-expanded

n  extra-expanded

n  ultra-expanded

l  font-style 可选。定义字体的样式。默认是 "normal"。

n  ormal

n  italic

n  oblique

l  font-weight     可选。定义字体的粗细。默认是 "normal"。

n  normal

n  bold

n  100、200、300、、、900

l  unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

 

Css3 2D\3D转换

 

transform: none|transform-functions;

transform-functions:

u  none 定义不进行转换。      

u  matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。     

u  matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)      定义 3D 转换，使用 16 个值的 4x4 矩阵。

u  translate(x,y)  定义 2D 转换。  

u  translate3d(x,y,z)    定义 3D 转换。  

u  translateX(x)   定义转换，只是用 X 轴的值。

u  translateY(y)   定义转换，只是用 Y 轴的值。

u  translateZ(z)   定义 3D 转换，只是用 Z 轴的值。

u  scale(x,y) 定义 2D 缩放转换。  

u  scale3d(x,y,z)  定义 3D 缩放转换。  

u  scaleX(x) 通过设置 X 轴的值来定义缩放转换。    

u  scaleY(y) 通过设置 Y 轴的值来定义缩放转换。    

u  scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。   

u  rotate(angle)   定义 2D 旋转，在参数中规定角度。      Angle单位deg。例如120deg;

u  rotate3d(x,y,z,angle)      定义 3D 旋转。  

u  rotateX(angle) 定义沿着 X 轴的 3D 旋转。    测试

u  rotateY(angle) 定义沿着 Y 轴的 3D 旋转。    测试

u  rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。    测试

u  skew(x-angle,y-angle)    定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试

u  skewX(angle)  定义沿着 X 轴的 2D 倾斜转换。    测试

u  skewY(angle)  定义沿着 Y 轴的 2D 倾斜转换。    测试

u  perspective(n) 为 3D 转换元素定义透视视图。      测试

过渡

 

l  transition 简写属性，用于在一个属性中设置四个过渡属性。      

l  transition-property  规定应用过渡的 CSS 属性的名称。

l  transition-duration  定义过渡效果花费的时间。默认是 0。   

l  transition-timing-function     规定过渡效果的时间曲线。默认是 "ease"。   

l  transition-delay      规定过渡效果何时开始。默认是 0。

举例：

 

CSS3 动画

 

l  动画是使元素从一种样式逐渐变化为另一种样式的效果。

l  您可以改变任意多的样式任意多的次数。

l  请用百分比来规定变化发生的时间，或用关键词"from" 和"to"，等同于 0% 和 100%。

l  0% 是动画的开始，100% 是动画的完成。

l  为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

属性：

@keyframes   规定动画。   

l  animation 所有动画属性的简写属性，除了 animation-play-state 属性。     

n  animationname       必需。定义动画的名称。

n  keyframes-selector 

u  必需。动画时长的百分比。

u  合法的值：

u  0-100%

u  from（与 0% 相同）

u  to（与 100% 相同）

n  css-styles 必需。一个或多个合法的 CSS 样式属性。

l  animation-name     规定 @keyframes 动画的名称。      

l  animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。      

l  animation-timing-function     规定动画的速度曲线。默认是 "ease"。   

l  animation-delay     规定动画何时开始。默认是 0。      

l  animation-iteration-count      规定动画被播放的次数。默认是 1。      

l  animation-direction 规定动画是否在下一周期逆向地播放。默认是"normal"。  

l  animation-play-state      规定动画是否正在运行或暂停。默认是"running"。    

l  animation-fill-mode       规定对象动画时间之外的状态。

举例：

 

CSS3 多列

 

column-count  规定元素应该被分隔的列数。   

 

column-fill     规定如何填充列。      

column-gap    规定列之间的间隔。

  

column-rule    设置所有 column-rule-* 属性的简写属性。

 

CSS3 用户界面（暂时不学）

 

新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

属性：

 

总结：利用定位加rgba实现背景透明，文字不透明。

 

 

综合实例：当当购物

 

 

HTML主要代码：Shoping.html