CSS样式表基础知识.ppt

前端设计课程培训,云创科技专注IT教育 ,现代网页设计 网页CSS样式 /html/ 安装google浏览器,网页编程 /CSS,CSS结构,*内联格式： *外链文件 ,网页编程 /CSS,CSS结构,*书写格式： 内部标签： 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预设 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-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-side、empty-cells、table-layout,网页编程 /CSS,CSS属性,*表格属性 border : 1px solid blue;边框 border-collapse : 边框折叠 width、height：宽高 list-style : url(example.gif) square inside text-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, em color:gray;,网页编程 /CSS,CSS属性,*类选择器 .foo *结合元素选择器 p.important color:red; *多类选择器 .important font-weight:bold; .warning font-style:italic; .important.warning background:silver;,网页编程 /CSS,CSS属性,*ID选择器 #foo *唯一性、区分大小写,网页编程 /CSS,CSS属性,*属性选择器 title color:red; ahref color:red; ahreftitle color:red; imgalt border: 5px solid red;,网页编程 /CSS,CSS属性,*后代选择器 h1 em color:red;,网页编程 /CSS,CSS属性,*子元素选择器 h1 strong color:red;,网页编程 /CSS,CSS属性,*相邻兄弟选择器 h1 + p margin-top:50px; . ,网页编程 /CSS,CSS属性,*伪类 a:hover *伪元素 h1:before content:url(logo.gif); ,网页编程 /CSS,CSS属性,*HTML 标签 /tags/tag_doctype.asp 请始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。 在 HTML 4.01 中有三种 声明。在 HTML5 中只有一种：,网页编程 /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+ */ div font-family:myFirstFont; ,网页编程 /CSS,CSS属性,*透明属性 filter:alpha(opacity=50); /*支持 IE 浏览器*/ -moz-opacity:0.50; /*支持 FireFox 浏览器*/ opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/,网页编程 /兼容,跨浏览器兼容性问题,*对 元素的外边距和内边距进行预定义是一个