第二次系统学习css
程序员文章站
2022-06-01 08:37:46
...
今天对于css又重新系统性的学习了一遍，以下是在今天学习过程中所记录的一些笔记。
下面是记录一些之前没有学到过得css样式
- box-shadow：h-shadow v-shadow blur（模糊程度） spread color inset
E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是：
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}-
组合选择器
- 后代选择器（空格）只要是后代即可
- 子选择器（>）必须是直接子元素
- 相邻选择器（+）在元素的旁边，结构层次相同
- 通用选择器（~）层级相同就行
-
存在和值属性选择器
- nth-of-type（2n）：偶数项改变
- nth-of-type（2n+1）：奇数项改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
.wrapper > div:nth-of-type(2n-1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-of-type(2n+1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落元素</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
</div>
</body>
</html>
4. 同规则集选择器：
相同规则集一次性作用于多组选择使用“，”隔开
5. RGBA，其中的A表示透明度，值可取（0-1）之间
6. 透明度也可以使用opacity来表示
7. overflow：
- auto 隐藏 但是有滚动条可以查看内容
- hidden 隐藏
- visiable 显示 显示在盒子的外边
8. background-clip ：设置元素的背景（背景图案或者颜色）是否延伸到边框下面
background-clip参数：
border-box
背景延伸到边框外沿（但是在边框之下）。
padding-box
边框下面没有背景，即背景延伸到内边距外沿。
content-box
背景裁剪到内容区 (content-box) 外沿。
9. outline：1px（宽度） solid（样式） white（颜色）
10. linear-gradient
Formal grammar: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
/*例句*/
linear-gradient( 45deg, blue, red ); /* 渐变轴为45°，从蓝色渐变到红色 */
linear-gradient( to left top, blue, red); /* 从右下到左上、从蓝色渐变到红色 */
linear-gradient( 0deg, blue, green 40%, red ); /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束*/- rem是相对与html而言的高度
其中规定rem为20px
原因：chrome最小字体大小为12px，所以rem规定最小为20px。
相对于em而言，rem由于是10的倍数，所以能够更为方便的算出字体大小。 - text-shadow ：offset-x offset-y blur-radius color
- font：italic normal 3em/1.5 字体