HTML、CSS知识点,面试开发都会需要--No.2 CSS

时间:2023-03-09 06:50:43
HTML、CSS知识点,面试开发都会需要--No.2 CSS

No.2  CSS


1.选择器类型

选择器类型包括:type、class、id。

2.引用外部css文件

使用link元素,添加rel和href属性:<link rel="stylesheet" href="main.css" />。

3.重置浏览器的css样式

(1)为什么重置: 每个浏览器都有自己默认的选择器样式设置,例如元素的margin和padding。为了保持网站的统一性,我们需要重置CSS样式。

(2)怎样重置:把下面的css样式添加到定义的css文件中去,需要放在css文件的最前面位置。

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/ html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:;
padding:;
border:;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height:;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing:;
}

4.CSS级联

   (1)选择器优先权:type<class<id。例如定义html元素<p id="food">...</p>的样式:

#food {
background: green;
}
p {
background: orange;
}

  即使type选择器放在id选择器后面,但id选择器权重高于type选择器。

  (2)结合型选择器:被结合的选择器器应该从右往左读,最右边的选择器作为主选择器。

  (3)案例分析:

.hotdog p {
background: brown;
}
.hotdog p.mustard {
background: yellow;
}

第一个结合选择器,主选择器是类型p,选择class为hotdog元素下的所有p元素。第二个结合选择器,主选择器是type为p并且class类型为mustard的元素,结果是选择class为hotdog下,类型为p并且class为mustard的元素。

(4)降低选择器的权重方法:通过多层的class来设置样式。案例如下:

<!-- HTML代码 -->
<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>
<!-- CSS样式 -->
.btn {
font-size: 16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}

5.颜色

(1)颜色表示方式:关键字、十六进制标记、RGB、HSL值。

(2)关键字:直接使用关键字表示颜色,像red、blue等。关键字可参考:http://www.w3.org/TR/css3-color/

(3)十六进制:如果是6位标记,前两位表示Red、中间两位表示Green、最后两位表示Blue。

(4)RGB:用三个数字表示颜色,三个数字分别表示red、green、blue的值。例如:background: rgb(128, 0, 0)。

(5)RGBa:和RGB相似,后面多了一个透明度参数,a表示alpha透明度,透明度的值范围是0到1的小数。

6.长度单位

(1)绝对长度:用像素表示,单位为px。

(2)相对长度:Percentages百分比,例如width: 50%。

(3)em相对长度单位:相对于对象内文字的font-size,如果未设置font-size则相对于浏览器的字体默认尺寸,经常用于spacing、margin和padding。

7.CSS3属性使用

(1)加前缀保证兼容性:在css3成为标准之前,很多浏览器都开始支持css3属性,但由于当时css3还不是标准,所以运营商都通过添加前缀的方式来支持。例如box-sizing属性的设置:

div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

(2)各个运营商前缀:

Chrome(谷歌浏览器) :-webkit-
Safari(苹果浏览器) :-webkit-
Firefox(火狐浏览器) :-moz-
IE(IE浏览器) :-ms-
Opera(欧朋浏览器) :-o-