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

Posted 2020-07-09 席超

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: 0;
    padding: 0;
    border: 0;
    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: 1;
}
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: 0;
}

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-