Css样式语法由三部分构成:selector(选择器)、property(属性)和value(属性值) Css的3种将样式表加入到html方法:
1,将样式表嵌入到html文件的文件头中的嵌入样式表:
方法:
加入的css样式表
-- >
说明: 标签对用于说明所要定义的样式,type属性用于指定
tpye=”text/css”语句用于说明该段上css规则代码
有些浏览器不支持style元素,为了防止这种情况发生,可以将style元素中的内
容用html的注释符括起来。这样一来不支持styler的浏览器将不执行
这段内容。
2,将一个外部样式表链接到到html文件上的外部样式表
方法:
说明:href属性用于指定样式表的URL,也可以是绝对的URL
3,将一个外部样式表输入到html文件中的输入样式表(这种可以提高工作效率,节省服务器带宽)
@import url (外部链接样式表文件名.css);
说明:@import后面的分号必须有,并且必须输入外部样式表达文件的扩展名”.css”Css选择器:
1.HTML selector这种选择器指的是html标签,如p、b、div等
2.class selector 包括关联class selector和独立class selector.
用“html标签名.类名”定义的选择器称为关联class selector .
用“.类名”定义的的选择器称为独立class selector.
3.ID selector:使用html标签的ID属性定义的选择器就是ID selector.
如果在样式表中指定一个ID selector,需要在ID值前添加一个符号(#)
4.伪元素选择器.其格式为:html元素:伪元素{属性:值}.
常用的伪元素:A,active:是选中超链接时的状态;A,hover:是光标移动到超链接上的状态; A,visited:是访问过的超链接状态;
颜色设置:命名颜色、RGB颜色、十六进制颜色。
1. 命名颜色:直接用英文单词命名(但浏览器颜色命名没有统一标准)。
2RGB颜色:红、绿、蓝是3种基本色。其它色由这三种颜色按不同的比例叠加而成的。通常两种设置方法:百分比或数值。
3十六进制颜色:原理同RGB原理相同,设置红绿蓝3种基本色,只不过表达方式不同。
这种方法是将3种基本色的取值范围转换为00~FF,用两位十六进制数字表示,且必须按照格式#RRGGBB表示,即每种颜色值占两位,不足则补零。
URL:url用于指定引入外部文件的地址,有两种形式:绝对URL和相对URL.
文体的样式
字体:font-style:设置字体的风格。Normal(正常)、italic(斜体)、oblique(倾斜) Font-variant:设置字体的变形。Normal(正常)、small-caps(小型的大写字母字体)
Font-weight:字体加粗:100-900/normal/bold/bolder/lighter
Font-family:字体类型:黑体、宋体、隶书。默认为宋体。
文字的大小:xx-small x-small small medium(默认) large x-large xx-large
文字阴影颜色设置:text-shadow
下划线、顶画线、顶画线和删除线
{text-decoration:inherit(继承)、none(无文本修饰,默认设置)underline(为文体添加下画线)、overline(添加顶画线)、line-through(添加删除线)、blink(使文本闪烁)
使用下列语句可以使超链接不再有下划线:
A:link,A:visited,A:active{text-decoration:none}
对齐方式:{text-align:left/right/center/justify(两端对齐)}
注意:text-align是块级属性,只能用于
..
~
等标识符。不仅可以控制文体的水平对齐方式,也包括图片、影像资料的对齐方式。
垂直对齐:{vertical-align:inherit/top/bottom/text-top(相对文本顶对齐)/text-bottom(相对文本底对齐)/baseline(基准线对齐)、middle/sub(以下标的形式对齐)/super(以上标的形式显示)
行间距:{line-height:数值/inherit/normal}
字间距:{letter-spacing:数字/inherit/normal}
Css表格和表单效果
border-collapse:用于设置是否把表格边框合并为单一的边框,是可继承属性。参数值为separate和collapse。参数值为separate时,表格各部分的边框将分开显示。collapse 为默认参数值,表格边框会被合并为一个单一的边框。
border-spacing:用于设置分隔单元格边框的距离,指定分隔边框模型中单元格边框之间的距离。
caption-side:用于设置表格标题的位置。参数有top.bottom.left.right.
empty-cell:用于设置是否显示表格中的空单元格。参数为hide和show。如果显示,则绘制出单元格的边框和背景。除非border-collapse设置为separate,否则将忽略这个属性。
table-layout:用于设置显示单元、行和列的算法。参数值是automatic和fixed.分别表示表格为自动表格布局和固定表格布局,其中,automatic为默认参数值。
表格还可以分为三个部分:题头、正文和脚注。
thead:用于放置标题。tbody:用于放置表格数据本体。tfoot:用于放置表格的脚注。表格的边框样式:参数:none(无边框)、hidden(与“none”相同,不过应用于表时除外,对于表,hidden用于解决边框冲突)、dotted(定义点状边框。在大多数浏览器中呈现为实线)、solid(定义实线)、double:(定义双线。双线的宽度等于border-width的值)、proove(定义3D凹槽边框,效果取决于border-color的值)、ridge:定义3D垄状边框。效果取决于border-color的值)、inset:(定义3D inset边框,效果取决于border-color的值)、outset:(定义3D outset边框,效果取决于border-color的值)
css中所有元素的边框属性及其描述
border:用于把四个边的属性设置在一个声明中。
border-style:用于设置元素所有的边框的样式,或者单独地为各边设置边框样式
border-width:用于为所有边框设置宽度,或者单独地为各边设置边框样式
border-color:设置元素的所有边框中可见部分的颜色,或为4个边分别设置颜色
border-bottom:用于把下边框的所有属性设置到一个声明中
border-bottom-color:元素下边框的颜色,border-bottom-style:样式、border-bottom-width:宽度
border-left:把左边框所有的属性设置到一个声明中
border-left-color. border-left-style. border-left-width
border-right/border-right-color\border-right-style\border-right-width
border-top/border-top-color/border-top-style/border-top-width
css中表格文本属性及描述
color:设置文本颜色。direction:文本方向line-height:行高letter-spacing:字符间距text-align:对齐元素中的文本text-decoration:向文本添加修饰text-indent:缩进元素中文本的首行text-shadow:设置文本阴影。css2包含该属性,但是css2.1没有保留该属性text-transform:控制元素中的字母unicode-bidi:设置文本方向white-space:设置元素中空白的处理方式word-spacing:设置字间距
表格的文本字体的属性及描述
font:简写属性。作用是把所有的针对字体的属性设置在一个声明中
font-family:设置字体系列
font-size:设置字体的尺寸
font-style:字体风格
font-variant:以小型小写字体或者正常字体显示文本
font-weight:字体的粗细
表格背景变色
background-color:设置或检索对象的背景颜色
background-image:设置或检索对象的背景图片
background-repeat:设置或检索对象的背景图像是否铺排及如何铺排。参数值分别为:repeat:背景图像为纵向和横向平铺。
no-repeat:背景图像不平铺。
repeat-x:背景图像为横向平铺
repeat-y:背景图像为纵向平铺
background-attachment:设置或检索背景图像是随对象内容滚动还是固定的。参数值:scroll:背景图像随着对象内容滚动。
fixed:背景图像固定
background-position:设置或检索对象的背景图像位置,单位为百分数或像素值,也可用相对位置表示。参数值分别:top\bottom\left\right\center分别表示哪对齐
表单属性:margin:是检索或设置对象四边的外延边距,该参数为复合参数。参数值:auto:是被置为相对边的值。length:是由浮点数字和单位标识符组成的长度值或百分数。百分数是基于父对象的高度。
padding:是检索或设置对象四边的补丁边距,该参数为复合参数。参数值length是由浮点数字和单位标识符组成的长度值或百分数。百分数是基于你对象的高度。有四个分属性:top\bottom\left\right定义上下左右的外延或内补丁的边距
边界:margin属性:该属性是设置元素4边的距离,默认值为00,属性取值可以是auto(取计算机值)和length(是由浮点数字和单位标识符组成的长度值或百分数)。
margin-bottom/margin-left\margin-right\margin-top\用于分别设置元素哪边的距离。
边框包括三部分内容:宽度,样式和颜色。宽度默认属性:medium,样式为none,默认颜色为元素的前景色
border:包括medium none,border-color
border-bottom:medium none ,border-color
border-bottom-color
border-bottom-style:默认值none时,表示无边框,hidden,表示隐藏边框,dotted,表示点线
或实线边框,dashed,表示虚线或实线边框,solid,表示实线边框,double,表示双线边框,groove,表示根据border-color的值画3D凹槽;ridge,表示根据border-color的值画菱形边框;inset,表示根据border-color的值画3D凹边;outset,表示根据border-color的值画3D 凸边。
border-bottom-width:用于设置元素下边框的宽度。medium,默认宽度,thin,表示小于默认宽度;thick,表示大于默认;length,表示由浮点数字和单位标识符级组成的长度值,不能是负数。
border-color:设置边框颜色。boder-left,可取medium none和border-color.
border-left-color border-left-style border-left-width border-right botder-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-style border-top-width border-width
补白:padding ,即内容与框架之间的距离,也就是边内补白;由于本身的透明性,这种补白是看不到的。
padding:用于设置对象四边内元素与框架之间的距离。length,由浮点数字和单位标识符组成,可以是长度值,也可以是百分数。当元素内容为th和td时,其默认值为1,当为其他元素时,默认值为0。
padding包括padding-bottom\padding-left\padding-right\padding-top
float:表示元素是否浮动。none:表示不浮动,为默认值;left:表示左浮动;right:右浮动clear:用于指出元素不允许有浮动对象的边,控制跟随在一个浮动元素后的元素的位置。none:允许两边都可以有浮动对象,默认;left:不允许左边有浮动;right:不允许右边;both:两边都不允许。
清除浮动元素的方法:
使用额外标签法:即在内容的末尾增加一个空标签。如
标签或者是
浮动外部元素(float-in-float),即把“#outer”元素也进行浮动。这种方法会使和“#outer”元素相邻的下一个元素受到“#outer”的影响,而位置会有所变化。所以,应该选择把页面中的的所有元素都进行浮动,然后使用一个适应的有意义的元素进行清理浮动。
分块格式编排
块元素及其含义:address:地址块元素;blockquoto:块引用元素;center:居中对齐块元素;dir:目录列表块元素;div:常用块级元素,也是css layout的主要标签;form:交互表单块元素;h1~h6:标题块元素;hr:水平分隔线块元素;menu:菜单列表块元素;ol,排序表单;p:段落块元素;pre:格式化文本块元素;table:表格块元素;ul:非排序列表块元素。
内联元素:a:锚点内联元素;abbr:缩写内联元素;big:大字体内联元素; br:换行内联元素;cite:引用内联元素;em:强调内联元素;i:斜体内联元素;img:图片内联元素;input:输入框内联元素;kbd:定义键盘文本内联元素;label:表格标签内联元素;select:项目选框内联元素;small:小字体文本内联元素;span:常用内联容器,定义文本内区块;strong:粗体强调内联元素;textarea:多行文本输入框内联元素;u:下画线内联元素。
可变元素:applet:java aplet ; button:按钮可变元素;del:删除文本可变元素;ins:插入文本可变元素;map:图片区块可变元素;object:Object对象;script:客户端脚本
说明:ins和del有两个可选属性分别是cite和datetime.cite的值是一个URL,用于定义一个连接到另一个文档的URL, 解释为什么删除或是插入该段文字。datetime是一个格式为YYYYMMDD,即年-月-日的日期,用于定义文字被删除或插入的日期。这两个元素可以是块级元素,也可以是内联元素,但不能同时作为这两个元素。ins和del可以包含段落中的一个或几个文字,也可以包含几个块级元素。
用css设置图片样式
设置边框基本属性的语法:
border属性用于指定图像的边框宽度、颜色,其值为大于或等于0的整数,以px为单位。语法中的边框样式包括:none/dotted点线/dashed虚线/solid实线/double双线/groove槽线/ridge脊线/inset内凹/outset外凸
图片大小的设置
img{width:值;height:值;}
图片自动等比例缩小:
img{max-width:最大宽度值;width:图片大小值;width:expression(width>值?”值”:this.width)}
作用是:如果图片的尺寸超过设置的图片的大小值,那么就按所设置的图片的大小值显示,高度同比例变化。如果图片的尺寸小于最大宽度值,那么就按图片原尺寸显示。
图片阴影的设置:需要用到css的相对定位属性:position:relative
.p{
posotion:relative;
background:值;
margin:0 auto:
width:值;
}
.t{
background:值;
border:值;
padding:0;
position:relative;
top:px;
left:px;
}
以上语法是对背景的颜色、宽度的设置,以及对边距值的设置。设置边距属性中的top属性和left属性为负值,使其显示阴影效果。
图片透明的设置:透明属性:alpha变更图片透明度。
语法如下:filter:alpha(opcaity=值)
语法的作用是设置图片的透明度,opacit值代表透明等级,选值可以0到100.0代表完全透明,100代表完全不透明。
上面的将整幅图片透明,此外还可以为图片的透明区域设置形状,以达到渐变透明的效果。其语法格式如下:
filter:alpha(opacity=值,style=值,startX=数值。startY=数值,finishX=数值,finishY=数值)
style参数用于指定透明区域的形状特征。其中,0代表统一形状;1代表线形;2代表放射状;3代表长方形。startX和srartY代表渐变透明效果的开始坐标;finishX和finishY代表渐变透明效果的结束坐标。
图片对齐方式的设置
通常图片和文字放在一起的时候,图片往往会偏上显示,通过设置margin-bottom属性可以达到文字与图片底边对齐的效果。其语法如下:
如果是两幅以上的图片时,要实现所有的对齐方式,只需设置图片的align属性。其语法为:td{vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|inherit}
文字环绕的效果:img{float:left|right|top;width:数值;height:数值}
width:设置图片的宽度height:高度float:位置
浮动广告的制作:只需将position属性设置为fixed即可。采用相对于html元素的绝对定位。语法:body{margin:0;border:0;height:值;overflow-y;auto;} #广告{display:block;top:值;left:值;width:值;position:fixed;} *html#广告{position:absolute:}
说明:overflow属性用于设置图片移动方向。overflow-y沿Y轴移动,overflow-x沿X轴。top属性设置图片与页面顶端距离的大小;left属性用于设置图片与页面左端距离的大小。css设置网页中的背景
设置背景色的属性是background-color:transparent|color。transparent表示默认属性值(红);color表示输入任意色彩值。语法:body{bgcolor:值}
背景图属性background-image:none|url. url进行导入语法:background-image:url(图片)
背景图片位置:background-position:position(length)设置其显示位置。两种方式:一种方式是使用position(top center bottom left center right)定位背景图片的位置;另一种方式是使用length(数值)定位。使用数值定位时需要注意的是,当只有一个数值时,这个值将作用于横坐标,而纵坐标将默认是50%;如果有两个数值时,则分别作用于横坐标和纵坐标。其语法格式如下:
设置图片的位置属性:center 水平居中|cernter center 水平居中且自垂直居中|top left|top center|top right|center left|center right|bottom left|bottom center|bottom right|XY|
添加多个背景图片:用background-repeat属性可以使背景图片重复显示。其语法格式如下:background-repeat:repeat-x|repeat-y|no-repeat
repeat-x:表示图片在x轴方向重复显示。repeat-y在y轴显示no-repeat:图片不平铺,并且图片显示一次
隐藏下划线的方法:
1.为显示自定义的下画线,必须先隐藏默认的下画线。
a{text-decoration:none}
2.为链接元素设置下画线图形,构造自定义的下画线。、
a{background-image:url(图标路径);}
3.让下划线图标在水平方向反复出现。
a{backgroun-repeat:repeat-x}
4.保证图标出现的位置为超链接文本的下方,可以通过设置css样式表中的背景属性的分
属性background-position实现。
a{background-position:100% 100%;}
5. 通过设置css样式表的white-space属性,实现超链接文本不换行显示。
a{white-space:nowrap;}
设置鼠标特效:
选择符{cursor:[
说明:[ 参数:auto:正常鼠标样式crosshair:十字鼠标default:默认鼠标pointer:点状鼠标move:移动鼠标e-resize,ne-resize,nw-resize,n-resize,se-risize,sw-resize;s-resize,w-risize:改变大小鼠标text:文字鼠标wait:等待鼠标help:求助鼠标progress:过程鼠标 设置滚动条:css样式表中有关于滚动条的专用属性,通过对scrollbar属性的各部分不同颜色的设置,可以实现滚动条的多样化表现形式。scrollbar的分属性如下所示: scrollbar-3d-light-color:用于设置或检索滚动条亮边框的颜色。 scrollbar_highlight-color:用于设置或检索滚动条3D界面的亮边(threedhighlight)颜色。scrollbar-face-color:用于设置或检索滚动条3d表面(threedface)的颜色。 scrollbar-arrow-color:用于设置或检索滚动条方向箭头的颜色。当滚动条出现,但不可用时,此属性失效。 scrollbar-shadow-color:用于设置或检索滚动条3d界面的暗边(threedshadow)颜色。scrollbar-dark-shadow-color:用于设置或检索滚动条暗边框(threeddarkshadow)颜色。scrollbar-basep-color:用于设置或检索滚动条基准颜色。其它的界面颜色将据此自动调整。 css滤镜:filter:filtername(parameters); 说明:filter是滤镜属性标识符。只要进行滤镜操作,就必须先定义filter属性。filtername 是滤镜名称,parameters表示各个滤镜属性的参数,即由这些属性参数决定滤镜产生的效果。常见滤镜及含义:Alpha:设置透明Blur:设置模糊效果Chroma:设置指定颜色透明Shadow:设置阴影效果Glow:为对象的外边界增加光效Wave:设置对象的波纹效果X-ray:设置对象只显示轮廓Gray:设置灰度Invert:设置底片效果Mask:为对象设置遮罩FlipH:表示水平翻转flipV:表示垂直翻转 Alpha属性用于为网页文档中的元素设置透明度,也就是把一个目标元素和背景混合,其混合程度可以由用户指定数值控制。通过指定坐标,可以指定点、线、面的透明度。语法格式如下: filter:Alpha(enabled=bEnabled,style=iStyle,opacity=iOpacity,finishOpacity=iFinishOpacity, startX=iPercent,startY=iPercent,finishX=iPercent,finishY=iPercent) enabled:可选项,用于设置滤镜是否被激活。其值是布尔型。默认值为true,表示滤镜被激活;false,表示滤镜被禁止。 style:可选项,用于设置透明渐变的样式。其值为整数型。默认值为0,表示整体透明;1表示线性渐变透明;2表示圆形放射渐变透明;3表示矩形放射渐变透明。 opacity:可选项,用于设置透明渐变的开始透明度。其值是整数型,取值范围为0-100.默认为0,表示完全透明;100表示完全不透明。 finishOpacity:可选项,用于设置渐变的结束透明度。其值是整数型,取值范围为0-100,默认值为0,表示完全透明;100表示完全不透明。 startX:可选项,用于设置透明渐变开始点的水平坐标。其值为整数型,作为对象宽度的百分比进行处理,默认值为0。 finishX:可选项,用于设置透明渐变结束点的水平坐标。其值为整数型,作为对象宽度的百分比进行处理,默认值为0. finishY:可选项,用于设置透明渐变结束点的垂直坐标。其值为整数型,作为对象宽度的百分比进行处理,默认值为0. 模糊(blur):语法:filter:Blur(add=add,direction,strength=strength) 说明:add:用于指定对象是否被设置为模糊效果。其值为布尔型。true表示设置为模糊效果;flase表示不设置为模糊效果。 direction:用于设置对象的模糊方向,模糊效果是按顺时针方向进行的。其中,0度代表垂直向上,每45度为一个单位,默认值是向左的270度。其中各个角度对应的方向有:0度表 示垂直向上:45度表示垂直向右,90度表示向右,135度表示向下偏右,180度表示垂直向下,225度表示向下偏左,270度表示向左,315度表示向上偏左。 strength:用于表示模糊宽度。其值为整数,以px为单位,默认为5px.. 透明色(chroma):filter:Chroma(enabled=bEnabled,color=sColor) 说明:enabled:用于设置滤镜是否被激活。其值是布尔型。默认值为true,表示被激活,flase,表示被禁止。 color:其值为字符串型,格式为#AARRGGBB,其中AA,RR,GG,BB为十六进制正整数。取值范围为00-FF。其中,RR为红色,BB为蓝色,GG为绿色,AA为透明度,00表示完全透明,FF表示完全不透明。默认值为#FF0000FF. chroma滤镜对于设置某些格式的图片不是很适合,因为有些图片经过了减色和压缩处理(比如JPG,GIF等格式,所以要设置某种颜色透明很困难,几乎没什么显著效果。 阴影(shadow)格式: filter:shadow(enabled=bEnabled,color=sColor,offx=iOffsetx,offY=iOffsetY,positive=bpositiv e) 说明:offy:可选项,用于设置阴影在纵标轴上以对象为基准的偏移量。以px这单位。当值为正数时,表示向下偏移,当值为负数时,表示向上偏移。默认为5. positive:用于设置滤镜是否从对象的非透明像素建立阴影。其值为布尔型。默认值为true,表示滤镜从对象的非透明像素建立阴影,flase不建立。 光晕(glow):语法:filter:Glow(enabled=bEnabled,color=sColor,strength=iDistance) strength:用于设置以对象为基准的向外扩散的距离。其值为整数型,取值范围为1-255,默认为5. 使用glow滤镜可以为图片添加边框,但直接应用到图片是无效的,需要把图片添加到表格中,然后对表格添加该滤镜效果,才可以为图片增加一个渐变颜色的边框。 波浪(wave)语法:filter:wave(enabled=bENabled,add=bAddImage,freq=iWaveCount,lightStrength=iPecentage ,phase=iPercentage,strength=iDistance) 说明:add:且于设置滤镜作用的图像是否覆盖原始图像。其值为布尔型。true表示滤镜作用的图像覆盖原始图像默认值为flase,表示只显示滤镜作用的图像。 freq:用于设置滤镜建立的波浪数目。其值为整数型,默认值为3. lightStrength:用于设置或检测滤镜建立的波浪浪尖和波谷之间的距离。其值为整数型,取值范围为0-100,默认值为100. phase:用于设置正弦波开始处的相对偏移。其值为整数型,取值范围为0-100,默认值为0. strength:用于设置以对象为基准的,在运转方向上的向外扩散的距离。其值为整数型,取值范围为>=1,以px为单位。 X射线(x-ray)格式:filter:Xray(enabled=bEnabled) 灰度(gray)格式:filter:gray(enabled=benabled) 反色(invert)格式:filter:invert=(enabled=benabled) 遮罩(mask)格式:filter:MskFilter(enabled=bEnabled,color=sColor) 翻转(FlipH&FlipV)FlipH滤镜表示水平翻转,FlipV表示垂直翻转。格式:filter:flipH(enabled=benabled) filter:flipV(enabled=benabled) CSS样式复习 一、判断对错 二、填空 1.CSS(Cascading Style Sheets)是层叠样式表的缩写”层叠”就是将显示样式独立于显示的内容,进行分类 管理. 2.Css样式上下文选择符定义嵌套标记的样式。 3.层叠样式表的英文缩写是CSS(t) 4.选择器是指要引用样式的对象,它可以是一个或多个HTML标记(各个标记之间以逗号分开),也可以是类选 择符、ID选择符或属性选择符等。 5.css样式定义中可以加入注解,格式为:/*字符串*/ 6.CSS样式表定义的基本语法为:选择器{样式属性名称:属性值;样式属性名称:属性值;} 7.外部样式表文件将样式表定义为一个独立的CSS样式文件,使用该样式表的HTML文件在头部用标记 链接到这个CSS样式文件,优先级低。 8.内嵌样式表利用CSS复习题