CSS

HTML标记的组合就是HTML语言，浏览器根据HTML标记的含义进行解析和显示HTML标记及标记属性的规范写法：▪所有开始标记都有结束标记▪标记名和属性名小写▪属性值加双引号或单引号掌握常用HTML标记：▪文字font、标题hn、段落p、层div、列表ul和li、超链接a、图像img、换行br等重点理解：表格▪table与tr、td(th)的使用▪利用表格进行布局重点理解：表单▪form标记及表单控件标记（input、textarea、select等）的用法▪理解表单提交数据的过程数据如何打包（表单元素名称=表单元素值）数据发送至何处（action属性）数据发送的形式（method属性：GET\POST）CSS概述CSS细节本篇教学目的在于css入门，能够运用css的几种基本用法，能够看懂和理解比较复杂一些的css用法CSS定义CSS的产生第一个CSS示例CSS的好处CSS（CascadeStyleSheet）▪级联（层叠）样式表▪是由W3C组织制定的一种用来定义样式规则（如字体、颜色和位置）的语言▪能让网页制作者有效地定制、改善网页的显示效果HTML中，文本的格式化（样式设置）可以使用一些特定的标记，比如粗体标记b，font标记等样式标记散落于HTML语言中，使得内容和格式化的代码混杂一起，难以区分。解决方法是改用独立的技术——CSS示例示例CSS语句的构成：▪样式▪应用样式的场所CSS语句的构成：▪样式▪应用样式的场所p{color:red;}在这里，页面中的p元素是应用样式的场所，CSS中，元素名称两边不加属性名color代表字体颜色属性值red一条样式样式属性名和值之间用冒号（：）分隔，每条样式最后加一个分号（；）应用于p元素的所有样式放置在一对大括号之间样式包括：样式属性名样式属性值CSS语句的构成：▪样式（属性名、属性值）▪应用样式的场所p{color:red;}这条CSS语句的作用：选择页面上的所有p元素，将内容的字体颜色设置为red称之为p选择符——也叫做“选择符”CSS语句里添加更多样式：▪可以添加若干条样式（属性名、属性值）p{color:red;font-size:32px;}这条CSS语句的作用：将页面上p元素的内容的字体颜色设置为red，大小设置为32像素;CSS的引入有多种方式，第一个示例采用在页面文件中直接引入CSS样式，方法如下：htmlheadtitlecss/titlestyletype=“text/css”p{color:red;}/style/headbodyp第一段文字/p/body/html在HTML页面中直接引入CSS，需要在head元素里增加一对样式开始和结束标记（style）style标记属性type值为text/csscss语句置于style标记之间htmlheadtitlecss/titlestyletype=“text/css”p{color:red;}/style/headbodyp第一段文字/p/body/html内容的样式采用独立的CSS原始内容样式应用p选择符选择页面中的p元素以下写法都可以：CSS不区分大小写，推荐全部小写p{color:red;font-size:32px;}p{color:red;font-size:32px;}包含多条样式时，习惯第一种写法CSS语句的构成：▪（若干条）样式样式的属性名样式的属性值▪应用样式的场所——选择符p{color:red;}p选择符一条样式样式属性名样式属性值CSS将HTML格式与内容分离，有利于对内容进行统一的格式设置和修改CSS样式相比HTML格式化标记的功能更加丰富和强大不采用CSS示例采用CSS示例CSS样式CSS选择符CSS的引入方式CSS样式的级联HTML中的格式化标记（如bfont等）功能有限，CSS样式的功能更加强大CSS包括各种样式属性，用于控制字体、颜色、对齐方式和边距以及位置等▪CSS样式种类繁多，无须一一记忆字体的样式属性主要包括文字的字体、大小、颜色、显示效果等示例向雷锋同志学习！仅通过HTML如何实现该效果font-family：指定字体▪可以指定多个字体，字体之间以逗号（,)分隔▪按顺序依次查找计算机中有无指定的字体，有则显示，无则查找下一个，如果都没有查到，采用默认字体font-family:微软雅黑,楷体,宋体;font-size：字体大小▪常用单位：px（像素），pt（点）▪40px：px代表像素单位，单位通常不要省略font-size:40px;color：字体颜色▪可以用预定义的颜色名称▪可以用十六进制代码▪颜色拾取color:red;color:#ff0000;font-weight：控制字体的粗细▪取值：normal,bold,lighter,bolder，默认normalfont-style：控制文字倾斜▪取值：italic，normal，默认normaltext-decoration：控制下划线等▪取值：underline（下划线），line-through（中划线），overline（上划线）font-weight:bold;font-style:italic;text-decoration:underline;示例属性含义属性值font-family字体各种字体font-style字体样式italic、oblique、normalfont-variant小体大写small-capsfont-weight字体粗细normal、bold、bolder、lighter…font-size字体大小absolute、relative、%color字体颜色颜色值背景属性包括背景颜色、背景图像以及背景图像的控制background-color：设置元素的背景色示例background-color:silver;background-image：设置元素的背景图像background-repeat：设置背景图像的重复▪取值：no-repeat（不重复），repeat（在水平和垂直方向上重复），repeat-x和repeat-y（分别在水平和垂直方向上重复），默认repeatbackground-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样式属性和HTML属性很多写法不完全一致，比如：text-align（CSS中），align（HTML标记属性）HTML中一些格式化标记，比如b（粗体）i（斜体）等，在CSS中，通过新的样式属性来展现▪传统HTML中用于格式化的标记（font，b，i等）不再推荐使用，推荐采用CSS来实现相比HTML格式化标记，CSS提供的样式功能更加丰富示例p{font-family:微软雅黑,楷体,宋体;color:red;font-size:32px;font-weight:bold;font-style:italic;text-decoration:underline;}p第一段文字/pfontface=“微软雅黑”color=“red”size=“6”biu第二段文字/u/i/b/font在CSS看来，HTML元素都有一个边框CSS边框属性设置元素边框的颜色、宽度、样式等border-style（边框样式）：控制边框的外观▪取值：none(无边框)，solid(实线)，dashed（虚线)，dotted（点线），double（双线），groove(凹槽)，inset（凹边），ridge（凸槽），outset（凸边）border-color（边框颜色）：▪取值：颜色名，或十六进制border-width（边框宽度）：▪通常采用像素单位示例border属性：通过该属性同时设置边框样式、宽度、颜色border:5pxsolidgreen;多个值之间以空格分隔，多个值的顺序随意示例定义边框的一侧：可以定义任何一侧(上、下、左、右）的边框的样式、宽度或颜色▪border-topborder-bottomborder-leftborder-right▪比如：定义边框上侧border-top-style:dashed;border-top-width:5px;border-top-color:green;border-top:10pxdashednavy;示例div{border:5pxsolidblue;border-top:10pxdashednavy;}对于边框上侧：border-top样式覆盖了border样式属性含义属性值border-width边框宽度（四边）通常采用像素单位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;补白元素内容与边框之间有一层“补白”（也叫“填充”）元素内容区边框补白补白补白padding属性控制元素内容与边框之间的补白属性含义属性值padding-left内容与左边框的补白通常采用像素单位padding-top内容与上边框的补白padding-right内容与右边框的补白padding-bottom内容与下边框的补白padding同时设置四侧的补白示例元素与元素之间有一层边界元素内容区补白补白补白补白元素内容区元素B边框元素A边框边界margin属性控制元素之间的边界示例属性含义属性值margin-top上边界常用单位像素margin-right右margin-bottom下margin-left左margin同时设置“盒模式”：▪CSS中，每个元素被看待成一个“盒子”——box，这个盒子有“边框”，盒子内容与边框之间有“补白”，盒子与盒子之间有“边界”定位类型由position属性指定▪position取值：absolute和relative指定定位类型后，可用下列属性来提供具体位置▪left：左边的位置偏移▪right:右边的位置偏移▪top：顶部的位置偏移▪bottom：底部的位置偏移positon取值absolute时，表示相对于父元素；position取值relative时，表示相对于自身▪left取值25px，absolute下，元素左边将偏离父元素25像素；▪relative下，元素左边距离自身原始位置偏移25像素absolute示例1absolute示例2样式属性display，描述元素如何显示▪取值：block，inline，list-item，none▪理解：元素在网页上的显示占据一块矩形区域（盒模式），display属性控制该矩形区域如何显示block：使元素显示在下一行none：使得