CSS--Cascading Style Sheet 用于设置网页格式及显示效果,包括可以产生滤镜,图像淡化,渐变效果等.
1. 设置CSS的几种方式:
1.1 内联样式表 inline Style
<meta http-equiv="Content-Style-Type" content="text/css">
在HTML标签中使用style 设置CSS
1.2 嵌入式样式表 Embedded style sheet
<head>
<style type="text/css" media"screen,projection">
<!--
P {FONT-SIZE:20pt; COLOR:blue;FONT-FAMILY:宋体;}
-->
</head>
1.3 外部样式表 Linked style sheet
编写 css文件 eg: main.css
网页中引用 <head><linke rel="StyleSheet" type="text/css" href="main.css"></head>
1.4 输入样式表 imported style sheet
eg: <Style type="text/css" media="screen,projection">
<!--
@import url(http://www.youmu.org/style.css);
@import url(/css/style.css);
p {background:blue;color:black}
-->
</style>
2. 样式规则选择器:
2.1 HTML selector
为HTML 标签 定义样式 eg: P {color:blue}
2.2 class selector
2.2.1 关联
eg: P.stop {color:red}
P.warning {color:yellow}
2.2.2 独立
eg: .stop {color:red}
2.3 ID selector: eg: #IDName {color:yellow}
只能为单个HTML标签元素设置,应在CSS中少用,javascript 中可以根据这个ID来操纵和定位特定的HTML标签
2.4 关联selector
eg: P EM {background:yellow} 表明 P标签中的EM元素 其背景设为黄色
注: 关联选择器优先级比单一选择器的要高
2.5 组合selector
如果多个标签样式定义是一样的,可以组合在一起定义eg:
H1,H2,H3,H4,H5,H6,TD {color:red;}
2.6 伪元素selector: HTML元素:伪元素 {属性:值}
2.6.1 常用伪元素:
A:active 选中超链接时 A:hover 移动到超链接上时,
A:link A:visited
P:first-line P:first-letter
3. 样式属性的分类
字体 背景 文本 位置 布局 边缘 列表 其它
3.1 字体:
font-family,
font-size: xx-small --- xx-large 相对大小 :smaller, larger
绝对单位:px,mm,cm,in,pt,pc 相对单位:em, ex, %
font-style,
text-decoration:
font-weight, font-variant, text-transform,
Color 三种表示法: #RRGGBB, rgb(R,G,B), red
font: eg: P {font:italic bold 12pt Times, serif}
3.2 背景:
background-color: transparent
background-image: eg: {background-image:url('http://www.youmu.org/logo.gif')}
background-repeat: 取值 no-repeat, repeat, repeat-x, repeat-y
background-attachment: fixed , scroll
background-position: left , center, right, 20px, top, center, bottom
Background eg:TABLE {background: #00cc00 url(logo.gif) no-repeat bottom right}
3.3 文本:
word-spacing
letter-spacing
vertical-align: sub , super , top, middle, bottom, 相对元素行高属性的百分比
text-align: left, right, center, justify
text-indent
white-space: normal, pre, nowrap
line-height:
4. Filter(CSS滤镜)
4.1 Alpha参数
Alpha(Opacity=?, FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)
FinishOpacity 可选,用于设置渐变效果
4.2 BleadTrans(Duration=?) -设置淡入淡出效果
4.3 Blur(Add=?,Direction=?Strength=?) 建立模糊效果
4.4 Chroma(Color=?) 将此颜色设为透明
4.5 DropShadow(Color=?,OffX=?,OffY=?, Positive=?) 设定阴影
4.6 FlipH水平翻转, FlipV垂直翻转, Gray灰度, Invert翻转颜色, Light设置光源效果, Xray 显示轮廓
4.7 Glow(Color=?, Strength=?)设置边缘发光效果 Strength 1-255
4.8 Mask(Color=?) 设置mask效果,
4.9 RevealTrans(Duration=?Transition=?) 初始转换的效果 Transition 0-23
4.10 Shadow(Color=?, Direction=?) 阴影效果
4.11 Wave(Add=?,Freq=?, LightStrength=?,Phase=?,Strength=?) add 0 扭曲
5. CSS的位置属性 CSS-P
5.1 Position 设定定位方式及取值:absolute,relative, static
5.2 Left, Top,width,height
5.3 z-index:可正可负, 负时显示在没有设z-index的下面
6. 边缘
6.1 margin ( margin-top, margin-right, margin-bottom,margin-left)
6.2 padding (padding-top, padding-right, padding-bottom, padding-left)
6.3 border-width (border-top-width, border-right-width, border-bottom-width,border-left-width)
设置值可以是:thin, medium,thick或数值
6.4 border-color (border-top-color , border-right-color , border-bottom-color ,border-left-color )
6.4 border-style (border-top-style , border-right-style , border-bottom-style ,border-left-style )
设置值可是: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
6.5 border (border-top, border-right, border-bottom, border-left)
eg: A:active {border:thick double red}
7. 列表
7.1 list-style-type
可取值: disc 实心圆 circle空心圆 square方块 decimal阿拉伯数字 lower-roman小写罗马数字
upper-roman大写罗马数字 lower-alpha小写英文字母 upper-alpha none无项目符号
7.2 list-style-image
7.3 list-style-position: inside, outside
7.4 list-style
8. 其它
8.1 Cursor
可取值: hand, crosshair十字形, text I字形, wait, default, help, e-resize东箭头, ne-resize,
n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, auto
8.2 filter 滤镜 --需单独讲解
8.3 样式表中的注释 /* */
8.4 样式规则的继承 内层继承外层的,某些不会继承的
8.5 样式规则的优先级: 上下,下面优先, 内外,内优先;
id selecor > class selector > html selector : 优先级从高到低
内联 > 嵌入 > 联接
1. 设置CSS的几种方式:
1.1 内联样式表 inline Style
<meta http-equiv="Content-Style-Type" content="text/css">
在HTML标签中使用style 设置CSS
1.2 嵌入式样式表 Embedded style sheet
<head>
<style type="text/css" media"screen,projection">
<!--
P {FONT-SIZE:20pt; COLOR:blue;FONT-FAMILY:宋体;}
-->
</head>
1.3 外部样式表 Linked style sheet
编写 css文件 eg: main.css
网页中引用 <head><linke rel="StyleSheet" type="text/css" href="main.css"></head>
1.4 输入样式表 imported style sheet
eg: <Style type="text/css" media="screen,projection">
<!--
@import url(http://www.youmu.org/style.css);
@import url(/css/style.css);
p {background:blue;color:black}
-->
</style>
2. 样式规则选择器:
2.1 HTML selector
为HTML 标签 定义样式 eg: P {color:blue}
2.2 class selector
2.2.1 关联
eg: P.stop {color:red}
P.warning {color:yellow}
2.2.2 独立
eg: .stop {color:red}
2.3 ID selector: eg: #IDName {color:yellow}
只能为单个HTML标签元素设置,应在CSS中少用,javascript 中可以根据这个ID来操纵和定位特定的HTML标签
2.4 关联selector
eg: P EM {background:yellow} 表明 P标签中的EM元素 其背景设为黄色
注: 关联选择器优先级比单一选择器的要高
2.5 组合selector
如果多个标签样式定义是一样的,可以组合在一起定义eg:
H1,H2,H3,H4,H5,H6,TD {color:red;}
2.6 伪元素selector: HTML元素:伪元素 {属性:值}
2.6.1 常用伪元素:
A:active 选中超链接时 A:hover 移动到超链接上时,
A:link A:visited
P:first-line P:first-letter
3. 样式属性的分类
字体 背景 文本 位置 布局 边缘 列表 其它
3.1 字体:
font-family,
font-size: xx-small --- xx-large 相对大小 :smaller, larger
绝对单位:px,mm,cm,in,pt,pc 相对单位:em, ex, %
font-style,
text-decoration:
font-weight, font-variant, text-transform,
Color 三种表示法: #RRGGBB, rgb(R,G,B), red
font: eg: P {font:italic bold 12pt Times, serif}
3.2 背景:
background-color: transparent
background-image: eg: {background-image:url('http://www.youmu.org/logo.gif')}
background-repeat: 取值 no-repeat, repeat, repeat-x, repeat-y
background-attachment: fixed , scroll
background-position: left , center, right, 20px, top, center, bottom
Background eg:TABLE {background: #00cc00 url(logo.gif) no-repeat bottom right}
3.3 文本:
word-spacing
letter-spacing
vertical-align: sub , super , top, middle, bottom, 相对元素行高属性的百分比
text-align: left, right, center, justify
text-indent
white-space: normal, pre, nowrap
line-height:
4. Filter(CSS滤镜)
4.1 Alpha参数
Alpha(Opacity=?, FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)
FinishOpacity 可选,用于设置渐变效果
4.2 BleadTrans(Duration=?) -设置淡入淡出效果
4.3 Blur(Add=?,Direction=?Strength=?) 建立模糊效果
4.4 Chroma(Color=?) 将此颜色设为透明
4.5 DropShadow(Color=?,OffX=?,OffY=?, Positive=?) 设定阴影
4.6 FlipH水平翻转, FlipV垂直翻转, Gray灰度, Invert翻转颜色, Light设置光源效果, Xray 显示轮廓
4.7 Glow(Color=?, Strength=?)设置边缘发光效果 Strength 1-255
4.8 Mask(Color=?) 设置mask效果,
4.9 RevealTrans(Duration=?Transition=?) 初始转换的效果 Transition 0-23
4.10 Shadow(Color=?, Direction=?) 阴影效果
4.11 Wave(Add=?,Freq=?, LightStrength=?,Phase=?,Strength=?) add 0 扭曲
5. CSS的位置属性 CSS-P
5.1 Position 设定定位方式及取值:absolute,relative, static
5.2 Left, Top,width,height
5.3 z-index:可正可负, 负时显示在没有设z-index的下面
6. 边缘
6.1 margin ( margin-top, margin-right, margin-bottom,margin-left)
6.2 padding (padding-top, padding-right, padding-bottom, padding-left)
6.3 border-width (border-top-width, border-right-width, border-bottom-width,border-left-width)
设置值可以是:thin, medium,thick或数值
6.4 border-color (border-top-color , border-right-color , border-bottom-color ,border-left-color )
6.4 border-style (border-top-style , border-right-style , border-bottom-style ,border-left-style )
设置值可是: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
6.5 border (border-top, border-right, border-bottom, border-left)
eg: A:active {border:thick double red}
7. 列表
7.1 list-style-type
可取值: disc 实心圆 circle空心圆 square方块 decimal阿拉伯数字 lower-roman小写罗马数字
upper-roman大写罗马数字 lower-alpha小写英文字母 upper-alpha none无项目符号
7.2 list-style-image
7.3 list-style-position: inside, outside
7.4 list-style
8. 其它
8.1 Cursor
可取值: hand, crosshair十字形, text I字形, wait, default, help, e-resize东箭头, ne-resize,
n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, auto
8.2 filter 滤镜 --需单独讲解
8.3 样式表中的注释 /* */
8.4 样式规则的继承 内层继承外层的,某些不会继承的
8.5 样式规则的优先级: 上下,下面优先, 内外,内优先;
id selecor > class selector > html selector : 优先级从高到低
内联 > 嵌入 > 联接
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
