当前位置:首页 » 网站运营 » 正文

CSS层叠样式表基础(一)

2016年06月13日 09:28:03  分类: 网站运营  参与: 365人  点这评论

什么是CSS样式表
       层叠样式表
       CSS:Cascading Style Sheet
       一种标记语言,不需要编译,可以直接由浏览器执行
       主要用于布局和美化网页
       为什么使用CSS样式表
       1.实现内容和样式的分离,便于团队开发
       美工做样式
       程序员写代码
       内容与样式和谐统一的完整网页
       2.实现样式复用,提高开发效率
       同一网站共用同一样式,确保网站统一的风格
       3.页面的精确控制,实现精美、复杂页面
       更利于搜索引擎的搜索
       CSS的用途
       外观美化
       布局、定位

CSS层叠样式表基础(一)1

CSS基本语法
       选择器(即修饰对象){
    对象的属性1: 属性值1;
    对象的属性2: 属性值2;
  }

       多条样式规则(声明)
       1.多个属性间用分号分隔
       2.用冒号声明对应属性值

CSS层叠样式表基础(一)2

CSS样式表分类
       1.内联样式
       在HTML标签中直接使用style属性设置样式
       <td style="font-size:30px; ">封面回顾</td>
       红色部分样式规则
       2.内部样式表
       也称内嵌样式,包含在<head>和</head>之间的style标记内,适用于单个页面文件中同一类型标记的样式

<style type="text/css">
body {
   font-size:12px;
   line-height:25px;
}
</style>

       红色部分样式规则
       CSS样式表选择器分类
       外部样式表
       单独的一个CSS文件
       控制网站的整体风格
       页面通过链接方式把CSS文件中的样式应用到页面
       <link href="style.css " rel="stylesheet"type="text/css" />
       href 链接的CSS文件路径
       rel(relationship)定义连接的文件和HTML文档之间的关系

@charset "utf-8";
body {
   font-size:12px;
   line-height:25px;
}

       单独的CSS文件内容
       选择器分类
       1.标签选择器(元素选择器)

<head>
<style type="text/css">
      li  {
         font-style:italic;
         font-size:28px;
         font-family:隶书;
      }
</style>
</head>
<body>
  <ul>
    <li>家用电器</li>
    <li>各类书籍</li>
    <li>手机数码</li>
    <li>日用百货</li>
  </ul>
</body>

CSS层叠样式表基础(一)3

2.类选择器
       类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
       任何标签都可以应用类选择器样式
       提高代码利用率,提高效率,减少页面代码量
       样式的叠加与继承

       类名 {
       属性名1:属性值1;
       属性名2:属性值2;
       ……
}

 

<head>
<style type="text/css">
      li{
         font-style:italic;
         font-size:28px;
         font-family:隶书;
      }
      .size { font-size:10px; }
</style>
</head>
<body>
     <ul>
      <li>电视</li>
      <li>电风扇</li>
      <li>电冰箱</li>
      <li class="size">DVD播放器</li>
    </ul>
  </body>

CSS层叠样式表基础(一)4

类选择器样式效果

 

<head>
<style type="text/css">
  .one{ font-size:30px; }
  .two{ font-style:italic; }
</style>
</head>
<body>
  <p class="one">应用类选择器one</p>
  <p class="two">应用类选择器two</p>
  <p class="one two">应用类选择器one和two</p>
  <p>没有使用样式</p>
</body>

CSS层叠样式表基础(一)5

应用2种类选择器
       不冲突的样式继承均显示样式效果
       3.ID选择器
       同id 属性只能在每个 HTML 文档中出现一次。


       #ID标识名{
           属性名1:属性值1;
           属性名2: 属性值2 ;
           ……
}

 

<head>
<style type="text/css">
      #one{ font-size:30px; }
      #two{ font-style:italic; }
      #three{ font-family:隶书; }
</style>
</head>
  <body>
    <p id="one">漩涡鸣人</p>
    <p id="two">卡卡西</p>
    <p id="three">佩恩</p>
  </body>

CSS层叠样式表基础(一)6

 

来源:章晓雷博客(微信/QQ号:894331553),转载请保留出处和链接!

本文链接:http://www.zxlblog.com/reed/70.html

本文标签:CSS层叠样式表  

章晓雷博客版权声明:

①凡注明来源的文章,版权均为本站独家所有,转载需注明“来源:章晓雷博客(www.zxlblog.com)”。

②本站注明其他来源的稿件,转载请注明原文来源地址。如若产生纠纷,本站不承担其法律责任。

③ 如本站转载稿件涉及版权等问题,请作者联系博主QQ894331553及时删除或者做相关处理。

<< 上一篇 下一篇 >>

  • 评论(7)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关文章

最近更新

Tags

好文分享

热评文章

文章归档

博主空间 | 博主微博 | 原创投稿 | 侵权声明 | 网站地图

Copyright © 2015-2016 ZXLBLOG.COM 版权所有 京ICP备15052414号-1