Web前台技术-CSS

1Web前台技术——CSS2内容提要Unit1：CSS语法Unit2：CSS基础属性Unit3：CSS高级属性3Unit1：CSS语法4Unit1：CSS语法CSS简介CSS语法CSS选择器CSS样式表的使用方式5CSS简介CSS诞生的背景HTML的愿景浏览器厂商的行为设计原则：将变化的从不变的内容中抽取出来解决方案：CSS6CSS简介CSS概述CSS指层叠样式表（CascadingStyleSheets），层叠的意思是：多重样式定义被层叠为一个样式。CSS是标准的布局语言，用来控制元素的尺寸、颜色、排版。CSS非常精确，功能强大，易于编写。纯CSS的布局与HTML的结合，可使表现与结构分离，并使站点更易维护，易用性更好。样式表极大地提高了工作效率和运行效率7CSS简介多重样式将层叠为一个样式样式表允许以多种方式规定样式信息。样式可以被规定于单个的HTML元素中。在HTML页的头元素中。或在一个外部的CSS文件中。甚至可以在一个单一的HTML文档内部引用多个外部样式表。8CSS简介层叠次序当同一个HTML元素被不止一个样式所定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。1.浏览器缺省设置2.外部样式表3.内部样式表（位于head标签内部）4.内联样式（在HTML元素内部）9CSS语法CSS语法CSS语法由三部分构成：选择器、属性和值：selector{property:value}选择器(selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）body{color:blue}10CSS语法提示：如果要定义不止一个声明，则需要用分号将每个声明分开：p{text-align:center;color:red;}我们应该在每行描述只写一个属性，以使得样式定义的可读性更强，就像这样：p{text-align:center;color:black;font-family:arial;}11CSS选择器1.类型选择器2.ID选择器3.类选择器4.分组选择器5.派生选择器6.继承选择器12类型选择器语法：E{sRules}说明：类型选择符。以文档语言对象(Element)类型作为选择符。示例：div{color:red;}divThisismyHTMLpage./div13ID选择器语法：#ID{sRules}说明：ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择符。示例：#idSelector{color:blue;}divid=idSelectorThisismyHTMLpage./div14类选择器语法：E.className{sRules}说明：类选择符。在HTML中可以使用此种选择符。示例：divclass=classSelectorThisismyHTMLpage./div.classSelector{color:green;}15分组选择器语法：E1,E2,E3{sRules}说明：选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。示例：h1,h2,h2,h3,h5,h6{color:green;}16派生选择器语法：E1E2{sRules}说明：包含选择符。选择所有被E1包含的E2。即E1.contains(E2)==true。17派生选择器pstrong我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用/strong/pollistrong我是斜体字。这是因为strong元素位于li元素内。/strong/lili我是正常的字体。/li/ollistrong{font-style:italic;font-weight:normal}18继承选择器CSS中，子元素可以从父元素继承属性。body{color:red}19样式表的使用方式如何插入样式表当读到一个样式表，浏览器会根据它来格式化文件。插入样式表的方法有三种：外部样式表内部样式表内联样式20外部样式表当样式需要被应用于很多页面时，外部样式表将是理想的选择。每个页面使用link标签链接到样式表。link标签在（文档的）头部：浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。headlinkrel=stylesheettype=text/csshref=mystyle.css//head21外部样式表外部样式表可以被编写于任何的文本编辑器。文件不能包含任何的html标签。样式表应该被保存为以css为扩展名的文件。下面是一个样式表文件的例子：#idSelector{color:blue;}divid=idSelectorThisismyHTMLpage./div22内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用style标签在头部分定义内部样式表，就像这样:styletype=text/css#idSelector{color:blue;}/style23内联样式要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。divstyle=color:yellowThisismyHTMLpage./div24多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对h3选择器的三个属性：h3{color:red;text-align:left;font-size:8pt;}25多重样式而内部样式表拥有针对h3选择器的两个属性：h3{text-align:right;font-size:20pt;}26多重样式假如拥有内部样式表的这个页面同时与外部样式表链接，那么它得到的样式是：即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。color:red;text-align:right;font-size:20pt;27练习☺样式表的不同引入方式28Unit2：CSS基础属性29Unit2：CSS基础属性背景文本字体边框边距填充列表轮廓30CSS背景CSS背景属性允许你控制元素的背景颜色，将图像设置为背景，垂直或水平低重复背景图像，并且在网页上定位背景图像。31练习☺背景属性练习32CSS文本CSS文本属性允许你控制文本的外观。它可用于改变文本颜色，增加或减少文本中的字符间距，排列文本，装饰文本，对文本中的首行进行缩进，以及其他等等。33练习☺文本属性练习34CSS字体CSS字体属性允许你改变字体的种类、粗细、尺寸以及样式。35练习☺字体属性练习36CSS边框CSS边框属性允许你规定元素边框的样式和颜色。在HTML中，我们使用表格来创建文本周围的边框，但是通过使用CSS边框属性，我们可以创建出效果出色的边框，并且可以被应用于任何元素。37练习☺边框属性练习38CSS外补丁CSS外补丁属性定义元素周围的空间。采用负值对内容进行叠加是可能的。通过使用独立的属性，可以对上、右、下、左边距进行改变。而简写外补丁属性也可以被用于同时改变所有的外补丁。39练习☺外补丁属性练习40CSS补丁CSS补丁属性定义元素边框与元素内容之间的空白。负值是不被允许的。通过使用单独的属性，上、右、下、左填充可以被独立地修改。简写填充属性也可被创建来同时对多边进行控制。41练习☺补丁属性练习42CSS列表CSS列表属性允许你放置、更改列表标记，或者将图像作为列表标记。43练习☺列表属性练习44Unit3：CSS高级属性45Unit3：CSS高级属性尺寸轮廓伪类伪对象布局46CSS尺寸DimensionCSS尺寸属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。47练习☺尺寸属性练习48CSS轮廓Outline设置或检索对象外的线条轮廓。外轮廓(outline)画在边框(border)外面，并且不一定是矩形。对应的脚本特性为outline。49练习☺轮廓属性练习50练习☺伪类和伪对象练习51练习☺布局练习52Thanks