笔记「CSS」

Built in 20190705

前端的作用于采集输入信息，后端进行处理。计算机程序的界面样式，视觉呈现属于前端。本页主要记录我学习 CSS 过程中觉得实用的笔记。

层叠样式表 Cascading Style Sheets 是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

其中p ：选择器 是需要改变样式的元素；color：属性是需要改变的样式属性；red ：值是属性的描述值。

p {
  color: red;
  text-align: center;
}

盒子模型

上图是一个标准盒子模型的示意图，可以看出每个盒子由四个区域组成，由里到外依次是内容、内边框、边框和外边框。

标签名	名称	描述
margin	外边距	清除边框外的区域，外边距是透明的。
border	边框	围绕在内边距和内容外的边框。
padding	内边框	清除内容周围的区域，内边距是透明的。
content	内容	盒子的内容，显示文本和图像。
top	顶部	用于确定方向。
bottom	底部	用于确定方向。
left	左边	用于确定方向。
right	右边	用于确定方向。

内容 content

内容区域装着元素想要展示的的基本内容，可以是文本、图片、视频等，可通过调整所装的内容尺寸来改变内容区域的尺寸。下列插入两个 90px 宽,60px 高的方块。

内边框 cpadding

内边框算是内容的拓展，负责给内容排开周围的区域的其他元素，常用作“留白”。可通过 padding-top、padding-right、padding-bottom、padding-left、padding来控制内边框的粗细。

我们发现两个方块默认情况下紧贴在一起，可以通过增加内边框使他们看起来更协调。绿色区域仅为表示内边框，实际默认为透明。

.box {
  padding: 10px;
}

你还可以使用 padding 属性，一次性输入多个数值来调整四周的内边框，或者在后面增加方位来单独调整特定方位。

.box {
  padding: 10px 20px 30px 40px;
}

.box {
  padding-top: 10px;
}

边框 border

边框算是内边框的拓展，是盒子模型实质上的边界，可通过 border-width来控制边框粗细，同样在后面增加方位可以单独调整特定方位。也可给定线形: solid(实线) none(无边框) double(双线) dashed(虚线) dotted(点划线)来控制边框风格。

.box {
  border: 10px solid #ced4da;
}

外边框 margin

外边框算是边框的拓展，它其实已经不算做该元素的范围，可通过 margin-width来控制边框粗细，同样在后面增加方位可以单独调整特定方位。

不同元素的外边框是可以重叠的，可对比下图与内边框图观察两方块交界处的宽度来理解它们的不同之处。

.box {
  margin: 10px;
}

位置属性 Position

进行 CSS 布局前，还得了解 position 位置属性，它用于确定元素的定位方式，选择合适的定位方式能快速实现布局需求。

.box{
  position: absolute;
  left: 20px;
  top: 30px;
}

属性	描述	值举例
position	位置	`static(静态)` `relative(相对定位)` `fixed(固定定位)` `absolute(绝对定位)` `sticky(粘性定位)`

浮动属性 Float

在布局过程中，有事需要两个元素处于同一行，这时就要用到 float 和 clear 属性，它用于确定元素是否浮动。

.box{
  float: left;
}

属性	描述	值举例
float	浮动	`left(左侧浮动)` `right(右侧浮动)` `none(取消浮动)`
clear	取消浮动	`left(取消左侧浮动)` `right(取消右侧浮动)` `both(取消两侧浮动)` `none(允许浮动)`

弹性布局

Flex 是 Flexible Box（弹性布局）的缩写，给盒子指定 Flex 属性能大大提升布局时的灵活性。

.box{
  display: flex;
}

容器属性 container

使用 Flex 布局的盒子称作 Flex容器，简称 容器 (container)。它所包含的全部子元素被称作 Flex项目，简称 项目 (item)。容器具有以下属性：

属性	描述	值举例
flex-direction	轴线方向	`row(水平左至右)` `row-reverse(水平右至左)` `column(垂直上至下)` `column-reverse(垂直下至上)`
flex-wrap	换行	`nowrap(不换行)` `wrap(上至下换行)` `wrap-reverse(下至上换行)`
flex-flow	主轴方向	`row(水平左至右)` `row-reverse(水平右至左)` `column(垂直上至下)` `column-reverse(垂直下至上)`
justify-content	水平对齐	`flex-start(左对齐)` `flex-end(右对齐)` `center(居中)` `space-between(两端对齐)` `space-around(等间距)`
align-items	垂直对齐	`flex-start(上对齐)` `flex-end(下对齐)` `center(居中)` `baseline(文本基线对齐)` `stretch(占满高度)`
align-content	轴线对齐	`flex-start(上对齐)` `flex-end(下对齐)` `center(居中)` `space-between(两端对齐)` `space-around(等间距)` `stretch(占满高度)`

项目属性 item

属性	描述	值举例
order	排序	`0(数字,小数靠前)`
flex-grow	放大比例	`0(数字,按比例分配空间)`
flex-shrink	缩小比例	`1(数字,按比例分配空间)`
flex-basis	主轴空间	`auto(自动)` `100px(尺寸)`
align-self	特例对齐	`flex-start(上对齐)` `flex-end(下对齐)` `center(居中)` `baseline(文本基线对齐)` `stretch(占满高度)`

项目属性中的 flex-grow、flex-shrink 和 flex-basis可以简写为 flex，写法如下：

