教程（第二章）课件

什么是CSS,CSS全称是层叠样式表，它是用于定义如何显示HTML元素的。它实现了网页内容与表现的分离，提高了代码的清晰度和易读性。 HTML通常使用如下三种方法添加运用CSS ： (1)在页面的标签中创建CSS样式。 例如： .div1 position: absolute; div1 ,在标签内编写CSS样式。,指向样式表中的某个样式。,若标签使用class属性，指向的样式名称前需要增加前缀”.”。,(2)在中链接外部的样式表文件(文件后缀名为”css”)。 例如： div2 div2.css文件: .div2 position: absolute; width: 250px; height: 150px; ,(3)在标签元素内设置的样式。 例如： div3 ,在style属性中设定所在标签的样式。,(见css_use.html),这三种方法中，第三种拥有优先权，即意味着元素内的样式将首选被运用在所属标签元素上。,CSS的基本语法,CSS一般由两部分组成，分别是选择器和样式声明。而样式声明由样式属性和属性值来组成。 语法规则： 选择器 样式属性：值； 样式属性：值 例如: div width: 250px; height: 150px; #divId width: 100px; height: 100px; ,选择器有很多种。有id选择器、类选择器、元素选择器等等。,样式声明可以有一条，也可多条，每一条样式声明用”;”隔开。,元素选择器。,将所有div元素的宽设置为250像素，高设置为150像素。,ID选择器。对应某个标签的id，前缀用”#”标示。,若结合上面的样式一起使用，该div标签样式将会被覆盖。,CSS3常用选择器,(1)通配选择器 匹配页面上的任何元素。 例如： * color: green; font-size: 25px; div 123456 123456 ,(见selector_universal.html),将页面所有文本颜色设置为绿色，并且字体大小为25个像素。,格式： *,(2)元素选择器 匹配页面上某个元素类型的所有实例。 例如： div width: 274px; height: 154px; background-image: url(“images/decVideo.png“); font-size: 25px; font-style: italic; color: white; span font-size: 50px; color: blue; div1 123456 div2,(见selector_element.html),background-image: 背景图片,font-style:字体样式，斜体、倾斜等,匹配标签。,格式： 元素名,(3)类选择器 一般用于当不同的标签元素需要使用相同的样式时，需要在标签内使用“class”属性。 例如: .divSize width: 274px; height: 154px; .div1 background-image: url(“images/decVideo.png“); .div2 background-color: black; ,(见selector_class.html),class属性可以包含多个类选择器，用空格隔开。,两个div设置了相同的长度和高度，但一个设置了背景图片，另一个只填充了背景颜色。,格式： .元素class属性值,(4)id选择器 匹配某一个设置了id属性的标签元素。(同一页面多个标签可使用同一id，但根据W3C标准，建议同张页面保持id的唯一性。) 例如: #div1 width: 274px; height: 154px; background-image: url(“images/decVideo.png“); #div2 width: 200px; height: 150px; background-color: black; ,(见selector_id.html),格式： #元素id属性值,(5)属性选择器 为具有指定属性和属性值的元素设置样式。 （这类选择器的规则非常灵活，举例一些具有代表性的。） 例一： 匹配具有指定属性及属性值的所有元素。 src=“images/decVideo.png“ border: 5px blue solid; onclick=“alert('button')“ position: absolute; background-color: red; ,(见selector_attr_1.html),设置边框样式，分别表示宽度、颜色、样式（实线）。,格式一： 属性=属性值,例二： 匹配具有指定属性的所有元素。 name border: 5px blue solid; ,(见selector_attr_2.html),格式二： 属性,例三： 匹配具有指定属性的所有指定元素。 imgname border: 5px blue solid; ,(见selector_attr_3.html),格式三： 元素名属性,元素名可按照实际需求，决定是否添加。后续实例，也是如此。,例四： 匹配具有指定属性和属性值的所有指定元素。 inputname=“btn“ border: 5px blue solid; ,(见selector_attr_4.html),格式四： 元素名属性=属性值,例五： 匹配具有指定属性且属性值开头为指定字符串的所有指定元素。 imgname=“img“ border: 5px blue solid; ,(见selector_attr_5.html),格式五： 元素名属性=属性值的开头部分,例六： 匹配具有指定属性且属性值结尾为指定字符串的所有指定元素。 imgname$=“_1“ border: 5px blue solid; ,(见selector_attr_6.html),格式六： 元素名属性$=属性值的结束部分,例七： 匹配具有指定属性且属性值包含指定字符串的所有指定元素。 imgname*=“mag“ border: 5px blue solid; ,(见selector_attr_8.html),格式七： 元素名属性*=属性值的某一部分,例八： 匹配具有指定属性且属性值包含指定字符串后使用空格” ”分隔的所有指定元素。 imgname=“img“ border: 5px blue solid; ,(见selector_attr_8.html),格式八： 元素名属性=属性值的某一部分,例九： 匹配具有指定属性且属性值包含指定字符串后使用连字符”-”分隔的所有指定元素。 imgname|=“img“ border: 5px blue solid; ,(见selector_attr_9.html),格式九： 元素名属性|=属性值的某一部分,(6)后代选择器 匹配某元素内所有指定的元素。 例如： ul list-style-type: none li float: left ul img border: 5px blue solid; ul p span font-size: 50px; 123456 ,(见selector_descendant.html),格式： 元素名空格元素名,匹配内所有的。,匹配中被包含在内的所有的。,(7)子元素选择器 匹配某元素内所有指定的子节点元素。 以上页为例，实现相同的效果： ul list-style-type: none li float: left ul li img border: 5px blue solid; ul li div span font-size: 50px; 123456 ,(见selector_child.html),格式： 元素名 子元素名,匹配内所有。,(8)相邻兄弟选择器 匹配某一元素相邻的下一个同胞元素。 例如： p + label font-size: 50px; 123456 123456,格式： 元素名 +相邻的下一个同胞元素名,(见selector_adjacent.html),(9)通用兄弟选择器 匹配某一元素之后，所有指定的同胞元素。 例如： p label font-size: 50px; 123456 label1 123456 label2,格式： 元素名 之后的同胞元素名,(见selector_sibling.html),(10)伪类 它不仅仅用来匹配元素，也可以用来匹配某些状态的元素。 （伪类的选择符很多，下面列举两个，介绍下使用方法。） 例一： 匹配不含有选择符的元素。 input:not(type=“submit“) background-color: green; ,匹配所有不包含type=“submit”的 。,(见selector_pseudo_class_not.html),例二：匹配当前页面URL中的目标元素。 div:target width:200px; height:100px; background-color: yellow; Click Me div,点击超链接，对div进行样式设置。,(见selector_pseudo_class_target.html),除以上的例子外，伪类还可以定义表单输入框的有效或无效时状态的样式、对有序或无序列表中奇数或偶数项的样式等等。,(11)伪元素 它不匹配元素的状态，而是匹配元素里的各个部分。 例一： p:first-line color: red; line1 line2 line2 ,(见selector_pseudo_element_first_line.html),设置段落内的第一行文本为红色。,例二： span:after content: url(“images/decVideo.png“) line1,(见selector_pseudo_element_after.html),在设置后添加图片。,(12)选择器分组 多个选择器使用相同的样式。 例如： p, type=“text“, .lbl font-size: 35px; color: red; label1 123456 label2,(见selector_group.html),元素选择器、属性选择器、类选择器,CSS常用样式,(部分样式属性在不同的浏览器中，表现形式会有所不同或无效，以下以Chrome为例,列举部分内容。） 1.定位 position属性一般含有四个属性值: (1)static:默认值。没有定位，元素按照正常的文档流进行排列(top, bottom,left,right和z-index设置无效); 例如： img top: 50px; left:100px; ,(见style_position_static.html),默认为static。 设置元素与顶部和左边缘的距离无效。,(2)relative: 元素相对于其正常位置进行定位。所谓的正常位置，是指在默认情况下，元素所在的位置。 例如： div width: 300px; height: 200px; background-color: yellow; img position: relative; top: 50px; left: 100px; ,(见style_position_relative.html),100px,50px,正常位置,top：设置元素与顶部的距离 left：设置元素与左边缘的距离,(3)absolute: 相对于static 以外的第一个父元素进行定位。 例如： body background-color: black #div1 position: absolute; top: 100px; left: 200px; width: 300px; height: 200px; background-color: yellow; img position: absolute; bottom: 80px; right: 60px; ,(见style_position_absolute.html),100px,200px,80px,60px,相对于父元素div设定位置。 bottom：设置元素与底部的距离 right：设置元素与右边缘的距离,(4)fixed: 相对于浏览器窗口进行定位。 例如： body background-color: black #div1 position: absolute; top: 100px; left: 200px; width: 300px; height: 200px; background-color: yellow; img position: fixed; bottom: 80px; right: 60px; ,(见style_position_fixed.html),80px,60px,2.背景 例如: #div1 width: 400px; height: 200px; background-image : url(“images/decVideo.png“); background-repeat : no-repeat; background-color : rgb(245,255,3); background-position : center; background-size : 200px ,(见style_background.html),设定背景图像。,是否重复图像或如何重复。,设定背景颜色。属性值可以为颜色名称(red)、十六进制(#ff0000)、rgb代码(rgb(255,255,0)。,设定背景图像的位置。,设定背景图像的大小。,也可在background中设定多个背景属性。例: background: url(“images/decVideo.png“) no-repeat rgb(245,255,3),3.字体 例如: font-face font-family: myfont; src:local(“myfont“),url(“fonts/myfont.woff“) body font-family: myfont; font-size: 30px; font-style: italic; font-weight: bold; style_font,(见style_font.html),下载指定字体。若使用本机字体，则不需要设定。,自定义字体名称。,local：使用用户本机的字体; url：下载使用外部字体。,设定字体名称。属性至可以为外部自定义字体，也可以是本机字体。,设定字体大小。,设定字体样式。,设定字体粗细。,4.文本 例一:文本阴影 p font-size: 30px; color: #0000FF; text-shadow: 5px 5px 5px #FF0000; style_text,(见style_text_1.html),设定文本颜色。,添加文本阴影效果。四个参数分别代表：阴影距原始文本外水平偏移、垂直偏移、阴影模糊程度、阴影颜色。,例二:控制文本溢出 p width: 200px; background-color: yellow; overflow: hidden; text-overflow: ellipsis; My troll is a friendly1111111111111111111111111111111111111111111111111111111111111111.,(见style_text_2.html),设定当文本内容溢出元素框时的状态。例如超出内容被裁剪、超出内容不显示但可以用滚动条查看等。,文本溢出时用省略号替代。前提是与”overflow:hidden”配套使用。,这个长字符串被认为是一个完整单词，所以不会主动换行。,5.框模型,元素内容。,元素内容与元素边框的距离。,元素边框与另一个元素边框的距离。,(1)padding内边距 body background-color: black; #div1 width: 300px; height: 200px; background-color: yellow; img border:#0000FF 1px solid; padding-top: 15px; padding-right:30px; padding-bottom:45px; padding-left: 60px; ,(见style_padding.html),原本元素内边距为0px。,等同于： padding: 15px 30px 45px 60px;,45px,15px,30px,60px,(2)margin外边距 body background-color: black; #div1 width: 300px; height: 200px; background-color: yellow; img border:#0000FF 1px solid; margin-top: 15px; margin-right:30px; margin-bottom:45px; margin-left: 60px; ,(见style_margin.html),原本元素内边距为0px。,等同于： margin: 15px 30px 45px 60px;,60px,30px,15px,45px,6.边框 例如:阴影圆角边框 #div1 width: 93px; height: 93px; background-image: url(“images/XmbCategorySenHi.png“); border: #0000FF 1px solid; border-radius: 10px; box-shadow: 5px 5px 10px black; ,(见style_border.html),定义圆角边框。,设置边框阴影。 语法： box-shaow: 水平阴影位置 垂直阴影位置 模糊度阴影大小阴影颜色内部阴影或外部阴影，默认外部阴影,7.动画 例如: -webkit-keyframes myAnime 0% background:white; left:0px; border-radius: 6px; 100% background:black; left:500px; border-radius: 50px; -webkit-transform: rotate(200deg); div width: 100px; height: 100px; position: absolute; -webkit-animation-name: myAnime; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; ,(见style_anime.html),CSS3的部分样式属性，在不同的浏览器中，需要加一些前缀，表示是该浏览器的私有属性。比如animation-name，在Chrome中为“-webkit-animation-name”，Opera中为“-o-animation-name”。,定义动画中开始和结束状态的样式。,定义元素顺时针旋转。,定义动画的花费时间。,定义动画运行的速度曲线，即速度变化。,定义动画何时开始。,定义动画无限循环或循环次数。,定义动画可反向播放。,定义动画运行或暂停。,DIV+CSS布局,以实际案例baidu_music_index.html的方式讲解。,