基本概念

一、作用形式

1.通过载入css文件
  • 创建.css样式表文件
  • 在head标签中利用标签载入
    <link rel='stylesheet" type="text/css" href="文件的相对路径">
2.在
<style>
css代码
</style>
3.直接嵌入到元素的style属性中
  • 在元素的style属性中直接嵌入
    <p style="css代码">xxxxx</p>

二、注释

  • 同C语言一样,使用斜杠和星号来注释,/注释内容/
  • 可以进行多行注释,但是不能注释里面嵌套注释

三、规则

  • 由选取器与修饰区组成,选取器通常为元素名称。表示何种元素套用定义的样式规则
  • 修饰区由元素各性质及其值组成,每一个性质定义以分号结尾。分行与空格不是必要的
    selector {
    property1: value1;
    property2: value2;
    property3: value3;
    }
    p {
    color: white;
    background-color: black;
    }
  • 大括号{}圈起来的地方称为区块。括号在css中是特殊记号
  • 单引号或双引号圈起来的内容称为字串

四、群组

  • 若多个html标签具有统一的样式规则,此时可将它们以群组的方式放在一起
  • 选取器由不同的标签组成,以逗号分开
    selector1, selector2, selector3 {
        property1: value1;
        property2: value2;
        property3: value3;
        } 
    p ,div, blockquote {
        color: white;
        background-color: black;
        }

五、继承

  • HTML文件有其文件数(document tree),为根元素,和为其子代,其它内的元素则是的子代,也是的后代
  • 上述特性使得规则具有继承性,例如设置的样式为黄底黑字,则其内的元素都会以黄底黑字呈现,除非有另行定义样式
    body {
    color: black;
    background-color: yellow;
    }
    div {
    color: white;
    background-color: black;
    }
  • 上述样式定义将使内除了
    元素外其它所有元素以黄底黑字呈现,
    元素则以黑底白字呈现

六、盒子模式

  • CSS中每一选取项都是以盒子模式呈现,即CSS定义的样式使HTML文件中的元素都具有边界(margin)、边框(border)、边距(padding)
  • margin是边框与其它元素边框的距离
  • 为区块元素,为行内元素

七、预设样式

单位

一、长度

  • 长度有绝对和相对长度
  • 绝对单元:
    • 英寸(in)
    • 公分(cm)
    • 公尺(mm)
    • 点(pt,1/72in)
    • 活字(pc,12pt)
    • 像素(px)
  • 相对单位
    • 字型预设大小(em)
    • x-height值(ex)

二、百分比

  • 好用的相对单位,设定百分比即是相对于预设大小的百分比

三、URLS

  • 统一资源定位器(uniform resource locator),俗称网址。
  • CSS中写网址,需要用函数化得标记url(),以资源网址作为参数
    body {
    background: url(https://xxxx.png)
    }

四、色彩

  • 三种指定颜色的方式:关键字指定;#号开头的十六进制RGB值;RGB函数rgb(x,x,x),其中x的值为0至255之间的整数
  • 颜色表如下
中文 英文 RGB值 浏览器颜色
栗色或褐紅色 maroon #800000
红色 red #ff0000
橙色或橘红色、橙黄色 orange #ffA500
黄色 yellow ffff00
橄榄色 olive #808000
紫色 purple #8000080
品红色或紫红色 fuchsia #ff00ff
白色 white #ffffff
浅绿色或淡黄绿色 lime #00ff00
绿色 green #008000
深蓝色 navy #000080
蓝色 blue #0000ff
青色或浅绿色 aqua #00ffff
墨绿色 teal #008080
黑色 black #000000
银灰色 sliver #c0c0c0
灰色 gray #808080

选取器

一、类型选取器

  • 直接以HTML元素当作选取器
    body {
    color: white;
    }
  • 上述是HTML的元素

二、全局选取器

  • 使用单一星号*,规则应用在所有HTML元素上
  • 事实上,任何选取项前都可以加星号,但是可以省略

三、后代选取器

  • 选取器写入前代与后代的元素名称,中间以空格分开
    div span {
    color: white;
    }
    /*假设<p>是<div>的子代,<span>是<p>的子代*/

四、子代选取器

  • 写入父代与子代,中间以大于号>分开
    div > p {
    color: white;
    }

五、相接选取器

  • 如下HTML:
    <h1>xxxxxx</h1>
    <h2>xxxxxx</h2>
    <h1>xxxxxx</h1>
  • 上述<h1>、<h2>、<h1>便是紧邻一起,选取器可设定为h1 + h2或h2 + h1,其中h1 + h2的规则作用于紧接<h1>之后的<h2>,而h2 + h1的规则作用于紧接<h2>之后的<h1>

六、属性选取器

  • 依据元素的属性设定样式
    1.element[att]
    2.element[att=val]
    3.element[att~=val]
    4.element[att|=val]
  • 第一种情况,当元素具有某项属性时,该元素就具有设定的模式
    div[title] {
    color: yellow
    }
    /*当<div>中有设定title属性的时候,文字就变成黄色*/
  • 第二种情况,当属性值对应特定值时
    div[title = color] {
    color: white
    }
    /*当<div>中有设定title属性为color的时候,文字就变成白色*/
  • 第三种情况,当属性中用一连串空格分开的文字设定,然后符合一种一项时
    div[title ~= del] {
    color: black
    }
    /*当<div>的title属性中有del的时候,文字就变成黑色*/
  • 第四种情况,属性开头以‘对应值-’的时候
    div[title |= en] {
    color: red
    }
    /*当<div>的title属性以en-开头的时候,文字就变成红色*/

七、类别选取器

  • 只作用在class属性,是一种特殊的属性选取器
    *[class = name] {
    color: white;
    }
  • name为自定义的类别名称,由于很常用,可以直接用小数点加name形式
    .name {
    color: white;
    }
  • 也可设定为元素专有,只需在小数点前加上相应元素名称

八、ID选取器

  • 只作用在id属性,是一种特殊的选取器
    [id = name] {
    color: white;
    }
  • name为自定义的ID名称,可用#号直接加name形式
    #name {
    color: white;
    }
  • 由于每一个HTML元素的id属性都是专属的识别码,因此ID选取器设定的样式也是专属于该元素

九、拟类别选取器

  • 提供元素额外的动态样式选择
  • :first-chile为第一个子代模式
  • :link为未点开过链接样式
  • :visited为点开过的链接样式
  • :hover为鼠标指针指向的样式
  • :active为鼠标左键点击与释放的样式
  • :focus是文字输入指针的样式
  • :lang为语系相关模式

十、拟元素选取器

  • 提供元素额外的样式选择
  • :first-line为段落文字的首行模式
  • :first-letter为段落文字的首字母模式
  • :before为元素开头的模式
  • :after为元素结束的模式

导入其他样式表

  • 利用@import可以导入其他的样式表
  • 导入的样式表地址可以用url()函数,也可以用单引号或双引号内的字符串

元素呈现方式display

笔记参考http://pydoing.blogspot.com/2011/07/css-overview.html 中的CSS教程

最后由 oucb 编辑于2016年05月05日 17:55