CSS样式表基础知识.ppt

《CSS样式表基础知识.ppt》由会员分享，可在线阅读，更多相关《CSS样式表基础知识.ppt（39页珍藏版）》请在三一办公上搜索。

1、前端设计课程培训,云创科技专注IT教育,现代网页设计网页CSS样式http:/,网页编程/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,a img border:0;margin:0;padding:0;,网页编程/CSS,CSS结构,*预设

2、：*表格预设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

3、,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

4、-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：字体倾

5、斜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)s

6、quare insidetext-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 insidetext-align:水平对齐 vertical-align:垂直对齐border-collaps

7、e、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,CS

8、S属性,*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.import

9、ant 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,C

10、SS属性,*子元素选择器h1 strong color:red;,网页编程/CSS,CSS属性,*相邻兄弟选择器h1+p margin-top:50px;.,网页编程/CSS,CSS属性,*伪类a:hover*伪元素h1:beforecontent:url(logo.gif);,网页编程/CSS,CSS属性,*HTML 标签请始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。在 HTML 4.01 中有三种 声明。在 HTML5 中只有一种：,网页编程/CSS,CSS属性,*高级运用,网页编程/CSS(),CSS属性,*border-radius-moz-border-radius

11、: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;允许

12、对长单词进行拆分，并换行到下一行：,网页编程/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

13、浏览器*/-moz-opacity:0.50;/*支持 FireFox 浏览器*/opacity:0.50;/*支持 Chrome,Opera,Safari 等浏览器*/,网页编程/兼容,跨浏览器兼容性问题,*对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。-ms-transform:rotate(9deg);/*Internet Explorer*/-moz-transform:rotate(9deg);/*Firefox*/-webkit-transform:rotate(9deg);/*Safari 和 Chrome*/-o-transform:rotate(9deg);/*Opera*/,