第十四天学习：CSS基础

关键字：CSS基础

晨跑计划：

学习计划：

  • CSS简介
  • CSS基础语法
  • CSS派生选择器
  • CSS id选择器
  • CSS类选择器
  • CSS属性选择器

学习记录：

  • CSS概述
    • CSS指层叠样式表
    • 样式定义如何显示HTML元素
    • 样式通常存储在样式表中
    • 把样式添加到html4.0中，是为了解决内容与表现分离的问题
    • 外部样式表可以极大提高工作效率
    • 外部样式表通常储存在CSS文件中
    • 多个样式定义可层叠为一
  • CSS语法：
    • CSS规则由两个主要部分构成：选择器，以其一条或多条声明
      • 每条声明由一个属性和一个值组成
      • 如果声明中只有一个特性-值对时，则它的末尾不需要分号，但是，由于一个声明可以由多个特性-值对组成，并且每一个特性-值对必须由分号隔开，所以最好在编写每一个规则之后都添加一个分号，以便后面添加另一条规则；如果忘记添加分号，则后面添加的特性-值对将会被忽略。
      • 如果值为若干单词，则要给值加引号
      • 应该在每一行只描述一个属性，这样可以增强样式定义的可读性
  • 样式表和html文件相关联方法：
    • 嵌入式：
      • 在html页面内部定义的CSS样式表，叫嵌入式CSS样式表，也就是在html文档的head部分中，使用style便签并在标签中定义一系列CSS规则
      • 语法：
        • <head> 
          　　<style type="text/css"> 
          　　<!-- 
          　　　　...... 
          　　          --> 
          　　</style> 
          　　</head> 
    • 链接式：
      • 外部CSS样式表是一个以.css为后缀的外部文件，定义一个外部样式表可以应用于多个页面。在html页面中使用link标签，可以将外部的CSS样式表连接进来
      • 语法：<link rel="stylesheet" href="*.css” type="text/css">
      • 参数：rel属性表示样式表将以何种方式与html文档结合。rel取值：stylesheet，表示指定一个外部的样式表。*.css是单独保存的样式表文件
      • link必须附带rel、type和href属性
        • rel属性是必需的的属性，用于指明包含链接的文档和链接文档的关系，用于操作样式表的关键值是stylesheet
        • type属性指明将链接到的文档的MIME类型，这里由于处理的是CSS样式表，因此MIME的类型是text/css
        • href属性指定将链接到我文档的URL，这个值可以是绝对的或者相对的
    • 行内样式：
      • 在html特定的标签中定义的CSS样式表，常用的html标签主要是body的一些元素，如：p，h2，ul等
      • 如：<p style="color:#ff0000; font-style: italic; ">样式表</p>
    • 导入式：
  • 注释：可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义，注释是不显示的，CSS注释以“/*”开头，以“*/”结尾
  • 继承及其问题
    • CSS的继承是指被包在内部的标签将拥有外部标签的样式性质，继承性最典型的应用通常发挥在整个网页的样式预设，即整体布局声明。而需要指定为其他样式的部分设定在个别元素里即可达到效果，这项特性可以给网页设计者提供更理想的发挥空间。
    • 但同时继承也有很多规则，应用的时候容易让人迷惑。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代
    • 可继承的属性：
  • CSS派生选择器
    • 通过依据元素在其位置上的上下文关系来定义样式，也叫上下文选择器
  • CSS id选择器
    • id选择器可以为标有特定id的html元素指定特定的样式
    • id选择器以“#”来定义
    • id选择器区分大小写，不引用class属性
  • CSS类选择器
    • 在CSS中，类选择器以一个点号显示
    • 类选择器允许一一种独立于文档元素的方式来指定样式
    • 要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器
  • CSS属性选择器
    • 对带有指定属性的html元素设置样式
    • 只有在规定了!DOCTYPE时，IE7和IE8才支持属性选择器。

扩展阅读：

  • CSS限制：
    • 浏览器支持的不一致性
    • CSS没有父层选择器，无法提供元素的父层或继承性
    • 不能明确地指定继承性
    • 垂直控制的局限，元素的水平放置普遍地易于控制
    • 显示的缺乏，目前的CSS没有办法明确又简单的显示属性值
    • 缺乏正交性，同样的效果可以用不同的属性来完成，这经常会造成困扰
  • CSS值和单位总结：
  • CSS之派生选择器的三种分类
    • 后代选择器、子选择器、相邻兄弟选择器
  • 十分钟搞定CSS选择器

问题的记录与解答：

  • 同一个html元素被多个样式定义时，会使用哪个样式？
    • 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中
      • 浏览器缺省设置
      • 外部样式表
      • 内部样式表（位于head标签内部）
      • 内联样式（在html元素内部）优先级别最高
  • 类选择器和id选择器的区别
    • id选择器只能在文档中使用一次
    • id选择器不能结合使用，因为id属性不允许有以空格分隔的词列表
    • id能包含更多的含义，可以独立于元素来选择id
  • 如何正确使用选择器？
  • 选择器的优先级别：
    1. 在属性后面使用！important会覆盖页面内任何位置定义的元素样式
    2. 作为style属性写在元素内的样式
    3. id选择器
    4. 类选择器
    5. 标签选择器
    6. 通配符选择器
    7. 浏览器自定义
    8. 同一级别中后写的会覆盖先写的样式
posted @ 2016-07-19 16:02  桂  Views(127)  Comments(0)    收藏  举报