大连理工大学软件学院实训基地css

1、CSSHTML美容师1课程内容CSS介绍CSS细节CSS的各种属性视熟悉程度，应掌握在1-6个小时左右，当然了，我们培养的是程序员，这个时间足够了2CSS定义CSSCascade Style Sheet层叠样式表1998/5/12，CSS level2成为W3C标准用来装饰HTML/XML的标记集合特点：样式表由样式规则组成，以告诉浏览器如何显示一个文档每个规则的组成包括一个选择符-通常是一个HTML的元素-和该选择符所接受的样式每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现3CSS样式样式规则格式：选择符属性:值单一选择符的复合样式声明应该用分号分割：选择符属性1:值

2、1; 属性2:值201.html4CSS的调用方式在Head中调用(01.html)在Body中调用(02.html)调用css文件(03.html/03.css)CSS的优先级问题按照最靠近元素的定义来显示(04.html)如果两个css文件冲突,以后面的为准5CLASS & ID类选择符：Class一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式(05.htm)不同的选择符也可以同时定义一样的样式(06.htm)ID选择06_1.htm6CSS组合/注释可以一次性定义多个选择符的样式H1,H2,H3color:red;font-family:serif （并列关系）P A

3、（p里面的内容）06_2.html注释：/*这是注释*/7字体属性属性含义属性值font-family字体各种字体font-style字体样式italic、obliquefont-variant小体大写small-capsfont-weight字体粗细bold、bolder、lighterfont-size字体大小absolute、relative、%color字体颜色颜色值例：07.html8颜色与背景属性属性含义属性值Color颜色颜色值Background-color背景色颜色值Background-image背景图案图片路径Background-repeat背景图案重复方式Repeat

4、-x | repeat-y | no-repeatBackground-attachment背景的滚动Scroll | fixBackground-position背景图案初始位置% | n em | top | left | right | bottom 例：08.html9文本属性属性含义属性值word-spacing单词间距n emletter-spacing字母间距n emtext-decoration装饰样式underline| overline| line-through| blinkvertical-align垂直方向位置sub| super |top |text-top|mid

5、dle| bottom| text-bottomtext-transform转为其他形式capitalize| uppercase| lowercasetext-align对齐left| right| center| justifytext-indent缩进n em| %line-height行高pixels、n em、%例：09.htmlEm:12pixels 的 M常用于印刷的单位10装饰超链接 伪类选择符对链接的修饰A:link 未访问时的状态A:visited 访问过后的状态A:active 鼠标点中不放时的状态A:hover 鼠标划过时的状态10.html11边距属性属性含义属性值m

6、argin-top上边距n em | %margin-right右n em | %margin-bottom下n em | %margin-left左n em | %例：11.html12填充属性属性含义属性值padding-top上填充n em | %padding-right右n em | %padding-bottom下n em | %padding-left左n em | %例：12.html13边框属性属性含义属性值Border-top-width上边框宽度n em | thin | medium | thickBorder-right-width右同上Border-bottom-w

7、idth下同上Border-left-width左同上Border-width四边同上Border-color边框颜色ColorBorder-style边框样式Dotted | dash | solid | double | groove | ridge | inset | outsetBorder-top |right|bottom|left上(右|底|左)所有属性Border-width | border-style | color例：13.html1415图文混排属性含义属性值Width宽度n em | %Height高度n emFloat文字环绕Left | rightclear去除文

8、字环绕Left | right | both例：14.html16列表属性属性含义属性值Display是否显示Block | inline | list-item | noneWhite-space空白部分Pre | nowrap | normal（是否合并)List-style-type项目编号Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image项目前图片Img-urlList-style-position第二行位置Inside | outsideList

9、-style全部属性Keyword | position | url例：15.html17鼠标属性属性值含义属性值含义Auto自动N-resize上箭头Crosshair+Se-resize右下Default默认Sw-resize左下Hand手形S-resize下箭头Move移动W-resize左箭头E-resize右箭头TextINe-resize右上Wait沙漏Nw-resize左上help帮助例：16.html18定位属性属性含义属性值Position位置Absolute|relative|staticLeft | top横向|纵向位置N em | %Width | height宽度|高度同上Clip剪切Shape | autoOverflow内容超出时Visible | hidden | scroll | autoZ-index立体效果Integervisibility可见性Inherit | visible | hidden例：17.html 18.html19滤镜属性属性值含义属性值含义Alpha半透明Invert底片Blur模糊Light灯光投影Chroma指定颜色透明Mask透明膜Dropshadow投射阴影Sha