CSS样式表基础知识.ppt

前端设计课程培训,云创科技专注IT教育,现代网页设计网页CSS样式安装google浏览器,网页编程/CSS,CSS结构,*内联格式：*外链文件,网页编程/CSS,CSS结构,*书写格式：内部标签：fooid:#fooclass:.foo,网页编程/CSS,CSS结构,*预设：*margin:0;padding:0;所有标签内外边界全置0*body预设*块面预设display:block*行内预设margin:0;padding:0;border:0;z-index:inherit;*图像预设img,aimgborder:0;margin:0;padding:0;,网页编程/CSS,CSS结构,*预设：*表格预设tableempty-cells:show;border-collapse:collapse;显示空表格、合并表格线*表单预设ullilist-style:none;*标题预设h1,h2,h3,h4,h5,h6font-size:1.6em;*文本预设em,ifont-style:normal;,网页编程/CSS,CSS结构,*a预设：*a预设abackground:transparent;width:100%*a:active,a:hoveroutline:0点击、划过*a.linktext-decoration:none;color:#CCC未访问*a:visited,a:hover,a:activetext-decoration:none;已访问、划过、点击文本样式,网页编程/CSS,CSS属性,*display规定元素应该生成的框的类型none、block、inline、inline-block、table、inherit,网页编程/CSS,CSS属性,*Positioning元素的定位类型static、relative、absolute、fixed配合z-index使用,网页编程/CSS,CSS属性,*background背景属性background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment,网页编程/CSS,CSS属性,*width规定元素宽度20px、100%*height规定元素高度20px、100%,网页编程/CSS,CSS属性,*文本属性text-indent：首行缩进text-align：文本对齐word-spacing：字间距letter-spacing：单词间距text-transform：大小写转换text-decoration：加线属性white-space：处理空白符direction：文本方向,网页编程/CSS,CSS属性,*字体属性font-family：字体选择font-style：字体倾斜font-variant：设定小型大写字母font-weight：加粗font-size：字体大小font：字体集合,网页编程/CSS,CSS属性,*列表属性list-style-type:列表前标类型list-style-image:列表前标图像list-style-position：列表标志位置list-style:url(example.gif)squareinside,网页编程/CSS,CSS属性,*表格属性border:1pxsolidblue;边框border-collapse:边框折叠width、height：宽高list-style:url(example.gif)squareinsidetext-align:水平对齐vertical-align:垂直对齐padding:15px;内边距border-collapse、border-spacing、caption-side、empty-cells、table-layout,网页编程/CSS,CSS属性,*表格属性border:1pxsolidblue;边框border-collapse:边框折叠width、height：宽高list-style:url(example.gif)squareinsidetext-align:水平对齐vertical-align:垂直对齐border-collapse、border-spacing、caption-side、empty-cells、table-layout,网页编程/CSS,CSS属性,*框属性,网页编程/CSS,CSS属性,*内边距属性padding：上、右、下、左padding-top：上边距padding-right：右边距padding-bottom：下边距padding-left：左边距,网页编程/CSS,CSS属性,*边框属性border,网页编程/CSS,CSS属性,*外边距属性margin：上、右、下、左,网页编程/CSS,CSS属性,*浮动属性float：定义元素在左右方向浮动clear：清除浮动,网页编程/CSS,CSS属性,*overflow属性f规定当内容溢出元素框时发生的事情visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承overflow属性的值。,网页编程/CSS,CSS属性,*选择器a*选择器分组body,h2,p,table,th,td,pre,strong,emcolor:gray;,网页编程/CSS,CSS属性,*类选择器.foo*结合元素选择器p.importantcolor:red;*多类选择器.importantfont-weight:bold;.warningfont-style:italic;.important.warningbackground:silver;,网页编程/CSS,CSS属性,*ID选择器#foo*唯一性、区分大小写,网页编程/CSS,CSS属性,*属性选择器titlecolor:red;ahrefcolor:red;ahreftitlecolor:red;imgaltborder:5pxsolidred;,网页编程/CSS,CSS属性,*后代选择器h1emcolor:red;,网页编程/CSS,CSS属性,*子元素选择器h1strongcolor:red;,网页编程/CSS,CSS属性,*相邻兄弟选择器h1+pmargin-top:50px;.,网页编程/CSS,CSS属性,*伪类a:hover*伪元素h1:beforecontent:url(logo.gif);,网页编程/CSS,CSS属性,*HTML标签,网页编程/CSS,CSS属性,*高级运用,网页编程/CSS(),CSS属性,*border-radius-moz-border-radius:25px圆角*box-shadow阴影,网页编程/CSS,CSS属性,*background-size-moz-background-size背景尺寸*background-origin-webkit-background-origin属性规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域*background-image:url(bg_flower.gif),url(bg_flower_2.gif);多重背景,网页编程/CSS,CSS属性,*text-shadow文本阴影*word-wrap:break-word;允许对长单词进行拆分，并换行到下一行：,网页编程/CSS,CSS属性,*text-shadow文本阴影*word-wrap:break-word;允许对长单词进行拆分，并换行到下一行：,网页编程/CSS,CSS属性,*font-face选择自定义字体font-facefont-family:myFirstFont;src:url(Sansation_Light.ttf),url(Sansation_Light.eot);/*IE9+*/divfont-family:myFirstFont;,网页编程/CSS,CSS属性,*透明属性filter:alpha(opacity=50);/*支持IE浏览器*/-moz-opacity:0.50;/*支持FireFox浏览器*/opacity:0.50;/*支持Chrome,Opera,Safari等浏览器*/,网页编程/兼容,跨浏览器兼容性问题,*对元素的外边距和内边距进行预定义是一个好主意。这样