[计算机软件及应用]HTML+CSS的语法讲解.pptVIP

课程内容 CSS介绍 CSS细节 CSS属性介绍 css框架 CSS定义 CSS—Cascade Style Sheet层叠样式表 1998/5/12，CSS level2成为W3C标准 用来装饰HTML/XML的标记集合 特点： 样式表由样式规则组成，以告诉浏览器如何显示一个文档 每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式 每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现 CSS样式 样式规则格式： 选择符{属性:值} 单一选择符的复合样式声明应该用分号分割： 选择符{属性1:值1; 属性2:值2} 01.html CSS的调用方式 在Head中调用(01.html) 在Body中调用(02.html) 调用css文件(03.html/03.css) CSS的优先级问题 按照最靠近元素的定义来显示(04.html) 如果两个css文件冲突,以后面的为准 css选择器 类别选择器：Class 一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式(05.htm) 不同的选择符也可以同时定义一样的样式(06.htm) ID选择器：ID 06_1.htm 标签选择器 后代选择器（要和子选择器区别开 #links a {color:blue;}） 后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。 CSS组合/注释 可以一次性定义多个选择符的样式 H1,H2,H3{color:red;font-family:serif} P A{} 06_2.html 注释： /*这是注释*/ 字体属性 属性 含义 属性值 font-family 字体 各种字体 font-style 字体样式 italic、oblique font-variant 小体大写 small-caps font-weight 字体粗细 bold、bolder、lighter… font-size 字体大小 absolute、relative、% color 字体颜色 颜色值 例：07.html 颜色与背景属性 属性 含义 属性值 Color 颜色 颜色值 Background-color 背景色 颜色值 Background-image 背景图案 图片路径 Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat Background-attachment 背景的滚动 Scroll | fix Background-position 背景图案初始位置 % | n em | top | left | right | bottom … 例：08.html 文本属性 属性 含义 属性值 word-spacing 单词间距 n em letter-spacing 字母间距 n em text-decoration 装饰样式 underline| overline| line-through| blink vertical-align 垂直方向位置 sub| super |top |text-top|middle| bottom| text-bottom text-transform 转为其他形式 capitalize| uppercase| lowercase text-align 对齐 left| right| center| justify text-indent 缩进 n em| % line-height 行高 pixels、n em、% 例：09.html 1Em=12pt 9pt=12px 装饰超链接 伪类选择符 对链接的修饰 A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 10.html 边距属性 属性 含义 属性值 margin-top 上边距 n em | % margin-right 右 n em | % margin-bottom 下 n em | % margin-left 左 n em | % 例：11.html 填充属性 属性 含义 属性值 padding-top 上填充 n em | % padding-right 右 n em | % padding-bottom 下 n em | % padding-left 左 n em | % 例：12.html 边框属性 属性 含义 属性值 Border-top-width 上边框宽度 n em | thin | medium | thick Border-right-width