CSS的设计与应用-LAMP兄弟连PHP培训

LAMP兄弟连PHP培训配套课件LAMP兄弟连PHP培训配套课件CSS的设计与应用网址：电话：4007001307电话：4007001307咨询QQ：1020824692CSS的设计与应用CSS的设计与应用1.将样式表加入到HTML中2.CSS选择符2.CSS选择符3.常见的样式属性和值一、将样式表加入到HTML中一、将样式表加入到HTML中™1.1CSS是什么？™1.2CSS语法™1.2CSS语法™1.3CSS如何应加入到HTML中1.1CSS是什么？1.1CSS是什么？™CSS是用于布局与美化网页的.™CSS是用于布局与美化网页的.™CSS是CascadingStyleSheets的英文缩写,即层叠样式表™CSS语言是一种标记语言,因此不需要编译,可以直接由浏览™CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).™CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必™CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用.css为文件名后缀.™CSS是大小写不敏感的,CSS与css是一样的.™CSS是大小写不敏感的,CSS与css是一样的.™CSS是由W3C的CSS工作组产生和维护的.提示：可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.™CSS的历史:¾1996年W3C正式推出了CSS1.¾1996年W3C正式推出了CSS1.¾1998年W3C正式推出了CSS2.¾CSS2.1是W3C现在正在推荐使用的.CSS2.1是W3C现在正在推荐使用的.¾CSS3现在还处于开发中.¾W3C的CSS主页外观不同内容相同为什么需要CSS样式表为什么需要CSS样式表样式表能实现内容与样式的分离，方便团队开发™样式表能实现内容与样式的分离，方便团队开发美工做样式内容与样式和谐统的完整网页统一的完整网页1.2CSS语法1.2CSS语法基本语法：™基本语法：CSS定义分别由：选择符、属性、属性取值组成格式：selector{property:value}¾选择符可以是HTML中的标记名称，具体下节讲到。¾选择符可以是HTML中的标记名称，具体下节讲到。¾属性和值之间用冒分开，多个属性之间加分号¾CSS是大小写不敏感的,在CSS语法中推荐使用小写¾CSS是大小写不敏感的,在CSS语法中推荐使用小写如：body{color:red}设置了页面为红色的文字例：p{text-align:center;color:red;font-family:宋体}例：p{text-align:center;color:red;font-family:宋体}htmlhead本页面中所有的P标签都应用了此样式headtitle样式规则/titlestyletype=text/cssp{color:red;font-family:隶书;font-size:24px;}选择器签都应用了此样式p{color:red;font-family:隶书;font-size:24px;}/style/headbody用分号隔开bodyh2登鹳雀楼/h2p白日依山尽，/pp黄河入海流。/pp黄河入海流。/pp欲穷千里目，/pp更上一层楼。/p所有的段落都采用P样式，保证风/body/html式，保证风格统一1.3CSS如何应加入到HTML中™在HTML中使用CSS样式的方式一般有三种：¾内联引用、内部引用和外部引用。¾内联引用、内部引用和外部引用。™第一种：内联引用（也叫行内引用）¾就是把CSS样式直接作用在HTML标签中。pstyle=font-size:10px;color:#FFFFFF;使用CSS内联引用表现段落./p特点：内联的样式比其他方法更加灵活，但需要¾特点：内联的样式比其他方法更加灵活，但需要和展示的内容混淆在一起，内联样式会失去一些样式表的优点。™第二种：内部引用（也叫内嵌式）¾使用style标签直接把CSS文件中的内容加载到HTML文¾使用style标签直接把CSS文件中的内容加载到HTML文档内部的head标签里。head文档样式表开始，类样……styletype=text/css/*设置本页面p标签中的文字为以下样式*/类型为CSS样式css注释/设置本页面p标签中的文字为以下样式/p{font-size:10px;样式规则选择器color:#FFFFFF;}/style声明文档样式表结束y/head¾特点是适合用于一个HTML文档具有独一无二的样式时。¾特点是适合用于一个HTML文档具有独一无二的样式时。™第三种：外部引用¾CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.,所以用户不用每次都下载此CSS文件.¾外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.¾外部引用是W3C推荐使用的实现外部引用有两种方式：™实现外部引用有两种方式：¾使用link标签引用CSS¾使用@import导入CSS使用@import导入CSShead……关系类型css文件名linkrel=stylesheettype=text/csshref=mystyle.cssstyletype=text/css@importmystyle2css使用lik标签@importmystyle2.css……./*其它CSS定义*//style使用@import导入CSS使用link标签应用CSS/head多重样式表的叠加多重样式表的叠加™如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。最后定义的为准。™注意：依照后定义的优先，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。样式表和内部样式表之间是最后定义的优先级高。二、CSS选择符二、CSS选择符™2.1HTML选择符™2.2类选择符™2.2类选择符™2.3ID选择符™2.4关联选择符2.5组合选择符™2.5组合选择符™2.6伪元素选择符2.6伪元素选择符2.1HTML选择符2.1HTML选择符™HTML选择符即是HTML标签，用来改变一个指定标签的样式，任何HTML元素都可以是一个CSS的选择签的样式，任何HTML元素都可以是一个CSS的选择符。¾语法：HTML标签名{属性：值}¾语法：HTML标签名{属性：值}{ttidt3}/*当中的选择符是*/p{text-indent:3em;}/*当中的选择符是p*/h1{color:red;}/*当中的选择符是h1*/2.2类选择符2.2类选择符™CSS类选择符--匹配文档中元素E的class属性的属性值为™CSS类选择符--匹配文档中元素E的class属性的属性值为classname的元素¾语法：标记名.类名{属性：值}或.类名{属性：值}¾语法：标记名.类名{属性：值}或.类名{属性：值}¾类选择符名称的定义方式是,.符号，英文dot，后加类名称classname类选择符的定义需要有.符号（.符号标明是类选择符），但是类选择¾类选择符的定义需要有.符号（.符号标明是类选择符），但是HTML文档中的标签的class属性名不能出现.符号，见下面示例：pdarkrow{background:#EAEAEA;}/*设置p标签中class属性为darkrow的*/类选择符定义p.dark-row{background:#EAEAEA;}/*设置p标签中class属性为dark-row的*/.note{font-size:small}/*为note的类可以被用于任何元素*/pclass=darkrow第一段/p!具有类darkrow样式pclass=dark-row第一段/p!–具有类dark-row样式--spanclass=dark-row第二段/span!–没有类dark-row样式--spanclass=note第三段/span!–具有类note样式--类divclass=note第四段/div!–具有类note样式--类选择符应用2.3ID选择符2.3ID选择符™CSSID选择符--匹配文档中元素E的id属性的属性值为™CSSID选择符--匹配文档中元素E的id属性的属性值为idname的元素¾语法：ID名称{属性：值}语法：ID名称{属性：值}¾ID选择符名称的定义方式是，#符号，英文pound，后加ID名称idnameID选择符的定义需要有#符号（#符号标明是ID选择符），但是¾ID选择符的定义需要有#符号（#符号标明是ID选择符），但是HTML文档中的标签的id属性名不能出现#符号，见下面示例¾id属性的特殊之处在于，一个文档中只能有一个元素使用一个IDID选择符定义id属性的特殊之处在于，一个文档中只能有一个元素使用一个ID选择符（与class属性正好相反），id属性可以用来单一地标识一个元素。符定义ID选择符在HTML中的应用#main{text-indent:3em;}/*ID名称main前加上一个#号*/……pid=“main”文本缩进3em/p!在html的p标签中指定id属性mainHTML中的应用pid=main文本缩进3em/p!–在html的p标签中指定id属性main--2.4关联选择符2.4关联选择符™关联选择符也称包含选择符,可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义¾语法：选择符1选择符2...{属性：值}¾语法：选择符1选择符2...{属性：值}™例如：在表格内的链接改变了样式，文字大小为12象素，而表格tablea{font-size:12px}在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。2.5组合选择符2.5组合选择符™组合选择符也叫选择符组，可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义。重复定义。¾语法：选择符1,选择符2,.,..{属性：值}™例如：h1h2h3h4h5h6{l}™例如：h1,h2,h3,h4,h5,h6{color:green}p,table{font-size:9pt}效果完全等效于：p{font-size:9pt}p{p}table{font-size:9pt}2.6伪元素选择符2.6伪元素选择符™伪元素选择符是指对同一个HTML元素不同状态的一种定义方式。例如对于a标签的正常状态、访问状态、选中状态、光标移到超链接文本上的状态，就可以使用伪元素选态、光标移到超链接文本上的状态，就可以使用伪元素选择器来定义。语法：标签:伪元素{属性:值;}¾语法：标签:伪元素{属性:值;}a:link{color:#FF0000;text-decoration:none}/*未访问的链接*/a:visited{color:#00FF00;text-decoration:none}/*已访问的链接a:hover{color:#FF00FF;text-decoration:underline}/*鼠标在链接上*/a:active{color:#0000FF;text-decoration:underline}/*激活链接*/¾提示：a:hover必须被置于a:link和a:visited之后，才是有效的。提示：a:active必须被置于a:hover之后，才