CSS样式表基础知识.pptVIP

前端设计课程培训 云创科技专注IT教育 现代网页设计网页CSS样式/html/安装google浏览器 网页编程 /CSS CSS结构 *内联格式： style /style *外链文件 link href=css/hello.css rel=stylesheet type=text/css / 网页编程 /CSS CSS结构 *书写格式： div id=foo class=foo/div 内部标签： foo{} id: #foo{} class: .foo{} 网页编程 /CSS CSS结构 *预设： * { margin:0; padding:0; } 所有标签内外边界全置0 *body预设 *块面预设{display:block} *行内预设{margin: 0; padding: 0; border: 0; z-index:inherit;} *图像预设img,a img { border:0; margin:0; padding:0; } 网页编程 /CSS CSS结构 *预设： * 表格预设 table { empty-cells: show; border-collapse: collapse; } 显示空表格、合并表格线 *表单预设 ul li{ list-style: none; } *标题预设 h1, h2, h3, h4, h5, h6 { font-size: 1.6em; } *文本预设 em, i { font-style: normal; } 网页编程 /CSS CSS结构 *a预设： * a预设 a{background:transparent; width:100%} *a:active,a:hover{outline:0} 点击、划过 *a .link{text-decoration:none; color:#CCC} 未访问 *a:visited,a:hover,a:active{text-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-color background-image background-repeat background-position background-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) square inside 网页编程 /CSS CSS属性 *表格属性 border : 1px solid blue;边框 border-collapse : 边框折叠 width、height：宽高 list-style : url(example.gif) square inside text-align:水平对齐 vertical-align:垂直对齐 padding:15px;内边距 border-collapse、border-spacing、caption-s