CSS的一些笔记

一.理解web标准含义--为什么采用web标准
*****将内容与样式，分离
1.web标准是一系列标准，就是一系列技术标准
在使用时，是组合应用
【1】.结构化内容xhtml
【2】.表现化内容css
【3】.行为化内容javascript

 

2.网页开发的小工具---火狐浏览器中的firebug
工具--附加组件--搜索firebug

作为web前段工作：
要兼容的浏览器，IE6789、火狐浏览器，谷歌浏览器，苹果浏览器等
浏览器排行

网页是否有css样式，测试--在浏览器中改变文字大小

3.css定义的技巧：
【1】为了将来的css代码优化，建议，所有的属性后面，都要带上分号

样式表中文手册
【2】某些xhtml标签，有自己默认的css属性值
例如h1标签就有自己的属性值，自动加粗显示，字号比较大

【3】为了兼容主流的浏览器，为统一，建议我们在设置时，将多有元素的css属性重置为标准的。
【4】不同的浏览器，有各自不同的css属性值--要命的，就是浏览器的兼容
【5】就一个比较特殊的字体想用，怎么办？--将其转为图片
分中英文字体。设置字体的顺序。将英文字体设置在前，中文在后。
【6】css编辑工具--用什么都行，高手，用树叶杀人

【7】我们使用95%的css，都是最常用的属性

【8】想让文字在垂直方向上，居中，将行高设置为，元素的高度，行高=元素高度

***文字的内容不能超过，元素的宽度，也就是不能换行

【9】css可以重新设置，xhtml标签的默认样式。

4，css应用给网页的方式，就相当于，给人怎么去穿衣服。

【1】行内样式，应用于一个。
【2】嵌入样式，应用有一类标签。
【3】如果我们有很多的网页，都要用css，将这些css写到一个独立文件中，这个就是外链式，推荐使用

【4】导入式样式，也是将样式写到一个文件中，再导入到网页中
*******说明，导入式，其实与内嵌是相类似的，都是将样式加入到网页里。
1.导入式，会占用html文件空间
2.有些浏览器，解析会有问题，浏览器会最后读取@import中的内容。

一个网站是由多个网页组成
css:作用就是修饰网页样式的---xhtml控制网页结构--给他的穿上衣服就是css

css应用于网页的四种方式：
1 行内样式：直接作用于，标签内，只针对某一个标签，还不灵活
2 内嵌样式：直接写在xhtml文档内，可以针对某些标签
3 外部连接式：可以单独写在一个css文件中，然后去应用给，要使用样式的xhtml文件
4 导入方式：可能有解析问题，不建议使用

我们想针对网页中的，某一个元素，或者某一些元素，设置样式---可能通过不同的css选择符

 

二.css选择符
1 什么是选择符？就是你要控制的对象
2 ID选择符---针对某一个id #id
3 针对某一类，或者某一些元素，他们的样式是相同的
4 类选择符---针对某一类，或者某一些元素，他们的样式是相同的
******类名或ID名，不要以数字开头

三.css的特性
css叫层叠式样式
1 继承：子元素会继承父元素的某些样式。【因为有些元素本身就有默认值，所以它不用父元素】
2 层叠：子元素如果定义了与父元素相同的样式，会覆盖掉父元素的样式。
：后面的样式，会覆盖前面的样式

四.css样式的优先权：当样式有冲突时，听谁？

css优先权，就近原则
作用范围越小，优先级越高
选择符优先权：
行内>id>class

特殊情况，我们可以提升某个属性的权限

****IETest工具，也有一个兼容性问题，在win7下，打不卡IE6
----下载绿色版IE6，不用安装直接用哪种版本

五.常用的一些文字，文本控制的css样式
******我们在应用css样式时，一定要注意它的默认值，因为不同的浏览器他的默认值是不同的

不同的属性，浏览器支持是不一样的，我们还要保证我们网页的兼容性
尽量使用通用属性，不用存在兼容差异的属性

六.css控制元素的某种状态--伪类

伪类语法：
元素名称：伪类名称{属性：值}

例如：超链接的，鼠标经过状态

a:hover{text-decoration:underline} hover:伪类名

*******如果，鼠标放上效果补齐作用，请修改链接状态的顺序 L-V-H-A

 

 

 

 

