css

1. 什么是css，css在一个网页中的起到什么作用

CSS(Cascading Style Sheets，层叠样式表) ，用来控制网页在浏览器中的显示外观的声明式语言。

CSS样式定义包括属性和属性值，共同决定网页的外观。
CSS用来定义HTML元素的样式，也可以定义SVG和XML。
CSS规则由包含一组与选择器关联的属性定义。

2. 书写css的三种方式

内联样式：特殊样式用到个别元素时

在标签中使用样式属性

<body>
<div style="color:blue; font_size:15px;">文字</div>
</body>

嵌套样式/行间样式：单个文件需要特殊样式时

head部分定义style标签，使用选择器给标签设置属性
外联样式：样式需要被用到很多页面时

在head标签中引用link标签，href中为需要引入的css文件

<head>
    <meta charset="utf-8" />
    <link href="css/tablestyle.css" rel="stylesheet">
</head>

3.css选择器是什么，样式的权重是怎么样计算的（重要）

CSS选择器

类型、类和ID选择器

/*p元素都是绿色*/
p {
color: green;
}


/*所有class带warning的div都是警告框样式*/
div.warning {
width: 100%;
border: 2px solid yellow;
color: white;
background-color: darkred;
padding: 0.8em 0.8em 0.6em;
}

/*id 为 "customized" 的元素中的文本为 16px 高，字体是 Lucida Grande 和一些用作回落的字体*/
#content {
font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}

标签属性选择器

/*根据一个元素上的某个标签的属性的存在以选择元素的不同方式*/
a[title] {

}

/*根据一个有特定值的标签属性是否存在来选择*/
a[href="https://example.com"]{

}

伪类与伪元素

/*:hover伪类在鼠标指针悬浮到一个元素上的时候选择这个元素*/
a:hover {

}

/*::first-line是会选择<p>中的第一*/
p::first-line {

}

运算符--将其他选择器组合起来，更复杂的选择元素

/* >选择了<article>元素的初代子元素*/
article > p {
color：red
}

样式的权重

1.样式的权值
- 内联样式：style=“” 权值为1000
- ID选择器：#content 权值为0100
- 类、属性和伪类选择器：.warning 权值为0010
- 类型和伪元素选择器：div p 权值为0001
- 通配符、子选择器、相邻选择器：* > + 权值为0000
- 继承的样式没有权值
2.权值的比较

从左到右逐个等级进行比较。

3.！important提升优先级

含有！important的样式优先级高于所有样式，覆盖其他声明。
```
<style>
    p{color:red !important;}
</style>
<p style="color:blue;">我显示红色</p>　
```

CSS选择器和权重

css