（方案）3、CSS核心基础.ppt

直接在HTML的标记中使用style属性，然 后将CSS代码直接写在其中。 3.1 行内样式 html head title页面标题/title /head body p style=“color:red; text-decoration:underline; 正文内容1/p p style=“color:red; text-decoration:underline;正文内容2/p p style=“font-size:25px; font-weight:bold;正文内容3/p /body /html 此方式尽量少使用 优选文档 * 将CSS样式写在head与/head 之间，并且用style和/style标记进行声明。 3.2 内嵌样式 html head title页面标题/title style type=text/css P { color:#0000FF; text-decoration:underline; font-weight:bold; font-size:25px; } /style /head body p这是第1行正文内容……/p p这是第2行正文内容……/p /body /html （或外部样式表） 优选文档 * 实际应用中使用频率最高、最实用，它将 HTML页面本身与CSS样式分离为两个或多个文件。 3.3 链接样式 html head title页面标题/title link href=07-07.css type=text/css rel=stylesheet /head body h2CSS标题/h2 p这是正文内容……/p h2CSS标题/h2 p这是正文内容…… /p /body /html h2{ color:#0000FF; } p{ color:#FF0000; text-decoration:underline; font-weight:bold; font-size:15px; } 优选文档 * html head title页面标题/title link href=07-07.css type=text/css rel=stylesheet style type=“text/css” p{ color:blue;} /style head body p style=“color:gray;”观察文字的颜色/p /body /html 内嵌式 行内样式 多重样式表 优选文档 * 3.5 各种方式的优先级问题 行内 样式 嵌入 样式 建议：在网站建设中，最好只使用其中的1-2种，这样既有利于后期的维护和管理，也不会出现各种样式“冲突”的情况，便于设计者理顺设计的整体思路。 优选文档 * 伪类和伪元素 伪类是一种特殊的选择器，用来指定一个或与其相关的选择符的状态。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 结构如下： 选择器：伪类{属性：值} 如：a.two:link{color:red;} 注意：这里的伪类不是任意用户定义的字符；而是已经预先定义好的。 优选文档 * W3C组织定义的标准伪类 ：link 未被访问过的链接 ：visited 已访问过的链接 ：hover 鼠标经过时对对象元素表现的样式 ：active :focus 为焦点元素加上指定样式 :first-child 将特殊的样式添加到元素的第一个子元素 :lang 定义指定的元素中使用的语言 注意：按照a:link， a:visited， a:hover， a:actived的顺序书写 优选文档 * 伪元素 :first-letter 将样式应用到文本的首字符 :first-line 将样式添加到文本的首行 :before 在某个元素前插入内容 :after 在某个元素后插入内容 优选文档 * 优选文档 * （1）font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。具体如下： CSS字体样式属性 优选文档 * 1、CSS字体样式属性 （2）font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码： 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。