一.在实际工作中，都一个团队在做项目，不是一个人在工作
多人协作，就是每个人都有自己的命名习惯
1.css选择符命名，规范
2.都有命名规范文档

二.css选择符
css选择符作用？指定css样式所作用对象（范围）

1.标签选择符：针对html标签
2.id选择符：针对页面中只出现一次的内容，id
3.类选择符：针对某些元素，相同的样式，重复样式

******默认情况下某些html标签有默认值

4.控制所有元素----使用通配符---*

通配选择符：*{属性：值}，用于定于所有html元素
*************的作用范围很广，但是，它的效率最低。慎用

5.选择符的嵌套使用---包含选择符
前端开发的，极限--就是代码非常的精简

6.多个选择符会有一些相同的样式，这个时候，我们就可以，把这些选择符，组成一个组
选择符1，选择符2，....{属性：值}

 

*****CSS选择符就是，表示你将把你定义的样式，用给谁

 

 

 

 

 

 

**********重要
三.css盒子模型
***** 一个盒子是由以下几部分构成的
1.盒子中的内容content
2.盒子的边框border
3.盒子的边框与内容之间的距离，称为填充---padding，内边距（内补丁）
4.多个盒子存在，盒子与盒子之间的距离，称为边界margin，外边距（外补丁）

******就是盒子所在的实际宽度为例=左右边界+左右边框+左右内填充+内容宽度

*****css盒子的相关属性

【1】内容属性：内容本身的宽=width，内容本身的高=height
【2】内填充属性：内容与边界之间的距离 padding
****在定义盒子的宽度时，要考虑到，内填充，边框，边界的存在
如果，增加了内填充了，整个盒子的宽度值，要再减去，你增加的，内填充值

小盒子的上面：20 30 50 100；

margin-top；
margin-right；
margin-bottom；
margin-left；

*****将来在使用外边距，要注意浏览器兼容性。
*****除了值为0的情况下，所有的非0的值后面都要加单位
******由于各个浏览器存在着，内外边距的默认值，还不同。
我们需要将所有浏览器的默认内外边距，都从0开始计算。

在实际工作中，不要用这个，*{margin：0；padding：0；}，但是效率最低。
所以我们是用到了哪些元素，就把哪些元素的默认值，归零。

css的属性，虽然有继承的特点，但是，并不是所有属性都有继承

css布局主要是通过盒子模型来实现----w3c将网页内容，放置在一些盒子中，对这些盒子的一些属性进行控制。
内容：width height
内填充：padding
边框：border
外边界：margin

http：//hi.baidu.com/闪梦设计/home

关于列表的属性介绍：-------存在兼容性问题

list-style:列表的图片

语法：
list-style:list-style-image||list-style-position||list-style-type

列表的样式：列表的图片 列表符号位置 列表的样式

list-style:none 不要列表的符号

边框的属性说明：

css语法：
border:border-width||border-style||border-color

根据语法，推理出它的使用方法
如果只写border，则后面要跟着的是，三个不同的子属性，第一个，粗细，第二个 样式，第三个 颜色
边框样式：粗细为两个像素 实线 颜色
border:2px solid blue

 

*********css小技巧：
【1】让盒子，水平居中。将对象的左右外边距，设为auto
【2】让盒子中的内容，垂直居中，设置行高=盒子的高度，但是不要有换行
【3】我们在调试的时候，可以适当加背景颜色。

**********html元素的分类：块与内联

 

 

css控制背景

 

背景图片，默认情况下是进行水平与垂直方向上的平铺
默认背景图片，在元素的左上角显示
背景图片的依附方式，固定的含义是，将图片固定在，屏幕（可视区域）的某个位置。
兼容性 IE6只有html与body两个元素，支持这个属性。

让你显的专业一点的技巧：
翻转效果：其实思路就是，准备两张大小相同，内容不同的图片，正常情况下显示一张，在鼠标经过时再显示一张。

他叫伪类，表示一中状态，
：link

css精灵机巧:主要是为了，减少http请求

浏览器-----服务器（交流）---超市购物---结账时候。

 

 

27讲
一.浮动布局
二.css布局的方式
1.默认的，就是按文档流的顺序，按html的结构顺序
2.浮动布局方式，float: div不占一行
3.定位布局，position:absolute 绝对定位

