CSS基础详解-1+CSS概述

HTMLCSSJavaScript结构样式行为HTML部分内容回顾•HTML的整体结构•文字、段落、列表和超链接olli…/lili…/li/ol超链接：ahref=―‖链接文字/a•表格的使用:tabletrtd.../td/tr/tableHTML部分内容回顾•表单的使用:form…/form–表单中的常用控件:inputtype=―text‖…/(password、button)inputtype=―submit‖…/inputtype=―checkbox‖/inputtype=―radio‖/textarea../textareaselectname=―‖optionvalue=―‖…/optionoptionvalue=―‖…/option/selectHTML部分内容回顾•框架的使用–framesetrows=―20%,*‖framesrc=―‖/…../frameset–iframesrc=―‖/iframe第三章CSS第1节(1)CSS概述主要内容CSS概述CSS的基本语法选择器CSS样式表的使用从Word的样式说开去Word中什么是内容？什么是样式？Word中一个样式可以控制多个文本，有什么好处？网页中的内容和样式网页中的内容和样式例：notice_html.html思考：哪些是内容？哪些是样式？内容和样式混在一起存在什么问题？网页中内容和样式能否分离呢？从HTML代码说起用HTML标记控制样式的缺点标记不足网页过“胖”维护困难定位困难•HTML对字号、字符间距、行高等设置能力的不足；•内容和样式混杂在一起，增加大量不必要的重复样式代码，并且使网页显得杂乱，阅读困难，维护困难；•单纯使用html标记也难以精确的对网页元素进行定位CSS概述CSS:CascadingStyleSheet—层叠样式表CSS可以控制网页样式，实现网页的内容和样式分离CSS是不是很难？上手很容易，精通要下一定的功夫。p{color:blue;}HTMLCSS主要内容CSS概述CSS的基本语法CSS样式表的使用CSS的基本语法•动手演示CSS控制网页的样式例2-1-0.htmlCSS的基本语法—选择器•CSS选择器由三部分组成：–选择符–一对花括号–声明语句，由属性:属性值组成，属性之间用分号隔开。p{color:red;}标签选择符类选择符ID选择符选择符{属性:属性值;………}选择器•标签选择器选择器名是html标签名•类选择器选择器是.标识符•ID选择器#标识符p{color:red;}.classStyle{font-size:24px;}#idStyle{font-size:24px;color:blue;}•选择器的名称是.标识符•影响所有class=“该类选择器”的标签的样式•类选择器可以被多次应用选择器类选择器•选择器的名称是#标识符•影响所有id=“该选择器”的标签的样式•同一页面中，ID选择器只能使用一次。用来给页面中是独一无二的内容设定样式。ID选择器•选择器的名称是HTML标签•影响整个页面中该标签的样式标签选择器主要内容CSS概述CSS的基本语法选择器CSS样式表的使用内部样式表外部样式表CSS文件的位置在HTML中使用CSS的方法行内样式表内部样式表基本语法：headstyletype=―text/css‖选择器{属性：属性值；属性：属性值；…}…/style/head优点所有的样式信息都集中到HTML文件的头部，可以在该HTML文档中多次使用。缺点作用范围仅限于该HTML页面，其他页面无法使用另一页面定义的内部样式。用途对特殊的页面设置单独的样式风格基本语法：head…linkrel=―stylesheet‖type=―text/css‖href=―样式表文件地址‖/head外部样式表优点一个外部样式表文件可以用于多个HTML文件，减少重复工作量，方便后期维护用途广泛应用于各类大型网站行内样式表基本语法：body…HTML标记style=―属性:属性值;属性:属性值;……/body特点需要为相应的标记设置Style属性，该样式仅用于控制该标记网页容易过胖后期维护成本高用途指定网页中某小块内容的显示效果或通过javascript动态控制网页中某块的样式。内部样式表外部样式表CSS文件的放置在HTML文件的位置在HTML中使用CSS的方法行内样式表小结1.CSS（层叠样式表）2.由HTML确定网页的结构内容，通过CSS来决定页面的表现形式。3.选择符{属性：属性值；属性：属性值；……}标签选择器、类选择器、ID选择器4.在html中使用css的方法：使用内部样式表使用行内样式表链入外部样式表TheEnd!