JSD11072w班eb02-05天串讲.docVIP

JSD1107_2班web02_web05天串讲 串讲人：刘鸽 1、css (1)cascading style sheet 级联样式表， 按照w3c的规范，页面的数据与结构由html来负责， 页面的外观（展现给用户的界面）由css来负责。 (2)css的基本语法 选择器名称{ 属性：属性值; 属性2：属性值2; } 比如 #d1{ font-size:50px; } (3)施加样式（将样式施加到指定的html标签之上） 通过选择器来施加。 a,标签选择器 body{ font-size:50px; background-color:#cccccc; } 对具有相同标签名的所有标签起作用。 b,class选择器 .选择器的名称{ } 对标签class属性值和选择器名称相同的标签起 作用。 标签名.选择器的名称{ } 标签的class属性要与选择器名称相同， 并且标签名要一致。 c,id选择器 #选择器的名称{ } 标签的id属性要与选择器的名称相同。 d,选择器的分组 div,h1,p{ font-size:120px; } 表示对div,h1,p都施加该样式 e,选择器的派生 div p{ font-size:150px; } (4)样式的继承 子标签会继承父标签的样式。 (5)样式的优先级 浏览器默认样式 外部样式:使用link 引入外部的.css文件。 内部样式：使用style定义的样式 内联样式:使用标签的style属性定义的样式 从上往向优先级增大。 (6)几个重要的属性 a,位置相关的属性 margin:外边距 margin-left: margin-right: margin-top: margin-bottom: 也可以简写为 margin: 顶，右，底，左 margin:0px; margin:20px auto; 左右居中，顶、底各20px; padding:内边距 padding-left: padding-right: padding-top: padding-bottom: 也可以简写为 padding: 顶，右，底，左 内边距在使用时，要注意，子标签会将标签 撑开。 b,边框 border:宽度 样式 颜色; border-left:左边框 border-right: border-bottom: border-top: c,背景 background-color:#cccccc; background-image:url(图片的地址); background-repeat:no-repeat/repeat-x/repeat-y; background-attachment:fixed/scroll(默认); background-postion:100px 200px; background:背景 图片 平铺方式 依附方式 水平位置 垂直位置 d,文字 font-size:文字大小 font-weight:粗细 100-900 font-family:字体 text-decoration: none/underline下划线 cursor:pointer/wait text-align: left/right/center e,列表 list-style-type:none;除掉小圆点 f,关键属性 float:浮动 left/right 其作用：取消块级标签的独占一行的特性。 clear:取消浮动 both; (7)布局： body,ul,li,img{ margin:0px; padding:0px; font-size:12px; } (8)链接的伪样式 a:link { color: red} 没有访问时 a:visited { color: blue} 访问后 a:active { color: lime} 鼠标点击但还没有放开时 a:hover { color: aqua} 鼠标指向时 display属性： block: html标记以块标记的形式来显示 inline: html标记以行内标记的形式来显示