.item {
  flex: 0 0 100px;
}

文本样式

属性	功能描述	值举例
color	颜色	`#ffffff(颜色代码)`
direction	文本方向	`ltr(左到右)` `rtl(右到左)`
letter-spacing	字间距	`-3px(数值)`
line-height	行高	`200%(百分数)`
text-align	对齐	`justify(两端对齐)` `center(居中)` `left(左对齐)` `right(右对齐)`
text-decoration	文本修饰	`overline wavy red(上划红色波浪线)` `line-through(删除线)` `underline(下划线)`
text-indent	首行缩进	`3px(数值)`
text-shadow	文本阴影	`2px 2px #ff0000(XY偏移值、颜色代码)`
text-transform	字母大小写	`uppercase(大写)` `capitalize(大小写)` `lowercase(小写)`
vertical-align	垂直对齐	`baseline(在父元素的基线上)` `sub(垂直对齐文本下标)` `super(垂直对齐文本上标)` `top( 顶端与行中最高元素顶端对齐)` `text-top( 顶端与父元素字体顶端对齐)` `middle(在父元素的中部)` `bottom(底端与行中最低的元素顶端对齐)` `text-bottom(底端与父元素字体底端对齐)` `-30%(使用line-height的值来排列此元素)` `inherit(从父元素继承属性)`
white-space	空白区域处理	`normal(忽略)` `pre(保留)` `nowrap(不换行直到</br>)` `pre-wrap(保留并正常换行)` `pre-line(合并空白符)` `inherit(从父元素继承属性)`
word-spacing	字间距	`3px(数值)`

字体样式

body {
  font-family: 'Times New Roman', sans-serif;
  src: url('TimesNewRoman.ttf');
}

提示

除了加载本地字体外，你还可以选择直接调用 Google Fonts 在线字体库。

属性	功能描述	值举例
font-family	字体系列	`"Times New Roman"(字体名)` `sans-serif(无衬线字体)` `serif(衬线字体)`
font-style	字体样式	`normal(正常)` `italic(斜体)` `oblique(倾斜)`
font-size	字体大小	`40px(数值)` `2.5em(数值,px/16=em)` `100%(百分数,body属性值*100%)`
font-weight	字体粗细	`200(整百分数)`

链接样式

a:hover {
  text-decoration: underline;
  background-color: #666666;
}

a:after {
  content: "»";
}

标签名	功能描述
:link	正常，未访问过的链接
:visited	已访问过的链接
:hover	鼠标放在链接上
:active	链接被点击时
:focus	链接被点击后
:before	在元素前增添元素
:after	在元素后增添元素
:target	用于选中浏览器 URL 的 hash 部分所指示的元素
:any-link	表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类

新窗口打开链接

<head>
  <base target="_blank" />
</head>

<body>
  <a href="https://www.eyecus.com/" target="_blank">视由</a>
</body>

.eyecus-btn a:active {
 text:expression(target="_blank");
}

背景样式

body {
  background-color: #ffffff;
}

属性	功能描述	值举例
background-color	背景颜色	`#ffffff(颜色代码)`
background-image	背景图像	`url('paper.gif')(图片URL)`
background-repeat	背景图像排列	`repeat-x(水平平铺)` `repeat-y(垂直平铺)` `no-repeat(不平铺)`
background-position	背景图像定位	`right top(左上角)`
background-attachment	背景图像滚动	`flase(假)` `true(真)`

阴影样式

.nav {
  box-shadow: inset 10px -10px 3px 1px #666666;
}

属性	功能描述	值举例
inset	内阴影	`inset(内阴影)`
h-shadow	水平方向偏移	`10px(数值)`
v-shadow	水平方向偏移	`-10px(数值)`
blur	模糊距离	`3px(数值)`
spread	阴影尺寸	`1px(数值)`
color	阴影颜色	`#666666(颜色代码)`

边框样式

p {
  border: 3px solid #666666;
  border-radius: 15px 50px 30px 3px;
}

属性	功能描述	值举例
border-width	边框宽度	`3px(数值)`
border-style	边框样式	`solid(实线)` `none(无边框)` `double(双线)` `dashed(虚线)` `dotted(点划线)`
border-color	边框颜色	`#666666(颜色代码)`
border-radius	倒圆角	`15px 50px 30px 3px` `(数值左上右上右下左下)`

动画延迟

.btn:hover {
  box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

背景毛玻璃效果

.header {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255,255,255,0.72);
}

滚动条样式

禁用竖向滚动条

body {
  overflow:scroll;
  overflow-y:hidden;
}

自定义滚动条

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}

*::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
  border-radius: 10px;
  background: #ccc;
}

常用功能

添加渐变色，线性渐变 / 圆心渐变

background: -webkit-gradient(linear, left top, left bottom, from(#3874AF), to(#3598DB));

background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);

linear-gradient(#D1EEFC, #81F3FD);
radial-gradient(#FEFD58, #71FCA6, #52EDC7);

使链接在同一行显示

a { word-break: keep-all; }

禁止浏览器为被激活的输入框添加边框

*:focus {
  outline: none;
}

载入本地字体

@font-face {
  font-family:'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');
}
@font-face {
  font-family:'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff'),
       url('/fonts/awesome-i.ttf') format('truetype'),
       url('/fonts/awesome-i.eot') format('embedded-opentype');
}

参考资料

维基百科 https://zh.wikipedia.org/