CSS样式表基础知识.ppt

1、前端设计课程培训,云创科技专注IT教育 ,现代网页设计网页CSS样式http:/,网页编程 /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; paddi

2、ng: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 点击、划

3、过 *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 背

4、景属性 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-

5、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

6、属性,表格属性 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-colla

7、pse : 边框折叠 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：

8、左边距,网页编程 /CSS,CSS属性,边框属性 border,网页编程 /CSS,CSS属性,外边距属性 margin：上、右、下、左,网页编程 /CSS,CSS属性,浮动属性 float：定义元素在左右方向浮动 clear：清除浮动,网页编程 /CSS,CSS属性,overflow 属性 f规定当内容溢出元素框时发生的事情 visible默认值。内容不会被修剪，会呈现在元素框之外。 hidden内容会被修剪，并且其余内容是不可见的。 scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit规定应该

9、从父元素继承 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 *唯一性、区分大小

10、写,网页编程 /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(lo

11、go.gif);,网页编程 /CSS,CSS属性,HTML 标签 http:/ 请始终向 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-ori

12、gin 属性规定背景图片的定位区域，背景图片可以放置于 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属性,fon

13、t-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 等浏览器*,网页编程 /兼容,跨浏览器兼容性问题,对 元素的外边距和内边距进行预定义是一个好主意