三.浮动是将，块元素的，霸道属性，独占一行的行为，取消，允许别人其他一行。
浮动其实是，这个块，从原来的文档流模式中，分离出来，它后的对象，就视它不存在。

常用的布局效果，例如，一行并列式，就是在一行中，显示几个块元素

css把网页语速，分为两类，一种是块，一种是内联元素

ul与li默认情况下是块元素。要想让他们在一行中显示，就要用浮动。

我们在制作时，你多使用不同的浏览器查看你的结果，这样，你就能知道，各种浏览器的差别。

*****总结出，当IE6父元素，中的子元素，的高度超过了，父元素的高度，IE6默认，会把父元素的高度自动撑高。

*******如果想让，多个块，显示在同一行中，可以将，这些块，都设置为浮动，并且浮动方向相同。

*******浮动浮动，先浮后动，浮动的对象，会先漂浮起，离开原来的位置。后动，就是它后面的对象，会向它原来的位置上，动起来。
四.清除浮动：就是可以去掉前面对象浮动，对后面对象的影响 clear：lift属性

 

 

为什么，原来在一行中的两个块，会因为，浏览器窗口大小的改变而改变其原来的位置

 

*****************设置一个块水平居中时，一般设置宽度值

 

当父元素，没有指定，高度时，并且，它的子元素有浮动，这时，这个父元素的高度不会自动增加

1.第一种方法：增加一个空标签，就是没有内容的标签，会增加代码div clear:both
2.第二种方法：给父元素，加overflow：hidden

********定位布局：就是可以通过元素的position属性控制元素的位置

********当我们要想使用绝对定位时：必须要有两个条件
【1】、必须给父元素加定位属性，一般建议使用position:relative
【2】、给子元素，加绝对定位position:absolute;同时要加方向属性

 

 

******相对定位与绝对定位

绝对定位是父元素为基准点，进行定位--------会脱离文档流 float
相对定位是根据其自身为基准点，进行定位-----离开原位置，但还占着原来的空间

 

***有些html元素，有默认边距

 

 

在HTML中使用CSS的方法
1.行内样式
<p style="color:red">段落样式</p>

2.内嵌样式
<head>
<style type="text/css">
p{
color:red;
font-size:12px;
}
</style>
</head>

3.链接样式
<head>
<link rel="stylesheet" type="text/css"href="1.css"/>
</head>

 

4.导入样式
<head>
<style type="text/css">
@import"1.css"
</style>
</head>
导入样式表必须在样式表的开始部分，其他内部样式表上面

 

优先级问题
行内样式>内嵌样式>链接样式>导入样式

 

 

 

 

-------------------------------------------------------------

CSS基础语法
根据CSS选择符用途可以把选择器分为标签选择器，类选择器，全局选择器，ID选择器和伪类选择器等。

全局选择器就是对所有的HTML元素起作用
*{property:value;}

伪类作用在标记的状态上
伪类包括：first-child,:link,:vistited,:hover,:active,:focus,:lang等
超链接的伪类：：link,:vistited,:hover,:active
<html>
<head>
<title>伪类</title>
<style type="text/css">
a:link{color:red;} /*未访问的链接*/
a:visited{color:green;} /*已访问的链接*/
a:hover{color:blue;} /*鼠标移动到连接上*/
a:active{color:orange;} /*选定的链接*/
</style>
</head>
<body>
<a href="">链接到本页</a>
<a href="http://www.sohu.com">搜狐</a>
</body>
</html>

 

 

 

---------------------------------------
CSS字体与段落属性
字体
{font-family:name,name...}
当前一种字体不能正常显示时，用后一种字体，若字体由多个字符串和空格组成，要加双引号。

 

字号
{font-size:数值}

字体风格
{font-style；normal|italic|oblique|inherit}

 

 

加粗字体
{font-weight:100~900}

 

 

字体复合属性
{font:font-style font-variant font-weight font-size font-family}

 

 

字体颜色color

 

----------------------------------------------
CSS段落样式
p{word-spacing:15px|normal}用于设定词与词之间的间隔，不能设定文字之间的间隔

字符间隔
p{letter-spacing:15px|-15px|normal}

 

