css基础分析

Css基础Html基础复习(table)-table基本结构:tablethead/thead定义表格的表头tbody/tbody定义表格的主体tfoot/tfoot定义表格的结尾部分/table-注释：1：thead、tbody以及tfoot很少被使用，这是因为糟糕的浏览器支持。2：如果使用thead、tfoot以及tbody元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody3：thead/thead从table结构讲，对行进行分组th/th定义表头单元格，表格中的文字将以粗体居中显示Html基础复习(table)-table中的一些属性属性名称含义Width设置宽度Height设置高度Cellpadding设置文字与单元格内边距Cellspacing设置单元格之间的距离Border设置表格边框Align设置对齐方式（left,center,right）bgcolor设置表格背景颜色Html基础复习(from)-表单重要作用:采集数据信息-表单语法格式:formmethod=“”action=“”/form-表单组成部分:表单控件,提示信息，表单域-表单控件：inputtype=“控件类型”控件语法含义inputtype=”text”name=“”文本输入框inputtype=“password”密码输入框inputtype=“radio”name=“gender”单选框inputtype=“checkbox”复选框（多选框）inputtype=“file”文件上传控件inputtype=“button”普通按钮value设置显示文字控件语法含义inputtype=“image”src=“”图片按钮inputtype=“submit”提交按钮inputtype=“reset”重置按钮-相关属性：maxlength:设置最大输入长度readonly=“readonly”：设置当前控件为只读disabled=“disabled”:设置当前控件非激活状态checked=“checked”：单选框或复选框默认选中name:控件名称value:获取控件取值-下拉列表框:selectoption/option/select注释：1：optgrouplabel=“”option/option/optgroup2：多选设置multiple3:默认选中设置selected-多行文本域textareacols=“”rows=“”/textarea注释：cols:设置文本域宽度rows：设置文本域高度-表单元素分组fieldset/fieldset注释：legend/legend定义标题Css的起源web的衰落：在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能。一片混乱：迫于压力，html开始出现font，i,s等标签。但是html是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：1：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。2：页面维护越来越困难Css大救星：当html中存斥着的表现标记问题，W3c并没有忽视。在1995年，w3c开始发布一种正在进行的计划（work-in-prrgress）称之为css。与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。Css基础CSS的定义•什么是CSS？–CSS指层叠样式表(CascadingStyleSheets)–CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。–CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。–CSS就是控制页面布局和样式HTML和CSS的关系HTML结构层负责从语义的角度搭建页面结构CSS样式层负责从审美的角度美化页JavaScript行为层负责从交互的角度提升用户体验CSS语法-语法结构：选择器{属性:值;属性:值;…….}-选择器：选择谁参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用英文输入法下的分号;隔开。CSS选择器-选择器：实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。-选择器分类：1基础选择器1.1：标签选择器1.2：类选择器1.3：ID选择器1.4：复合选中器2复合选择器如何编写CSS如何编写CSS样式?–内嵌（嵌入，内部）样式，head标签中添加style标签。•在head标签中添加style标签。•head–stylep{color:red;}/style•/headCss初体验：将一段文字颜色变成红色标签选择器•标签选择器其实就是html代码中的标签–Html中标签:html、body、h1、p、img等等CSS简单属性•width：设置宽度，单位px像素•height：高度•color：前景色，也就是文字的颜色•background-color：背景色。•font-size:字体的大小。案例：CSS设置样式•设置p标签的背景色为红色•设置H1标签的字体颜色为绿色•设置span标签的文本为14像素案例完成类选择器类选择器（class）•什么是类？–物以类聚，人以群分。比如：我们都是牛人！–黄种人、白种人、欧洲人、亚洲人–所有的鸭子、所有的猫、•类选择器，是对HTML标签中class属性进行选择。CSS类选择器的选择符是“.“类选择器在css样式编码中是最常用到的。•类选择器语法格式:类选择器(class)详解使用方法：第一步：使用合适的标签把要修饰的内容标记起来，如下：spanWeb开发/span第二步：使用class=类选择器名称为标签设置一个类，如下：spanclass=oneWeb开发/span第三步：设置类选器css样式，如下：.one{color:red;}类选择器（class）多类选择器一个标签可以有多个类选择器的值，不同的值用空格分开，如：divclass=oneyellowleftStyle此处为标签内的文字/div这样我们可以将多个样式用到同一个标签中页面布局常见命名规范头header内容content/container尾footer导航nav侧栏sidebar标志logo广告banner页面主体main内容content命名：最好不用汉字，html标签去定义一个类名。不能用数字开头在名称内部可以出现特殊符号例如：下横线_中横线-ID选择器ID选择器ID选择器和类选择器用法一样，区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器，浏览器不会报错但是不符合W3C标准了，所以ID选择器命名必须要唯一性)语法格式ID选择器以#来定义。如图：ID选择器ID选择器与类选择器的区别1：类选择器：好比人的名字刘德华可以多人使用2：id选择器好比人的身份证唯一性有且只能使用一次3：不同于类选择器，ID选择器不能结合使用写样式的时候，大部分都是用类，极少的使用id。不提倡用id去写样式，因为他的权重太高。Id主要是为了js做准备。通配符选择器通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}例如下面的代码，使用通配符选择器定义CSS样式，设置所有HTML标记字体大小*{font-size:18px;}}案例小热身Css相关属性Text-alignCenter,left,right文字居中格式Font-size18px设置文字大小Font-family微软雅黑,宋体设置字体Font-weightNormal默认，bold粗体，100px设置字体加粗Font-styleNormal默认，italic斜体设置字体风格Color颜色设置文字颜色Css字体合写选择器{font:font-stylefont-weightfont-size/line-heightfont-family}字体合写语法格式如下：注意:必须有字体大小和字体(font-size和font-family),必须严格按顺序写css复合选择器-标签指定式•复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，具体如下1、标签指定式选择器（即....又....）标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。后代选择器后代选择器(包含选择器)后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。并集选择器3、并集选择器并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。请根据以下Css样式写出对应的html结构案例练习课后总结Css语法格式•选择器分类•标签选择器语法及使用•类选择器语法及使用•ID选择器语法及使用•css复合选择器