CSS工作原理学习(1)

首先做个备注,css的注释是/* */,html的注释时<!-- -->

另外sublime中添加了可以直接有模版的插件,sublime tmpl,可以直接选择html等选项就会新建成模版。可以直接在package control里面添加,也可以点这里

1.为文档添加样式的三种方法:

  • 行内样式:写在特定html标签的style属性里的。 <p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS styling to this paragraph, you override the default styles.</p>只影响所在标签,总覆盖嵌入样式和链接样式。
  • 嵌入样式:嵌入的css样式放在html文档head元素中。应用范围式仅限于当前页面,页面样式会覆盖外部样式表中的样式,但是会被行内样式覆盖。
  • 链接样式:用样式表,时一个扩展名为.css的文本文件。在用的时候要加一行类似代码: <link href="styles.css" rel="stylesheet" type="text/css" />作用范围可以时整改网站。还有在样式表中链接其他样式表的方法,用@import指令。必须出现在样式表中其他样式之前,否则不会被加载。

在样式表里面的样式,不用<style>标签,否则不会被浏览器加载。

2.css规则命名惯例

选择符 声明 属性 值

  • 多个声明包含在一条规则里。 p {color:red; font-size:12px; font-weight:bold;} 最好把值后面的分号带上,这样在继续添加声明的时候就不会忘记了。
  • 多个选择符组合在一起。 h1, h2, h3 {color:blue; font-weight:bold;} 特别注意选择符之间的逗号。
  • 多条规则应用给一个选择符。 h1, h2, h3 {color:blue; font-weight:bold;}h3 {font-style:italic;}

3.选择符

上下文选择符

descendant combinator selector,用空格分隔的标签名(分组选择符是逗号隔开的)。用于选择作为制定祖先元素后代的标签。要知道元素之间的关系,要知道文档对象模型和其对应页面中盒子嵌套关系。

article p {font-weight:bold;}

是只有article后代的p元素才会应用后面的样式。

article h1 em {color:green;}

em必须有个祖先是h1,进而还要有个祖先时article,才能应用后面的样式。

特殊的上下文选择符:

  • 子选择符>:section > h2 {font-style:italic;},标签1必须是标签2的父元素,父元素之外的其他祖先元素都不行的。
  • 紧邻同胞选择符+:h2 + p {font-variant:small-caps;},标签2必须紧跟在其同胞标签1的后面。
  • 一般同胞选择符~:h2 ~ a {color:red;},标签2必须跟在其同胞标签1后面,也不一定是紧跟。
  • 通用选择符:这个按shift+8打出来。它匹配任何元素,会导致所有元素的文本和边框都变成绿色。p * {color:red;},这是p所包含的所有变红色。section * a {font-size:1.3em;},这个是section的孙子元素应用。

真是醉了,学到这里。这肯定用起来无比复杂,考虑文档层次结构什么的真是,心累。还是赶紧来看ID和类选择符吧。

类属性与ID属性

类属性:就是class属性,body 标签中包含的任何 HTML 元素都可以添 加这个属性。

  • 类选择符:.specialtext {font-style:italic;},就是前面那个点,没有空格。
  • 标签带类选择符:p.specialtext {color:red;},指定了带有这个类的段落。p.specialtext span {font-weight:bold;},更加精确地指定带有类的段落的span定义。
  • 多类选择符:<p class="specialtext featured">Here the span tag <span>may or may not</span> be styled.</p>,像这样添加多个类,要用空格分开的。.specialtext.featured {font-size:120%;},没有空格,空格就是祖先/后代关系了。

ID属性:与class属性都用法一样,不过就是把点换成#。<p id="specialtext">This is the special text.</p>,像这样。
ID也可以用在页内导航链接中。<a href="#bio">Biography</a>,href的属性值是以#开头的,表示链接的目标在当前页面中。

  • 什么时候用ID:其用途时在页面中唯一地标识一个元素。同一个页面中的每一个ID属性都必须有独一无二的值。
  • 什么时候使用类:类的目的时为了标识一组具有相同特征的元素。
  • 继承和上下文选择符能让不同的标签共享样式,从而降低你需要编写和维护的css量。

属性名选择符

基于html标签的属性选择元素。
img[title] {border:2px solid blue;}
img[title="red flower"] {border:4px solid green;}
<img src="images/red_flower.jpg" title="red flower" alt="red flower" />

上面是属性名选择符,下面是属性值选择符。


抄书的时候,才觉得集中。就是这样。

这是今天的作业链接,就是用了各种选择符更改了一些颜色,嘿嘿。马上学了伪类之后就可以给链接做不同状态了,嘻嘻。http://7xipcz.com1.z0.glb.clouddn.com/20150501/css_2.3.html

2015-05-01 22:1449