css介绍+选择器

CSS(Cascading Style Sheets层叠样式表是一种用来为结构化文档如 HTML 文档或 XML 应用添加样式字体、间距和颜色等的计算机语言CSS文件扩展名为 .css。1、建立html文档更加方便不需考样式2、提交了网页开发的效率3、独立性与灵活性html文档与样式分离后文档与样式之间就具有了独立性当更改内容时在结构文档中进行更改如果更改样式在样式文件中进行更改。4、样式代码的重复利用一个html文档可以应用多种样式这样就可以快速更改网页样式。多个html文档可以应用同一个样式这些文档就可以实现相似的效果与风格。CSS的作用CSS2.0是目前众多浏览器支持最为完善样式新的浏览也是以2.0css为支持原型进设计css2.0样式在众多平台和浏览表现的效果也最为一致。css可以实现页面标签精确的位可以支持全部的字体字号样式和完美的模型设置和简单的交互设计。样式的结构内容 结构(Structure) 表现(presetation) 行为(Behavior)内容是一个人 头部身体四肢(结构) 头部身体四肢上的衣服饰饰品(样式) 头部身体四脚动作(行为)CSS文件的引入方式第一种行内样式 在html标签内使用style属性书写的样式span style”color:red”行内样式/span第二种内部样式(内嵌样式) 内嵌样式是书写在style标签中如style typetext/cssspan{color:red;}/style第三种引入样式 在style标签中使用import url(样式文件名)style typetext/cssimport url(import.css);/style第四种外部样式 使用HTML的link标签引入的样式link ref”stylesheet” type”text/css” href”css文件名”/CSS的语法CSS样式表中由若干个样式规则组成每一个样式规则由以下组成选择器(符)选择器的作用一是选中html标签,二将样式应用给选中的标签,选择器的名子不能以数字开头。选择器的种类标签选择器span{color:red;}类选择器类选择器以 “.”开头.a1{color:blue;}id选择器ID选择器以”#”开头#a3{background:silver;}层级选择器每一个选择器之间使用空格分开E F G{样式}EFG是选择器的名字a.whitewine{color:yellow;}分组选择器E,F,G{样式}EFG是选择器名字可以是任何选择器的名字style typetext/cssspan,label,.c3{color:red;border:1px solid red;background:yellow;margin:20px;}/stylescript typetext/javascript/script/headbodyspan分组选择器1/spanlabel分组选择器2/labelh2 classc3分组选择器3/h2/body组合选择器将以上各种选择器组合使用逗分隔而成的选择器计算时先以”,”号将每组分开再进行相应计算#box div label,#id1 .l1{color:red;}//相当于 #box div label{color:red;};#id1 .l1{color:red;}/stylescript typetext/javascript/script/headbodydiv idboxdivspan classc1类选择器/spanbr/label标签选择器/label/div/divdiv idid1ID选择器label classl1标签选择器/label/div/body通用选择器*{样式} 选中文档中所有的标签在IE低版本中不支持伪类选择器一般是用于a链接的不同状态以下四种状态:link a链接正常显示状态:visited a链接访问后的状态:hove r 鼠标悬浮于a链接上的状态:active 当鼠标在a链接上按下(并未抬起鼠标)后的状态联想记忆 LVHA Love(爱) Hate(恨)常用写法a:link,a:visted{text-decoration:none;color:silver;}a:hover{text-decoration:none;color:red;}属性的书写规范属性与属性值之间用”:”分开属性与属性之间用”;”分开CSS中的注释/*注释内容*/ 可以单行注释也可以多行注释CSS属性详解尺寸属性width: 设置标签的宽度 取值数值 单位非零数值必须pxheight: 设置标签的高度 取值数值 单位非零数值必须px字体属性color: 设置文字颜色 named color、十进制RGB(255,200,100) 十六进制(#00ff00)font-size: 设置文字大小 单位px 12px;font-family: 设置字体 宋体,黑体font-weigth: 设置字体是否加粗font-style: 设置字体是否斜体line-height: 设置行高font: 复合属性示例span{font:bold italic 13px 华文行楷;}字体与字体大小属性是必须文本属性text-transform: 设置文本在小写 capitalize uppercase lowercase只适用于英文text-decoration: 设置文字装饰线 underline、overline、line-through、normaltext-align: 设置文字或被包含行内元素水平对齐方式 left、center、rightvertical-align: 设置文字或被包含行内元素垂直对齐方式top、middle、bottomtext-indent: 设置文字首先缩进 单位:px像素letter-spacing: 设置字符间距word-spacing: 设置词间距 一般用于英文边框属性border-width: 设置边框粗细 单位:pxbroder-style: 设置边框样式取值:solid实线、dashed虚线段、dotted点虚线、inset、ousetbroder-color: 设置边框颜色 三种border: 复合属性border:red 1px solid;border-left-width: 单独设置左边的粗细border-left-color: 单独设置左边的颜色border-left-style: 单独设置左边的样式border-left: 左边的复合属性border-left:red solid 1px;border-left-style:dashed;border-left-width:1px;border-left-color:red;border-top-style:dotted;border-top-width:2px;border-top-color:blue;border-right-style:outset;border-right-width:3px;border-right-color:yellow;背景属性background-color: 设置背景颜色 三种颜色方式background-image: 设置背景图片 urlbackground-image:url(图片地址);background-position: 设置背景图片的位置top 居上对齐center 居中对齐left 靠左对齐right 靠对齐center 居中对齐bottom 向下对齐background-repeat: 设置背景图片的平铺方式取值: repeat-x水平方向平铺repeat-y垂直方向平铺no-repeat 不平铺background-attachment: 设置背景是否随内容滚动取值fixed背景固定 scroll背景随内容滚动background: 背景图片的复合属性background:red;background:url(tiger1.jpg) 0 0 scroll no-reapt;font size”” color”” face””