《css基础系列教程基础语法2.pdf》由会员分享,可在线阅读,更多相关《css基础系列教程基础语法2.pdf(3页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、css 基础系列教程:基础系列教程:CSS 基础语法基础语法 2 作者:作者:DIVCSS8 在上一节中我们讲到了自定义在上一节中我们讲到了自定义 ID 选择器,为了以后选择器,为了以后 JS 获取内容方便,所以说我们只能使用获取内容方便,所以说我们只能使用一次。一次。如果如果 CSS 代码想多次重复使用怎么办呢。那么就时候就可以用自定义的代码想多次重复使用怎么办呢。那么就时候就可以用自定义的 class 选择符。选择符。我们看一个下面这个示例:我们看一个下面这个示例: class 选择器示例 .diyi li acolor:#f00;项目编号 1 项目编号 2 项目编号 2 项目编号 3 我
2、不会被改变 那么这两个项目列表都会发生变化。并且还要注意的就是那么这两个项目列表都会发生变化。并且还要注意的就是 CLASS选择符可以一次使用多个。选择符可以一次使用多个。在每个名称后边加一个空格即可,如在每个名称后边加一个空格即可,如 class=”diyi clear”这样就可以了。这样就可以了。还有一种选择符就是通用选择符是可以针对所有 HTML 标签应用如下:*padding:0px;margin:0px;这个我准备放到布局时在详细讲解。咱们一直使用的都是内嵌样式,我们现在学习一个新的引入 CSS 样式的方式,也是我们日后经常用的链接样式。使用链接样式有什么好处呢:1、为了 SEO 方
3、便,如果直接使用内嵌样式。那么会造成蜘蛛在爬行的时候,要爬行很多CSS 代码 2、如果我们的样式需要针对网页中的多个文件应用。而内嵌明显不太适合,这时候就得用到我们讲的链接样式了。语法格式:最关键的是 href 需要大家改成自己写的 CSS 样式文件 总结:通过使用链接的方式这样就实现了我们之前所说的 HTML 与 CSS 的分离。如果想更换网页的风格,只需要更换 CSS 样式文件即可。大家可以百度搜一下 CSS 禅意花园。Html 是固定的通过更换的 CSS 样式文件,可以看到不同的风格的网页。也是新手学习 CSS 推荐看的编码,样式文件。样式文件的优先级:行内样式 内嵌样式 链接样式 导入
4、样式 咱们通过一个实例认识一下 divcss8 示例 pcolor:#666;font-size:24px; Divcss.css 文件 pcolor:#0f0;font-weight:bold;总结:行内样式,内嵌样式以及链接样式分别对 P 中的实现了样式的更改。由于行内样式的优先级比较高所以最终结果显示红色。大家还需要注意的是后面的样式会覆盖上边的样式。CSS 选择器命名选择器命名 CSS 选择器命名要有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法,我们下边分别看一下:骆驼命名法:骆驼命名法:指混合使用大小写字母来构成,也是为了以后工作中有一个团队交流中比较方便。它的特点如下:第一个单词以
5、小写字母开始;第二个单词的首字母大写或每一个单词的首字母都采用大写字母,例如:myFirstName 帕斯卡(帕斯卡(pascal)命名法:)命名法:此 CSS 命名规则与骆驼命名法类似。只不过骆驼命名法是首字母小写,而帕斯卡命名法是首字母大写 匈牙利命名法:匈牙利命名法:名称前面加上一个或多个小写字母作为前缀名称前面加上一个或多个小写字母作为前缀 red_navMenu 以上命名并不是说特定使用哪一个。主要是让你写的 CSS 代码得让别人一看显得很专业。很明白。在下边我给大家分享一些网上总结好的命名规范。大家学了这么多选择符了。给大家考试一下:请大家说出如下选择符会选择什么对象。答案会在下篇课程中公布。问题:1、h1.p1 2、#content h1 3、h1.p1,#content h1 4、h1#content h2