《CSS样式表基础知识》由会员分享，可在线阅读，更多相关《CSS样式表基础知识（39页珍藏版）》请在金锄头文库上搜索。
1、前端设计课程培训,云创科技专注IT教育 ,现代网页设计 网页CSS样式 http:/ 安装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,a img border:0; margin
2、: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:hoveroutli
3、ne: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属性,*backgro
4、und 背景属性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
5、：处理空白符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
6、 : 1px solid blue;边框border-collapse : 边框折叠width、height：宽高list-style : url(example.gif) square 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、heigh
7、t：宽高list-style : url(example.gif) square insidetext-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属性,*边框属性bor
8、der,网页编程 /CSS,CSS属性,*外边距属性margin：上、右、下、左,网页编程 /CSS,CSS属性,*浮动属性float：定义元素在左右方向浮动clear：清除浮动,网页编程 /CSS,CSS属性,*overflow 属性f规定当内容溢出元素框时发生的事情visible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承 overflow 属性的值。,网页编程 /C
9、SS,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 c
10、olor: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:beforecontent:url(logo.gif); ,网页编程 /CSS,CSS属性,*HTML 标签http
11、:/ 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
12、、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: m
13、yFirstFont;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 等浏览器*/,网页编程 /兼容,跨浏览器兼容性问题,*对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。-ms-transform:rotate(9deg); /* Internet Explorer */-moz-transform:rotate(9deg); /* Firefox */-webkit-transform:rotate(9deg); /* Safari 和 Chrome */-o-transform:rotate(9deg);/* Opera */,
