CSS基础学习

问题:

  1. css的作用
  2. css的原理
  3. css的使用,针对每个部件配置
  4. 布局
  5. 字体,大小
  6. 颜色

语法:

{declaration1; declaration2;...;declarationN} 
1
2
示例:
 h1 {color:red;font-size:14px}

6.颜色:

颜色有三种方法,名称,十六进制,RGB

1
2
3
4
5
p {color:red}
p {color:#ff0000;}
p {color:#f00;}
p {color:rgb{255,0,0}}
p {color:rgb{100%,0%,0%}}

p {font-family:”sans serif”; font-size:14px} # 值为若干单词,则需要加引号

  1. 分组:

h1, h2, h3, h4, h5, h6 {
color:green;
}

  1. 继承及其问题:
    如果定义了body,则body中的的元素都采用该样式,如果想某个子特殊,则单独定义就可以了

  2. 派生选择器:
    l1 strong {
    font-style:italic;
    font-weight:normal;
    }

  3. 我是斜体字,因为Strong再li中

  4. id选择器,以”#”来定义: 

1
2
#red {red:red;}
<p id="red">红色段落</p>

  1. id选择器和派生选择器,以#开始

    1
    2
    3
    4
    5
    #sidebar p {
    	font-style:italic;
    	text-align:right;
    	margin-top: 0.5em;
    }

  2. css类选择器,以.开始 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.center {text-align:center} 
所有center类的html元素均居中
<h1 class="center">
居中的内容
</h1>
<p class="center">
居中的段落
</p>
class派生选择器		
.fancy td {
	color: #f60;
	background:#666;
}
示例:
<div class="fancy">
	..
	<td>内容</td>
	..
</div>
td.fancy {
	color:#f60;
	background:#666;
}
示例:<td class="fancy">
  1. css属性选择器,对带有制定属性的html的元素设置样式.用[]包括
    只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
示例:		
[title]
{
	color:red;
}
<h2 title="Hello world"></h2>
属性值选择器
[title=W3School]
{
border:5px solid blue;
}
<img title="W3School" src="/i/w3school_logo_white.gif" />	
属性和值多个值
下面的例子为包含指定值的title属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello]{color:red;}
下面的例子为带有包含指定值的 lang属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en]{color:red;}
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}
CSS 选择器参考手册
选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

外部样式表:



样式表mystyle.css
hr {color: sienna;}
p {margin-left:20px}
body {background-image:url(‘images/back40.gif’)}

不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：


This is a paragraph

###标签:

文字相关:

color:black
font-family:arial
font-size
text-align:center, right
font-weight:normal
font-style:italic

布局相关:

background:#fff
margin: 0;
padding: 0;
margin-top: 0.5em;
padding:10px;