前端学习之 css(1)

边框

border-radius
圆角边框效果

语法

1
2
3

border-radius: 5px; /* 四个角的半径均为 5px 的圆角 */
border-radius: 5px 7px; /* 左上角和右下角半径为 5px；右上角和左下角半径为 7px*/
border-radius: 5px 4px 3px 7px; /*依次为 左上角、右上角、右下角、左下角*/

使用 border-radius 时，需要给边框设置宽度和高度

效果
可以使用 border-radius 画实心圆，只要满足：height=width, border-radius=$\frac{1}{2} \times $width。

box-shadow
向盒子添加阴影效果；支持多重添加
- 语法
  1
  box-shadow: X 偏移量 Y 偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
  X 偏移量和 Y 偏移量可以看做光线投影过来的方向；投影方式：设置了 inset 时为 内部阴影，否则为 外部阴影
- 参考链接
border-image
为边框应用背景图片
- 语法
  1
  border-image: url(xxx.png) 70 70 70 70 延伸方式
  其中，延伸方式为：round （平铺）；repeat （重复）；stretch （拉伸）
- 参考链接

颜色

渐变色彩
- 线性渐变
  - 语法
    1
    linear-gradient(方向,颜色点1,颜色点2,...颜色点n);
    方向可以用角度表示，单位为 deg，如： 0deg、90deg、123deg 等
    方向也可以用关键字表示，如：to top、to right、to bottom、to left、to top left 等
    颜色点：每个颜色点有一个颜色值表示，在线上依次紧邻排布
  - 参考链接
- 径向渐变
  - 语法
    1
    radial-gradient(center, shape, size, color-stop1, ..., color-stopn);
    - center 渐变的起点；可以为百分比；默认在图形的中心
    - shape 渐变的形状： ellipse 表示椭圆形，circle 表示圆形，默认为 ellipse；
      - size 大小：closest-side 最近边；closest-corner 最近角；fathest-side 最远边；fathest-corner 最远角；
    - start-color 颜色点
  - 参考链接

文字与字体

text-overflow
用于说明文字溢出时用什么方式显示： clip 表示剪切；ellipsis 表示显示省略标记。
为了产生理想的省略号的效果，还需 强制文本在一行内显示 white-space: nowrap; 及 溢出内容隐藏 overflow: hidden;
- 语法
  1
  2
  3
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
- 参考链接
word-wrap
用来指定当前行溢出时是否断开换行
- 语法
  1
  word-wrap: normal | break-word;
  其中，normal（默认值）表示控制连续文本换行；break-word 表示内容将在边界内换行

@font-face

语法

@font-face {
  font-family: 字体名称;
  src: 字体文件在服务器上的相对或绝对路径；
}

这样就可以加载出本地没有但服务器上有的字体了

text-shadow
- 语法
  1
  text-shadow: X-Offset Y-Offset Blur Color;
  其中，X-Offset 表示阴影的水平偏移距离；Y-Offset 表示阴影的垂直偏移距离； Blur 表示阴影的模糊程度，值越大越模糊（不可为负）；Color 表示阴影的颜色
- 参考链接

与背景相关的样式

background-origin
设置元素背景图片的 原始起始位置
- 语法
  1
  background-origin: border-box | padding-box | content-box;
  参数分别表示背景图片从边框、内边框（默认值）、内容区域 显示
  注意，这个属性仅当背景为 no-repeat 时有效；否则将从边框开始显示。
- 参考链接
background-clip
对背景图片做适当裁剪以适应实际需要
- 语法
  1
  background-clip: border-box | padding-box | content-box | no-clip;
  参数分别表示从边框、内边框（默认值）、内容区域 向外裁剪背景; no-clip 表示不裁剪
- 参考链接
background-size
设置背景图片的大小，以 长度值 或 百分比 显示；还可以通过 contain 和 cover 来对图片进行缩放
- 语法
  1
  background-size: auto | <长度值> | <百分比> | contain | cover;
- 取值说明
  1. auto：默认值，不改变背景图片的原是尺寸
  2. <长度值>：成对出现时，如：background-size: 20px 30px; 表示将背景图片宽度设为 20px，高度设为 30px；只设置一个值时，表示长宽值相同
  3. <百分比>：成对出现时，如：background-size: 20% 30%; 表示将背景图片宽度设为其所在容器的宽度的 20%，高度设为其所在容器的宽度的 30%；只设置一个值时，表示长宽比例相同
  4. cover：将背景图片缩放至铺满整个容器为止
  5. contain：将背景图片缩放至某一边抵住容器边缘（上下抵住，或左右抵住）
- 参考链接
multiple backgrounds
- 多背景技术
综合练习1

选择器

属性选择器

属性选择器	功能描述
E[att^=”val”]	选择匹配拥有属性 att 且 att 属性值是以 val 开头的字符串的元素 E
E[att$=”val”]	选择匹配拥有属性 att 且 att 属性值是以 val 结尾的字符串的元素 E
E[att*=”val”]	选择匹配拥有属性 att 且 att 属性值中存在一子串为 val 的字符串的元素 E