文字修饰
{text-decoration:none|wuderline|overline|line-through|blink}

垂直对齐方式
{vertial-align:属性值} 属性值有8个预设值可用，也可以用百分比

----------------------------------------------------------
文本转换
{text-transform:none|capitalize|uppercase|lowercase}
capitalize:将每个单词的第一个字母转换成大写

水平对齐方式
{text-align:属性值}用于定义文本的对齐方式

文本缩进
{text-indent:length} 设定文本块中首行的缩进，百分比或其他10mm

文本行高
{line-height:normal|length} 设置行间距px,mm,%

处理空白
{white-space:normal|pre|nowrap|pre-wrap|pre-line} 用于设置对象内空格字符的处理方式
pre:空白会被浏览器保留

文本反排
{unicode-bidi:normal|bidi-override|embed}
{direction:ltr|rtl|inherit}

--------------------------------------------------------

 

用CSS美化图片

<img src="" border= width= height= style="border-style:" />

也可以用CSS来定义图片的width,height,max-width,max-height,从而达到图片的缩放效果

对齐图片
图片本身没有对齐属性，需要使用CSS继承父标记的text-align来 定义对齐方式

垂直对齐方式
<p>对齐方式<img src="" style="vertical-align:baseline|bottom|middle|sub|super"/></p>

图文混排
float:none|left|right
img{
float:left;
}
是文字围绕到图片的周围

设置图片与文字间距
如果需要设置图片与文字之间的距离，即文字之间有一定的间距，不是紧紧的环绕，可以使用CSS中的padding属性来设置（内边距）
&nbsp;

 

----------------------------------------------------------------
用CSS设置背景和边框
{background-color:transparent|color} 设定网页背景色

背景图片
{background-image:none|url(url)}
background-repeat属性用于设定背景图片是否重复平铺
background-attachment属性用来设定背景图片是否随文档一起滚动，该属性包括两个属性值scroll和fixed
background-position属性用于指定背景图片在页面中所处的位置

背景图片大小
background-size:<length>|<percentage>|cover|contain
background-size:900 800;第一个宽度，第二个高度

背景复合属性 属性顺序可以自由调换

------------------------------------------------
设置边框

在网页设计中，HTML元素在在页面中会占有一定的区域
边框样式
{border-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset}

边框颜色
border-color:color

边框线宽
border-width:medium|thin|thick|length

边框复合属性
border:border-width||border-style||border-color

 

 

 

 

--------------------------------------------------
用CSS美化超级链接和鼠标
对于超级连接的修饰，通常可以采用CSS伪类
a:link 定义a对象在未被访问前的样式
a:hover 定义a对象在其鼠标悬停时的样式
a:active 定义a对象被用户激活时的样式（在鼠标单击与释放之间发生的事件）
a:visited 定义a对象在其链接地址已被访问时样式

<a href="" title=""></a> title提示信息

超级链接背景图设置
a{background-image:url(url);}

超级链接的按钮效果
a:hover，当鼠标经过链接时，会将链接向下，向右各移一个像素

鼠标特效
使用CSS控制鼠标箭头
CSS通过改变cursor属性来实现对鼠标样式的控制，包含17个属性值

 

------------------------------------------------------
用CSS美化表格和表单样式
{border-collapse:separate|collapse} 前一个为默认属性，表示边框会分开，后一个表示边框会合并成单一的边框

表格边框宽度
{border-width:}

表格边框颜色
通常使用CSS属性color设置表格中的文本颜色
使用background-color设置表格背景色，还可以设置某一个单元格颜色

-----------------------------------------------

CSS与表单

美化表单中的元素
input{background-color:}

美化提交按钮
对表单元素边框定义，可以采用border-style,border-width,border-color,也可以用gbackground-color属性，将值设为transparent(透明)

美化下拉菜单
--------------------------------------------

用CSS制作实用菜单
导航菜单是网站中必不可少的元素之一，通过导航菜单可以在页面上自由跳转

项目列表
ul ol dl
在CSS中，可以通过属性list-style-type来定义无序列表前面的项目符号
{list-style-type:dics|circle|square|none} 实心圆，空心圆，实心方块

