3月14日课堂笔记

CSS层叠性、继承性和重要性

CSS层叠性

如果在HTML文件中对于同一个标签可以有多个CSS样式存在，并且这多个CSS样式具有相同的权重值时，就可以利用CSS层叠性
示例代码如下：

p{color:red;}
p{color:green;}
</style>
<p >小红是一个胆小如鼠的女孩。</p>

CSS继承性

它允许样式不仅应用于某个特定HTML标签，而且应用于其后代。
示例代码如下所示：

<style>
p{color:pink;}
</style>
<p>小红是一个<span>胆小如鼠</span>的女孩。</p>

CSS重要性

我们在做网页代码的时候，有些特殊的情况需要为某些样式设置具有最高权值，在某个样式设置后添加!important代表该样式具有最高权值， !important要写在分号“;”的前面。
示例代码如下所示：

<style>
p{color:red ！important;}
p{color:green;}
</style>
<p >小红是一个胆小如鼠的女孩。</p>

样式优先级

CSS优先级即是指CSS样式在浏览器中被解析的权重不同

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况

一般情况下，优先级如下所示：
外部样式<内部样式<内联样式

选择器优先级

元素选择器（1）<类选择器（10）<id选择器（100）<内联样式（1000）

注意：

1. 权值越大越优先
2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置
3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权 高于浏览器所设置的默认样式
4. 继承的CSS 样式权值小于后来指定的CSS 样式
5. 在同一组属性设置中标有“!important”规则的优先级最大

CSS链接属性

链接属性：

在实际开发中，网页中的链接有四种状态：

1. a:link：超级链接的初始状态
2. a:hover：把鼠标放上去时悬停的状态
3. a:active ：是鼠标点击时
4. a:visited：是访问过后的状态

这四种状态的排序有一个有趣的规则——LoVe HAte原则，即按照link、visited、hover、active的顺序进行设置

CSS导航栏

对于任何一个网站来说，拥有一个易用的导航栏都是非常重要的，可以大大的提高用户体验，导航栏其实就是一个超链接的列表，所以使用无序列表ul标签和超链接来实现它再合适不过

图文展示网页设计

img标签
img标签用于定义网页中的图像
示例代码：

<img src="图片路径" alt="图片无法显示的文字"/>

figure标签和figcaption标签
当需要在网页中添加一个插图时，就可以使用figure标签

CSS用于背景设置的常用属性：
background-color：设置背景色
background-image：设置图片背景
background-repeat：设置背景平铺重复方向
background-attachment：设置或检索背景图像是随对象内容滚动还是固定的
background-position：设置或检索对象的背景图像位置，语法为length|length或者position|position
background-size：背景图像的尺寸

CSS背景设置的复合写法：
选择器{
background：background-color||background-image||background-repeat||background-attachment||background-position}
如果使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：transparent none repeat scroll 0% 0%

CSS阴影和渐变

盒阴影：

对象选择器{
box-shadow：投影方式||X轴偏移量||Y轴偏移量||阴影模糊半径||阴影扩展半径||阴影颜色
}

线性渐变：

background-image:linear-gradient([<angle>|<side-or-corner>,]color stop,color stop[,color stop]*);

通过关键词来确定渐变的方向，默认值为top（从上向下），值范围是[left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center]

color stop用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个color stop之间的区域为颜色过渡区

径向渐变：

background-image:radial-gradient(圆心坐标,渐变形状 渐变大小,color stop,color stop[,color stop]*);

圆心坐标用于位置放射的圆形坐标，可设置为形如10px 20px的x-offset,y-offset，或使用预设值center（默认值）

• closest-side或contain：以距离圆心最近的边的距离
• closest-corner：以距离圆心最近的角的距离
• farthest-side：以距离圆心最远的边的距离
• farthest-corner或cove：以距离圆心最远的角的距离

重复渐变

线性重复渐变：
repeating-linear-gradient(起始角度,color stop,color stop[,color stop]*)

径向重复渐变：
repeating-radial-gradient(圆心坐标,渐变形状 渐变大小,color stop,color stop[,color stop]*）