CSS技术基本概述

1、html标记的组合就是html语言，浏览器根据html标记的含义进行解析和显示html标记及标记属性的规范写法： 所有开始标记都有结束标记 标记名和属性名小写 属性值加双引号或单引号掌握常用html标记： 文字、标题、段落 、层 、列表 和、超链接、 图像、换行等重点理解：表格 与、()的使用 利用表格进行布局重点理解：表单 标记及表单控件标记（、等）的用法 理解表单提交数据的过程 数据如何打包（表单元素名称=表单元素值） 数据发送至何处（action属性） 数据发送的形式（method属性：getpost）css概述css细节本篇教学目的在于css入门，能够运用css的几种基本用法，能够看懂

2、和理解比较复杂一些的css用法css定义css的产生第一个css示例css的好处css（c cascade s style s sheet） 级联（层叠）样式表 是由w3c组织制定的一种用来定义样式规则（如字体、颜色和位置）的语言 能让网页制作者有效地定制、改善网页的显示效果html中，文本的格式化（样式设置）可以使用一些特定的标记，比如粗体标记，标记等样式标记散落于html语言中，使得内容和格式化的代码混杂一起，难以区分。解决方法是改用独立的技术css 示例示例css语句的构成： 样式样式 应用样式的场所场所css语句的构成： 样式样式 应用样式的场所场所 pcolor : red; 在这里

3、，页面中的 元素是应用样式的场所，css中，元素名称两边不加属性名color代表字体颜色属性值red一条样式样式属性名和值之间用冒号（：）分隔，每条样式最后加一个分号（；）应用于 元素的所有样式放置在一对大括号之间样式包括：样式属性名样式属性值css语句的构成： 样式样式（属性名、属性值） 应用样式的场所场所 pcolor : red; 这条css语句的作用：选择页面上的所有元素，将内容的字体颜色设置为red称之为p选择符也叫做“选择符选择符”css语句里添加更多样式： 可以添加若干条样式（属性名、属性值） pcolor : red;font-size:32px; 这条css语句的作用：将页面

4、上元素的内容的字体颜色设置为red，大小设置为32像素;css的引入有多种方式，第一个示例采用在页面文件中直接引入css样式，方法如下： css pcolor:red; 第一段文字 在html页面中直接引入css，需要在元素里增加一对样式开始和结束标记（）标记属性type值为text/csscss语句置于标记之间 css pcolor:red; 第一段文字 内容的样式采用独立的css原始内容样式 应用p选择符选择页面中的元素以下写法都可以：css不区分大小写，推荐全部小写 pcolor : red;font-size : 32px; p color : red; font-size : 32p

5、x; 包含多条样式时，习惯第一种写法css语句的构成： （若干条）样式样式 样式的属性名 样式的属性值 应用样式的场所场所选择符选择符 pcolor : red; p选择符一条样式样式属性名样式属性值css将html格式与内容分离，有利于对内容进行统一的格式设置和修改css样式相比html格式化标记的功能更加丰富和强大不采用css示例采用css示例css样式css选择符css的引入方式css样式的级联html中的格式化标记（如等）功能有限，css样式的功能更加强大css包括各种样式属性，用于控制字体、颜色、对齐方式和边距以及位置等 css样式种类繁多，无须一一记忆字体的样式属性主要包括文字的字

6、体、大小、颜色、显示效果等示例向雷锋同志学习！仅通过html如何实现该效果font-family：指定字体 可以指定多个字体，字体之间以逗号（, ,)分隔 按顺序依次查找计算机中有无指定的字体，有则显示，无则查找下一个，如果都没有查到，采用默认字体font-family:微软雅黑,楷体,宋体;font-size：字体大小 常用单位：px（像素），pt（点） 40px：px代表像素单位，单位通常不要省略 font-size: 40px; color：字体颜色 可以用预定义的颜色名称 可以用十六进制代码 颜色拾取 color:red; color:#ff0000; font-weight：控制字体

7、的粗细 取值：normal, bold, lighter, bolder，默认normalfont-style：控制文字倾斜 取值：italic，normal，默认normaltext-decoration：控制下划线等 取值：underline（下划线），line-through（中划线），overline（上划线） font-weight: bold; font-style:italic; text-decoration:underline; 示例属性属性含义含义属性值属性值font-family字体各种字体font-style字体样式italic、oblique、normalfont-v

8、ariant小体大写small-capsfont-weight字体粗细normal、bold、bolder、lighterfont-size字体大小absolute、relative、%color字体颜色颜色值背景属性包括背景颜色、背景图像以及背景图像的控制background-color：设置元素的背景色示例 background-color: silver;background-image：设置元素的背景图像background-repeat：设置背景图像的重复 取值：no-repeat（不重复），repeat（在水平和垂直方向上重复），repeat-x和repeat-y（分别在水平和垂直