美化有序列表
{list-style-type:decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 阿拉伯数字 小写罗马数字 大写罗马数字 小写英文字母 大写英文字母

美化自定义列表

图片列表
对于有序或无序列表，不但可以通过list-style-type改变选项前面的特殊符号，还可以使用list-style-image属性将每项前面的项目符号替换为任意的图片
{list-style-image:none|url(url);}

列表缩进
在CSS中，可以通过list-style-position来设置图片显示位置
{list-style-position:outside|inside}

复合属性list-style

 

无需表格的菜单

菜单的横竖转换
横向菜单
li{float:left;}
a{display:biock;}

----------------------------------------
CSS滤镜的应用
应用于IE9浏览器
CSS的滤镜属性的标示符是filter，语法格式如下：
filter:filtername(parameters)

filtername是滤镜名称，para指定了滤镜中的参数

CSS基本滤镜
通道（Alpha）滤镜
图片文字元素的透明效果
filter:Alpha()

Blur滤镜
实现页面模糊效果filter:Blur()

Chroma滤镜
可以设置HTML对象中指定的颜色为透明色
filter:Chroma

DropShadow滤镜
阴影效果在实际文字和图片中非常实用
filter:DropShadow()

FlipH滤镜
实现HTML对象翻转效果，水平翻转
filter:FlipH(enable=bEnabled)

Glow滤镜
使对象边缘产生一种柔和的边框或光晕，并可产生如火焰一样的效果
filter:Glow()

Gray滤镜
使用Gray滤镜能轻松地将彩色图片变为黑白图片
{filter:Gray();}

Invert滤镜
使图片产生一种“底片”或负片的效果
{filter:Invert();}

FlipV滤镜
实现对象的垂直翻转
{filter:FlipV();}

Mask滤镜
为网页中的元素对象做出一个矩形遮罩
{filter:Mask();}

Shadow滤镜
给对象添加阴影
{filter:Shadow()}

Wave滤镜
可以为对象 添加竖直方向上的波浪效果
{filter:Wave();}

X-ray滤镜
使整体看起来有一种X光片的效果
{filter:Xray();}

CSS的高级滤镜
高级滤镜是指需要配合javascript的 脚本语言，产生变换效果的滤镜

BlendTrans滤镜
可以实现HTML对象的渐隐渐现的效果
{filter：BlendTrans()}

Light滤镜
产生类似于光照灯的效果
{filter:Light()}

RevealTrans滤镜
实现图像之间的切换效果
{filter:RrvealTrans()}

 

-------------------------------------------------
CSS定位与DIV布局
在网页设计中，能否很好的定位网页中的每个元素，是网页整体布局的关键

定位方式

定位属性
position属性
在CSS中，可以通过position属性，对页面中的元素进行定位
position:static|relative|absolute|fixed
分别是默认值，相对定位，绝对定位，固定定位

<html>
<head>
<title>定位属性</title>
</head>
<body>
<div>
<h2 style="position:absolute;left:80px;top:80px;">
这是绝对定位</h2>
</div>
</body>
</html>

相对定位
position:relative
绝对定位的坐标原点是为上级元素的原点，与上级元素有关；相对定位的坐标原点为本身偏移量的原点，与上级元素无关

固定定位fixed
position：fixed
固定定位与绝对定位相似，但参照位置不是上级元素块而是浏览器窗口，可以把一些效果固定在浏览器的视线位置

-----------------------------------
层叠顺序（深度）
z-index用来设置元素层叠的顺序，其方法是为每个元素指定一个数字，数字较大的元素将叠加在数字较小的元素之上
z-index:auto|number

该属性只能作用于position和relative的对象

边偏移属性
left right top buttom

 

--------------------------------------
浮动定位
浮动定位只能在水平方向上定位，不能再垂直方向上定位
float:none|left|right

清除浮动
clear：none|left|right|both

溢出定位
元素内容较多，元素框显示不下，此时可以使用溢出属性overflow来控制这种情况
overflow:visible|auto|hidden|scroll

隐藏定位
指定是否显示一个元素生成的元素矿
visibility:inherit|visible|collapse|hidden
visible:元素可见
hidden:元素隐藏
collapse:主要隐藏表格的行或列
元素仍占据本来空间

块和行内元素

display:block|inline|~