css基础

发表于 更新于 分类于 阅读次数： 本文字数： 3.2k 阅读时长 ≈ 3 分钟 
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
body {
  background-color: #b5a789;
  font-family:      Georgia, "Times New Roman", Times, serif;
  font-size:        small;
  margin:           0px;
}

/*
	height messes up the headers in the blog in the articles
	it's only appropriate for the top header.
	add a class (new with blog)
	Affects the 3 #header rules for the main header below
	In HTML: add class="top" to main header in index.html and blog.html
*/

header.top {
  background-color: #675c47;
  margin: 10px 10px 0px 10px;
  height:           108px;
}

header.top img#headerSlogan {
	float: right;
}


div#tableContainer {
	display: table;
	border-spacing: 10px;
}

div#tableRow {
	display: table-row;
}

section#drinks {
    display: table-cell;
    background-color: #efe5d0;
    width: 20%;
    padding: 15px;
    vertical-align: top;
}

/* added section#blog for blog */
section#main, section#blog {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}

aside {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}

footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin: 0px 10px 10px 10px;
  font-size:        90%;
}

h1 {
  font-size:        120%;
  color:            #954b4b;
}

h2 { font-size: 110%; }

.slogan { color: #954b4b; }

.beanheading {
  text-align:       center;
  line-height:      1.8em;
}

a:link {
  color:            #b76666;
  text-decoration:  none;
  border-bottom:    thin dotted #b76666;
}
a:visited {
  color:            #675c47;
  text-decoration:  none;
  border-bottom:    thin dotted #675c47;
}


nav {
    background-color: #efe5d0;
	margin: 10px 10px 0px 10px;
}
nav ul {
	margin: 0px;
	list-style-type: none;
	padding: 5px 0px 5px 0px;
}
nav ul li {
	display: inline;
	padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
	color: #954b4b;
	border-bottom: none;
	font-weight: bold;

/*
	text-shadow: 1px 1px 3px #e2c2c2;
	text-transform: uppercase;
*/
}
nav ul li.selected {
	background-color: #c8b99c;
}

上面这个是「Head first html与css」第二版里第12章的一个css文件实例。第一次看还是有点头大，其实我们只需要理解这些符号的含义就行。

同时要特别注意大小写，这个是对大小写敏感的。

因为css作用域就是整个html文件，所以上面这些符号其实描述的就是html的标签。

  1. body 这个其实就是定义了这个html里<body>………………</body>范围内的所有的定义，同理什么p nav a 这些都是这样的, 只要是html里元素都直接用，不需要加任何的。
  2. #headerSlogan 这种其实定义了 某个标签内id为headSlogan 里的内容。
  3. .top 这种定义了 某个标签内class为top 里的内容。
  4. nav ul li 这种是定义了nav标签内ul标签内li这个标签的内容，是上下级关系。
  5. a,p 这种就是定义了a标签和p这个标签内的内容，两者是同等关系，不存在上下级。
  6. a:link 这种就是定义了标签为a下的伪类link的内容。

这里的伪类是什么意思？都包含哪些呢？查了一下 https://zhuanlan.zhihu.com/p/19743782 这里说的还是很明白的，比我自己总结的要好。

  1. link 此时，链接就在那儿等着用户点击。
  2. visited 用户此前点击过这个链接。
  3. hover 鼠标指针正悬停在链接上。
  4. active 链接正在被点击（鼠标在元素上按下，还没有释放）。