9、方向上重复），默认repeat background-image: url( “bg.jpg” ) ; 示例可以用相对地址或绝对地址示例属性属性含义含义属性值属性值background-color背景色颜色值background-image背景图案图片路径(相对，绝对)background-repeat 背景图案重复方式repeat-x | repeat-y | no-repeat| repeat文本属性包括对齐方式、文字间距、行距等text-align：设置文本的水平对齐方式 取值：left，center，right，默认left示例 text-align: center;css样式属性和h

10、tml属性很多写法不完全一致，比如：text-align（css中），align（html标记属性）html中一些格式化标记，比如（粗体）（斜体）等，在css中，通过新的样式属性来展现 传统html中用于格式化的标记（，等）不再推荐使用，推荐采用css来实现相比html格式化标记，css提供的样式功能更加丰富示例 p font-family:微软雅黑,楷体,宋体; color:red; font-size:32px; font-weight:bold; font-style:italic; text-decoration:underline; 第一段文字第二段文字在css看来，html元素都有

11、一个边框css边框属性设置元素边框的颜色、宽度、样式等border-style（边框样式）：控制边框的外观 取值：none(无边框)，solid(实线)，dashed（虚线)，dotted（点线），double（双线），groove(凹槽)，inset（凹边），ridge（凸槽），outset（凸边）border-color（边框颜色）： 取值：颜色名，或十六进制border-width（边框宽度）： 通常采用像素单位示例border属性：通过该属性同时设置边框样式、宽度、颜色 border: 5px solid green;多个值之间以空格空格分隔，多个值的顺序随意示例定义边框的一侧：可以定

12、义任何一侧(上、下、左、右）的边框的样式、宽度或颜色 border-top border-bottom border-left border-right 比如：定义边框上侧border-top-style: dashed;border-top-width:5px;border-top-color:green; border-top: 10px dashed navy;示例 div border:5px solid blue;border-top:10px dashed navy; 对于边框上侧：border-top样式覆盖了border样式属性属性含义含义属性值属性值border-width边

13、框宽度（四边） 通常采用像素单位border-color边框颜色（四边） 颜色值border-style边框样式（四边） dotted | dash | solid | double | groove | ridge | inset | outsetborder边框所有属性border-top-width上边框宽度border-top-color上边框颜色border-top-style上边框样式border-top 上边框所有属性height和width属性控制元素矩形区域的大小 常用单位：px（像素），pt（点）示例width:200px;height:200px;补白补白元素内容与边框之

14、间有一层“补白补白”（也叫“填充”）元素内容区边框补白补白补白补白补白补白padding属性控制元素内容与边框之间的补白属性属性含义含义属性值属性值padding-left内容与左边框的补白通常采用像素单位padding-top内容与上边框的补白padding-right内容与右边框的补白padding-bottom内容与下边框的补白padding同时设置四侧的补白示例元素与元素之间有一层边界边界元素内容区补白补白补白补白补白补白补白补白元素内容区元素b边框元素a边框边边 界界margin属性控制元素之间的边界示例属性属性含义含义属性值属性值margin-top上边界常用单位像素margin-

15、right右margin-bottom下margin-left左margin同时设置“盒模式盒模式”： css中，每个元素被看待成一个“盒子盒子”box，这个盒子有“边框边框”，盒子内容与边框之间有“补白补白”，盒子与盒子之间有“边界边界”定位类型由position属性指定 position取值：absolute和relative指定定位类型后，可用下列属性来提供具体位置 left：左边的位置偏移 right: 右边的位置偏移 top：顶部的位置偏移 bottom：底部的位置偏移positon取值absolute时，表示相对于父元素；position取值relative时，表示相对于自身 le

16、ft取值25px，absolute下，元素左边将偏离父元素25像素； relative下，元素左边距离自身原始位置偏移25像素absolute示例1absolute示例2样式属性display，描述元素如何显示 取值：block，inline，list-item，none 理解：元素在网页上的显示占据一块矩形区域（盒模式），display属性控制该矩形区域如何显示 block：使元素显示在下一行 none：使得元素隐藏不显示示例示例 body font-family:微软雅黑,楷体,宋体; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口里嵌

17、套的元素继承了body的字体样式继承的覆盖 body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口p的字体样式覆盖从body继承的字体样式示例在css里，被应用的样式规则总是最具体的 比如，如果有一个样式，定义了一个更具体的，则浏览器会执行更具体的那条样式 body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; 一个元素的css样式属性，（部分地）会被嵌套在其内的元素（子孙元素）所继承继

18、承的样式可以被子孙元素重新定义的相同样式所覆盖哪些属性可以继承？ 主要是字体相关的样式（如字体、颜色、大小、粗斜体等） 其它大部分属性不被继承 如边框、位置等 根据理解，动手验证，不用死记硬背示例css样式css选择符css的引入方式css样式的级联css语句中的选择符选择符（selector)定义了样式应用的场所（对象），即受样式影响的是哪些html元素三种主要类型的选择符： html标记标记选择符 class（类）选择符 id选择符理解理解html标记选择符标记选择符就是html标记（不加），如：p，div，body如果在css中将某个html标记定义成选择符，则在css所应用的网页中，所

