CSS课堂笔记.docVIP

课堂笔记 CSS 课程目标: css作用与基本语法 掌握选择器 了解css常用属性 主要内容： css作用介绍 css的基本语法* css在html中的四种用法* 样式的优先级规则 css常用选择器（类、id、标签）* css常用属性 css盒子模型 html+css作业 css介绍 css基本语法 css四种用法 行内样式 内嵌样式 外部样式 导入式 链接式 样式的优先级规则 css常用选择器 标签选择器 语法：标签名称{……} 如：p{color:red;} id选择器 语法：#id名称{……} 如：#p{color:red;} 类选择器 语法：.类名称{……} 如：.p{color:red;} 包含选择器 语法：选择器1 选择器2 {…… } 说明：选择所有被“选择器1”包含的“选择器2” 如：div p{color:red;} 选择器分组 语法：选择器1 , 选择器2 {…… } 说明：选择“选择器1”和“选择器2” 如：div,p{color:red;} 伪类选择器 语法：标签名称:伪类名 {…… } 如： a:link????{?color:?red?}????/*?unvisited?links?*/? a:visited?{?color:?blue?}???/*?visited?links???*/? a:hover???{?color:?yellow?}?/*?user?hovers??*/? a:active??{?color:?lime?}???/*?active?links???*/? css常用属性 字体设置 font-size常用单位介绍 单位 描述 % 百分比 em 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。 例如，如果某元素以 12pt 显示，那么 2em 是24pt。 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 px 像素 (计算机屏幕上的一个点)1em=16px, 12px=0.75em如果将em换算后{font-size:62.5%}，1em=10px color的3种表示方法介绍(英文单词、#RRGGBB、rgb(r,g,b)) 单位 描述 颜色名颜色名称比如red rgb(x,x,x) RGB(0-255) 值 (比如 rgb(255,0,0)) rgb(x%, x%, x%) RGB百分比值 (比如 rgb(100%,0%,0%)) #rrggbb 十六进制数(比如 #ff0000)如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #的方式。例如：#8800 可以缩写为 #80。 1.3样式简写方法介绍 如： span{ font-style:normal; /*设置字体样式*/ font-weight:bold; /*设置字体粗细*/ font-size:1.5em; /*设置字体大小*/ font-family:宋体,黑体; /*设置字体名称序列*/ } 简写法： span{ font:normal bold 1.5em 黑体,宋体; } 文本设置 如： p{ text-decoration:underline;/*设置文本装饰*/ } 背景设置 div{ width:800px; /*设置标签宽度*/ height:800px; /*设置标签高度*/ background-color:white; /*设置背景颜色*/ background-image:url(***.jpg);/*设置背景图*/ background-repeat:no-repeat; /*设置背景平铺*/ } 简写法： div{ width:800px; /*设置标签宽度*/ height:800px; /*设置标签高度*/ background:white url(***.jpg) no-repeat; } 列表设置 ol li{ list-style-type:none; /*设置列表项的预设标记*/ } display属性 display设置元素如何显示 如： ul li{ display:inline; } float（浮动）属性：设置元素脱离正常的文档流（自上而下，自左向右）显示 如： #dv1{ float:right;