0%

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
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 链接正在被点击(鼠标在元素上按下,还没有释放)。