19、有的这种html标记都按照相应的样式进行显示示例用html标记比如段落作为html选择符定义的样式规则，将影响所有段落，如果想采用不同样式，可以创建不同的样式类，通过类选择符应用不同样式类定义：选择符直接以点（.）开头，后跟类名(任意合法名称)，即“.类名类名”应用：类选择符根据html标记的class属性进行选择，选择class属性等于该“类名”的任何html标记 .类名 样式1；样式2； 选择class属性为“类名”的任何元素类选择符的应用：使用html标记的classclass属性 .style1 样式 .style2 样式 段落内容1段落内容2示例class = “style1”cla

20、ss = “style2”选择class为“style1”的元素选择class为“style2”的元素 .style 样式; 段落内容选择class为“style”的任何元素示例 层内容类选择符选择类选择符选择class属性等于该类名的属性等于该类名的任何元素任何元素idid： html标记（元素）的可选属性，一个html元素可以设置id属性值，标识该html元素html标记（元素）的name属性在一个页面中，id值是唯一的，name属性值可以重复 段落内容 段落内容 如果一个html标记设置了id属性，可以通过“idid选择符选择符”设置该html标记的样式id选择符定义和应用 定义：以（#

21、 #）开头后跟id值，即“# #idid值值” 应用：id选择符根据html标记的id属性进行选择，选择id属性值等于该“id值”的任意一个元素 #style 样式; 段落内容html标志可以有id属性，值为任意合法名称示例选择id为“style”的任意一个元素类选择符和id选择符: 一个页面，类选择符可以重复使用，多个html标记的class属性值是可以相同的 一个页面中，html标记的id值是唯一的，id选择符通常用于为某一个特定的html元素设置样式示例三种选择符: html标记选择符(标记名不加) 根据html标记名进行选择 类选择符(用. .定义) 根据html标记的class属性进

22、行选择 id选择符(用# #定义) 根据html标记的id属性进行选择课堂练习，问以下选择符的含义： table 样式 td .td #titlepanel 组合选择器 可以在一条css语句中定义若干个选择器，每个选择器之间用逗号（，）分隔 p,h1,h2color:red; font-weight:bold; 元素的文本内容都为红色，粗体示例关联选择器 只选择特定元素的子孙元素 div pcolor:red; font-weight:bold; 只选择嵌套在div元素里的p元素两者之间以空格空格进行分隔htmlheadbodytitledivpp div p color:red; font-

23、weight:bold; 选择不不选择示例htmlbodypp .style p color:red; font-weight:bold; 选择选择class为”style”的元素内嵌套的p元素不不选择htmlbodypp #style p color:red; font-weight:bold; 选择id为”style“的元素内嵌套的p元素课堂练习，问以下选择符的含义： ：学习网页源码时，能看懂各种选择符的含义 .grid .grid table #grid table 新浪首页源文件中的css .grid,table 要求要求 .grid table td 伪类选择器： 对同一个html元

24、素的各种状态的一种定义方式 比如：对于超链接（）的正常状态、访问过的状态、光标移动上去的状态常用伪类选择器： a:hover 光标移动到超链接上时的状态 a:visited 超链接访问过后的状态示例css样式css选择符css的引入方式css样式的级联html文档内定义内部样式表链接外部样式表嵌入外部样式表直接定义html标记的style属性（内联样式） css pcolor:red; 第一段文字 只在该页面内有效在文件里(后缀名为css)定义各种样式规则，页面中创建到该文件的外部链接bodybackground-color:#d2b48c;border:10px solid gray;padding:20px;font-family:微软雅黑;蓝色部分写在单独的样式文件（后缀名为css)文件里不需要标记一个样式文件可被多个文档引入样式文件示例 css . 之间的标记链接外部样式文件相对或绝对地址链接示例1 链接示例2定义好的外部样