页面的组成:页面=数据(后台技术jsp|asp|.net|php|python)+Html(显示)+CSS(样式)+js(动效)

CSS:层叠样式表
        特点:①CSS和HTML分离
                ②可很好的控制页面的布局(DIV+CSS)
                ③提高网页加载速度
                ④降低服务器的成本
                ⑤呈现一致的效果

CSS引入的 3 种方式:
  ①外部引入

    <link rel="stylesheet" href="main.css"> 
  特点:一个CSS文件可控制多个页面
  易改版、便于维护
  减少代码量、代码简洁规范易于分工协作
  有效利用缓存机制

  相对于单页有垃圾代码
  外部引入中的href属性会给服务器造成请求的压力

  常用于全站
  ②head引入      

 <style>
#main{
background: red;
}
</style>

  特点:速度快,没有服务器请求压力
     相对于外部引入单页代码量少

       不易于改版与维护
       代码较乱不易前后台沟通

     常用于大型互联网首页 如:网易、新浪等

  ③标签内引入
   <div style="background:red;">AAA</div> 
  特点:优先级最高

       冗余代码量多,代码量大
       不易于维护

       个别特殊效果的使用

CSS常用选择器分类
  ①ID选择器
  特点:不能重复;一般只作用于一个节点上;定位某一个节点时最好用ID选择器

  ②类选择器
  特点:作用于多个节点上;当很多节点需要相同的样式时使用

  ③标签名选择器
  特点:作用于多个节点上,比类选择器精简

  ④群组选择器
  特点:多种选择器用逗号隔开,体现一种继承和覆盖的思想;优化代码

  ⑤后代选择器

  以上5种选择器都属于CSS1.0,兼容性最好

  兄弟|子选择器.. ->CSS2.0 ->存在一部分问题,以IE为主

  结构性伪类|动画|过渡 ->CSS3.0 -> 多用于移动端

  Css样式选择器分为4个等级;标签内样式>ID选择器总数> class选择器总数>类型选择器总数
  ID选择器权重值 100
  类选择器权重值 10
  标签选择器权重值 1
  如果权重相同,离标签近的有效

CSS篇章的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 学点css之经验总结篇章

    学css说起来应该有三天左右的时间的,加上之前了解的基础,对css有一点的感性认识了,相应代码有有比较好的把握,现在就通过分享几张照片的形式分享一下我的收获 备注:在Border的外边的部门被称作:o ...

  3. 篇章三:[AngularJS] 使用AngularCSS動態載入CSS

    前言 使用AngularAMD動態載入Controller 使用AngularAMD動態載入Service 上列兩篇文章裡,介紹了如何如何使用AngularAMD來動態載入Controller與Ser ...

  4. [转]CSS 模块

    CSS 模块 如果你想知道 CSS 最近发展的转折点,你应该选择去观看 Christopher Chedeau 在2014年11月的 NationJS 大会上做的名称为 CSS in JS 的分享.不 ...

  5. 软件工程驻足篇章:第十七周和BugPhobia团队漫长的道别

    0x01 :序言 I am a slow walker, but I never walk backwards. 成长于被爱,学着爱人 成长的故事 也是年少的星期六结束的故事 就仿佛我和BugPhob ...

  6. BugPhobia回顾篇章:团队Beta 阶段工作分析

    0x00:序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet yo ...

  7. BugPhobia终章篇章:学霸在线系统Beta阶段展示

    0x00 :序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet y ...

  8. BugPhobia准备篇章:团队Beta阶段准备工作分析

    0x00:序言 To the searching tags, you may well fall in love withhttp://xueba.nlsde.buaa.edu.cn/ 再见,无忧时光 ...

  9. BugPhobia回顾篇章:团队Alpha阶段工作分析

    0x00:序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet yo ...

随机推荐

  1. mac 安装phpredis扩展

    curl -O https://nodeload.github.com/nicolasff/phpredis/zip/master tar -zxf master cd phpredis-master ...

  2. 【20160924】GOCVHelper 图像处理部分(3)

    //根据轮廓的圆的特性进行选择     vector<VP> selectShapeCircularity(Mat src,Mat& draw,vector<VP> c ...

  3. Auty自动化测试框架第五篇——框架内部的调用支持、自动化安装库与配置说明

    [本文出自天外归云的博客园] 本次对Auty自动化测试框架做些收尾工作,由于在scripts文件夹中的脚本会需要调用其他包结构文件夹中的脚本,所以这里需要添加一下框架对于内部脚本间互相调用的支持,这里 ...

  4. 怎样让webservice在浏览器远程浏览时像在本地浏览一样有参数输入框

    从远程客户端访问服务器上的WebService能够显示,但点击调用相关的方法时显示“只能用于来自本地计算机的请求”,这时提醒我们还需要在服务器进行相关的配置才能让其他机器正常访问该WebService ...

  5. Java 中的 static 使用之静态方法

    与静态变量一样,我们也可以使用 static 修饰方法,称为静态方法或类方法.其实之前我们一直写的 main 方法就是静态方法.静态方法的使用如: 运行结果: 需要注意: 1. 静态方法中可以直接调用 ...

  6. hdu3847Trash Removal(凸包)

    链接 这题居然是WF的题, 应属于签到题.. 求一个多边形是否能被一个宽为d的矩形框住. 可以求一下凸包,然后枚举每条凸包的边,找出距离最远的点. #include <iostream> ...

  7. myeclipse/eclipse没有Project Facets的解决方法

    http://www.cnblogs.com/jerome-rong/archive/2012/12/18/2822783.html 经常在eclipse中导入web项目时,出现转不了项目类型的问题, ...

  8. find一些常用参数的一些常用实例和一些具体用法和注意事项。

    find一些常用参数的一些常用实例和一些具体用法和注意事项. 1.使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用.  可以使用某种文件名模式来匹配 ...

  9. mac 文本编辑器 文本编码Unicode utf-8 不适用的问题

    在mac上使用默认的文本编辑器打开下载的xx.txt文件,如果文本是gbk的编码可能会出现 文本编码Unicode utf-8 不适用的打开错误,如下图 解决方式: 文本编辑---偏好设置-----打 ...

  10. PCA理论与实践

    PCA作用: 降维,PCA试图在力保数据信息丢失最少的原则下,用较少的综合变量代替原本较多的变量,而且综合变量间互不相关,减少冗余以及尽量消除噪声.   PCA数学原理: 设 是维向量 想经过线性变换 ...