Css层叠样式

Css层叠样式施海宁Css层叠样式•css简介•Css分类•Css样式的优先级•Css样式的构成•Css属性css简介•CSS指层叠样式表（CascadingStyleSheets），层叠的意思是：多重样式定义被层叠为一。•CSS是标准的布局语言，用来控制元素的尺寸、颜色、排版。Css+div•CSS非常精确，功能强大，易于编写。Css分类•定义内嵌样式:针对于某个标记•定义内部样式表:定义在head•链接外部样式表:定义在.cssCss分类•定义内嵌样式–标记名称style=样式属性：属性值;样式属性：属性值Css分类•定义内部样式表–在html文件内定义样式表styletype=text/css!--选择符1{样式属性：属性值;样式属性：属性值;}选择符2{样式属性：属性值;样式属性：属性值;}选择符n{样式属性：属性值;样式属性：属性值;}--/stylestyle:说明所要定义的样式type=text/css：指定style元素以css语法定义Css分类•链接外部样式表linktype=text/cssREL=stylesheethref=外部样式文件Css样式的优先级•从高到低–内嵌样式–内部样式表–外部样式表–浏览器缺省样式表Css样式的构成•Css选择器•属性名•属性值–例:•P{font-size:16px;color:red}Css选择器•Html选择器:只能应用在html标记•Class选择器:class•Id选择器:•关联选择器•组合选择器•伪元素选择器Css属性•字体属性•文本属性•背景属性•链接属性•边框属性•列表和光标属性字体属性•font-family:字体•font-style:字体样式–normal|italic|oblique•font-weight:字体粗体–narmal|bold|bolder|•font-size:字的大小•text-decoration:文字效果属性–underline|overline|line-through|blink|none•text-transform:–capitalize:首字母大写|uppercase:转换为大写|lowercase：转换小写|none文本属性•text-indent:首行缩进•letter-spacing:字符间距•line-height:行高•text-align:水平对齐方式–left|right|center|justify•vertical-align:垂直对齐方式–top|middle|bottom;背景属性•background-color:–color|transparent•background-image:–url(文件名)•background-repeat:–repeat-x|repeat-y|no-repeat•background-attachment:–fixed|scroll•background-position:–top|center|bottom|left|center|right链接属性•a:link{}:–正常的链接•a:visited{}:–访问过的链接•a:active{}:–激活•a:hover{}:–鼠标移上去边框属性•border:粗细线型颜色•四边不同的效果：–border-top:–border-right:–border-bottom:–border-left:•粗细：thick:粗medium:中thin:细•线型：none:无solid:实线dashed:点划线double:双线ridge:嵴状groove:槽状inset:outset•颜色列表和光标属性•列表–list-style-type:–list-style-image:•光标–cursor:hand;滤镜属性•filter:Gray;•filter:Alpha(Opacity=0,FinishOpacity=100,Style=2,StartX=10,StartY=10,FinishX=100,FinishY=100);•filter:Blur(Add=true,Direction=270,Strength=30);•filter:FlipV;