结构性伪类选择器

根选择器 :root

在 HTML 文档中，根元素始终是 <html>。
通过 :root 选择器可以设置背景颜色

:root { 
  background: orange;
}
/* 或者 */
html { 
  background: purple;
}

否定选择器 :not

选择除符合否定条件的所有元素。

div:not([id="XXX"]) { 
  background: purple; /*对所有 id 不是 "XXX" 的 div 元素有效 */ 
} 

input:not([type="submit"]) { 
  background: orange; /*对所有不是 submit 类型的 input 元素有效*/
}

空选择器 :empty

选择没有任何内容（空白字符也不可有）的元素。

div:empty {
  border: 1px solid green;
}
/* 对于 <div></div> 有效； 对于 <div> </div> 无效。 */

目标选择器 :target

匹配文档（页面）的 url 的某个标识符的目标元素。
具体来说，触发元素的 url 中的标识符通常会包含一个 #号，后面带有一个 标识符名称。

html

<h2><a href="#brand">Brand</a></h2>
<div id="brand">
  content for Brand.
</div>
<h2><a href="#jake">Jake</a></h2>
<div id="jake">
  content for jake.
</div>
<h2><a href="#aron">Aron</a></h2>
<div id="aron">
  content for aron.
</div>

css

#brand:target {
  background: orange;
  color: #fff;
}

#jake:target {
  background: blue;
  color: #fff;
}

#aron:target {
  background: red;
  color: #fff;
}

参考链接

子包含选择器 E > F

匹配 满足的 E 的元素 的 满足 F 的子元素。

1	table.lemon td > p { } /* 匹配 td 的子元素中所有的 p 元素；且 td 从 table 继承，该 table 元素有一个 lemon 的 class 属性 */

其它

选择器	用法	参考链接
:first-child	顾名思义	imooc
:last-child	顾名思义	imooc
:nth-child(n)	匹配父元素第 $n$ 个子元素可以采用 $3n+1$ 以匹配第 1、4、7… 个子元素可以用 `even` 表示 $2n$，`odd` 表示 $2n+1$	imooc
:nth-last-child(n)	与 `:nth-child(n)` 相比是 `逆序` 计数的	imooc
:first-of-type	和 `:first-child` 类似，但匹配同类型的元素中第一个兄弟元素可以指定多个类型	imooc
:last-of-type	顾名思义	imooc
:nth-of-type(n)	顾名思义	imooc
:nth-last-of-type(n)	顾名思义	imooc
:only-child	匹配父元素仅有一个元素的元素如，`li:only-child{}` 匹配的是仅含一个子元素，且该子元素为 `li` 的子元素（也就是这个 `li` 元素）	imooc
:only-of-type	与 `:only-child` 类似，只是把匹配条件改为：指定类型的元素仅有一个	imooc

伪元素选择器

::selection

用来匹配网页上鼠标选择的文本。

::selection {
  background: red;
  color: purple;
}

:before 和 :after

用来给元素的前面或后面插入内容，经常和 content 配合使用；content 属性指定插入的内容。

变形与动画

rotate()

rotate() 函数让元素顺时针旋转，接受度数作为参数。

/* rotate(xdeg) 表示顺时针旋转 x 度 */
-webkit-transform: rotate(20deg); /* for chrome */
-moz-transform: rotate(20deg); /* for firefox */
transform: rotate(20deg);

skew()

skew() 函数能让元素倾斜显示；比如对一个矩形使用 skew(argx,argy)，那么显示的时候的时候，原来垂直于 x 轴的边将沿逆时针方向旋转 argx；而原来垂直于 y 轴的边将沿逆时针方向旋转 argy。（注意：这里的坐标系沿屏幕向右为 x 轴正方向，屏幕向下为 y 轴正方向）
skewX() 仅接受一个参数，且仅是元素在水平方向上扭曲变形；
skewY() 仅接受一个参数，且仅是元素在垂直方向上扭曲变形；
参考链接

scale()

scale() 函数能让元素缩放显示；它接受两个参数：scale(X,Y)。但是，如果只有一个参数，则对 Y 的缩放倍数是一样的。
scaleX() 仅接受一个参数，且表示元素在 X 轴方向上缩放；
scaleY() 仅接受一个参数，且表示元素在 Y 轴方向上缩放；

translate()

translate() 函数可以将元素向指定的方向移动，且 不影响页面上的其它组件。
translate() 接受两个参数：translate(X,Y)。也就是朝 X 方向和 Y 方向移动的距离。
translateX() 仅接受一个参数，且表示元素在 X 轴方向移动。
translateY() 仅接受一个参数，且表示元素在 Y 轴方向移动。
例：

.wrapper {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

笑着哭的小丑