首页 > 代码库 > 学习CSS的一些笔记
学习CSS的一些笔记
在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="http://www.mamicode.com/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属性来设置（内边距）
----------------------------------------
用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|~