Poechant's CSS Learning Note (诗商的CSS学习笔记)

原创 2011年10月20日 01:51:28

To be continued (未完待续)...

1. Internal CSS style:

<style type="text/css">



2. External CSS style:

<link type="text/css" rel="stylesheet" href="mycss.css" />

Notice that <link> is an empty element.

3. Comment in CSS:


4. CSS selector

4.1. class selector:

If you have created a <p> element with "comment" class, then you chould use "." to specify this class as "p.comment". This selector could select all paragraphs in the "comment" class.

An element can be in more than one class, such as <p class="comment code article">.

4.2. id selector:

4.3. inherit selector:

5. Properties in HTML elements:

The values of these properties could be px, keyword(color, font-size), % and so forth.

background-color: This property could control the background color of an element.(背景颜色)

- kerword: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Sliver, Teal, White, Yellow.

- %: rgb(80%, 40%, 0%)

- number: rgb(204, 102, 0)

- #number: e.g. #cc6600

background-image: You can use this property to put an image behind an element.(背景图片)

border: This property puts a border around an element. You can have a solid border, a ridged border, a dotted border.(边框)

- numberpx

- enum: dotted

- color


color: Use color property to set the font color of text elements.(字体颜色)

- color

font-family: (字体)

- enum: Andale Mono, Arial, Geneva, Georgia, sans-serif, Times, Times New Roman, Trebuchet MS, Verdana


- px

- %

- em, for example 1.2em, this says that the font size should be scaled by 1.2.

- keyword: xx-small, x-smal, small, medium, large, x-large, xx-large.

font-style: Use this property for italic or oblique text.

- keyword: italic, oblique

font-weight: This property controls the weight of the text.(字体粗细)

- enum: bold, normal

letter-spacing: This property controls the spacing between letters.(字间距)

line-height: This property sets the space between lines in a text element.(行间距)

list-style: This property lets you change how list items look in a list.(列表项样式)

margin: You can set how much space between the edge of the element and its content.


- e.g. 20%


- e.g. 20%

text-align: You can set this property as left, right or center.(对其方式)


- underline

6. Some keypoints

6.1. What if multiple selectors select an element?

There are multiple selectors that match this element and define the same color property. That's what we call a "conflict". Which rule breaks the tie? Well, if one rule is more specific than the others, then it wins.

6.2. If you had an element that belonged only to the greentea class there would be an obvious winner: the p.greentea selector is the most specific, so the text would be green. But you have an element that belongs to all three classes: greentea, raspberry, and blueberry. So, p.greentea, p.raspberry, and p.blueberry all select the element, and are of equal specificity. What do you do now?

You choose the one that is listed last in the CSS file. If you can't resolve a conflict because two selectors are equally specific, you use the ordering of the rules in your style sheet file. That is, you use the rule listed last in the CSS file (nearest the bottom). And in this case, that would be the p.blueberry rule.

6.3. What will happen if there is an error in my CSS?

If you have errors in your CSS, usually what happens is all the rules below the error are ignored.

6.4. font-family 中可以指定多个字体,如果不存在第一个字体,就会使用第二个,依次类推下去。

7. CSS validator


版权声明:本文为博主原创文章,未经博主允许不得转载。合作请联系微信 sinosuperman。 http://blog.csdn.net/Poechant/article/details/6889399


  • qq_34477549
  • qq_34477549
  • 2016年10月11日 10:27
  • 1951

css note

1.     属性 1.1.     定位 1.1.1.    position(static, relative, absolute, fixed, center, page, sticky) ...
  • Iamduoluo
  • Iamduoluo
  • 2015年03月24日 18:02
  • 608

HTML, CSS学习笔记(完整版)

第一章 div布局 前几课内容 .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#...
  • u011925500
  • u011925500
  • 2014年10月02日 00:28
  • 4676


第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师web网站架构师自己创业转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才...
  • qq_36368586
  • qq_36368586
  • 2016年11月20日 16:53
  • 4330

JavaFX文档(5)开始JavaFX之旅——3 使用CSS

声明:如需转载,请注明出处:http://blog.csdn.net/originer 原文出处:
  • originer
  • originer
  • 2014年08月02日 16:47
  • 2262

Eric Meyer’s “Reset CSS” 2.0

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */...
  • SueJun
  • SueJun
  • 2017年06月15日 21:49
  • 441


1) 网页布局是网页制作的基础。(DIV+CSS)    流式布局  浮动布局  绝对定位布局    2) 块级元素和行级元素的区别:           块级元素:div, ul, l...
  • baidu_21763215
  • baidu_21763215
  • 2015年11月28日 19:11
  • 227


1、盒子模型2、div+css整体布局盒子模型的相关属性 margin(外边距/边界) border(边框) padding(内边距/填充 )水平居中和垂直居中 水平居中包含两种情况: 块级...
  • muyunlingxuan
  • muyunlingxuan
  • 2017年06月29日 16:34
  • 138


  • amber053
  • amber053
  • 2017年11月17日 14:08
  • 39


注:如果早点了解那率性的你或者晚一点遇见成熟的我。学计算机的应该早点确定自己的技术方向,一定要有一个擅长的能够用来吃饭的,其他的能掌握多少就是多少,像我这样的什么都学,什么都不知道没什么卵用的。 1....
  • u013047859
  • u013047859
  • 2016年05月23日 22:56
  • 868
您举报文章:Poechant's CSS Learning Note (诗商的CSS学习笔记)