css 样式表属性与示例记录
常用样式
垂直居中
- 第一
1 | selector: { |
- 第二
1 | parent: { |
- 第三
1 | parent: { |
样式重置
1 | @chaset utf-8; |
css 书写规范
书写顺序
- Positioning Model 布局方式、位置，相关属性包括：position, top, z-index, display, float 等
- Box Model 盒模型，相关属性包括：width, height, padding, margin, border, overflow 等
- Typographic 文本排版，相关属性包括：font, line-height, letter-spacing, color- text-align 等
- Visual 视觉外观，相关属性包括：color, background, list-style, transform, animation 等
推荐顺序：
- display
- position
- position 相关的 left top right bottom z-index
- float
- clear
- width
- height
- margin
- padding
- border
- background
- color
- font
- text-decoration
- text-align
- vertical-align
- white-align
- text-XXXX(text 的其它属性)
- CSS3 类
书写规范
- 使用 CSS 缩写属性 CSS 有些属性是可以缩写的，比如 padding,margin,font 等等，这样精简代码同时又能提高用户的阅读体验。可缩写的属性中，如果属性值只有 1 个或 2 个，那应该分开写；如果大于 2 个，应该合并写在一起。这样就可以使其编译的时间最优化。
- 去掉小数点前的“0”和 0 后面的单位，如：0px -> 0
- 16 进制颜色代码缩写
命名规则
- 分类式命名法
- 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
- 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册等
- 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输 入框、loading 等！
- 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
- 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}）
- javascript(.j-)：.j-将被专用于 JS 获取节点，请勿使用.j-定义样式
- 不要使用 " _ " 下划线来命名 css
- id 采用驼峰式命名(不要乱用 id)
- scss 中的变量、函数、混合、placeholder 采用驼峰式命名
- 相同语义的不同类命名方法：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3 等，都是列表模块，但是是完全不一样的模块）。其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2 等等。
- 命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）
- 后代选择器：体-修饰符即可（例：.m-page .cut{}）注：后代选择器不要在页面布局中使用，因为污染的可能性较大；
- 简写命名
举例
1 | /* 这是某个模块 */ |
- 布局(.g-)
语义 命名 简写 文档 doc doc 头部 head hd 主体 body bd 尾部 foot ft 主栏 main mn 主栏子容器 mainc mnc 侧栏 side sd 侧栏子容器 sidec sdc 盒容器 wrap/box wrap/box - 模块（.m-）、元件（.u-）
语义 命名 简写 导航 nav nav 子导航 subnav snav 面包屑 crumb crm 菜单 menu menu 选项卡 tab tab 标题区 head/title hd/tt 内容区 body/content bd/ct 列表 list lst 表格 table tb 表单 form fm 热点 hot hot 排行 top top 登录 login log 标志 logo logo 广告 advertise ad 搜索 search sch 幻灯 slide sld 提示 tips tips 帮助 help help 新闻 news news 下载 download dld 注册 regist reg 投票 vote vote 版权 vcopyright cprt 结果 result rst 标题 title tt 按钮 button btn 输入 input ipt - 功能（.f-）
语义 命名 简写 清除浮动 clearboth cb 左浮动 floatleft fl 内联 inlineblock ib 文本居中 textaligncenter tac 垂直居中 verticalalignmiddle vam 溢出隐藏 overflowhidden oh 完全消失 displaynone dn 字体大小 fontsize fz 字体粗细 fontweight fs - 皮肤（.s-）
语义 命名 简写 字体颜色 fontcolor fc 背景颜色 backgroundcolor bgc 边框颜色 bordercolor bdc - 状态(.z-)
语义 命名 简写 选中 selected sel 当前 curren crt 显示 show show 隐藏 hide hide 打开 open open 关闭 close close 出错 error err 不可用 disabled dis
概念
- 属性：css 的称谓
- 值：属性的值，整数值、数值、百分比、长度值、颜色值、字符串值、位置值等
- 关键字：css 中关键单词
- 变量：
- 长度单位：px、em、ex、rem、ch、vh、vw、pt、cm、mm、pc；
<number> + 长度单位 = <length> - 功能符：值以函数的形式指定，rgba()、url()、calc();
- 属性值：属性冒号后的内容
- 声明：属性名 + 属性值
- 声明块：花括号包裹的一系列声明
- 规则或规则集：
- 选择器：用来选取目标元素
- 类选择器：.
- ID 选择器：#
- 属性选择器：[]
- 伪类选择器：:
- 伪元素选择器：::
- 关系选择器：根据与其他元素的关系选择元素的选择器
- 后代选择器：空格
- 相邻后代选择器：>
- 兄弟选择器：~
- 相邻兄弟选择器：+
- @规则：以@字符开始的一些规则
其它
- 块级元素：block-level element
- 具有换行特性
- 内联元素：inline-level element
- 替换元素：通过修改某个属性值呈现的内容可被替换的元素
属性参考
兼容性
- 通用： attr
- Safri 或 Chrome： -webkit-attr
- Firefox：-moz-attr
- Opera：-o-attr
属性值类型
- string：字符串
- number：数值
- hex：十进制数字
- rgb：rgb 代码
- time：时间
- length: 长度
- %：百分比
- angle: 角度
- url：图片路径
flex
容器的属性
- flex-direction: row | row-reverse | column | column-reverse;
决定主轴的方向
- flex-wrap: nowrap | wrap | wrap-reverse;
如何换行
- flex-flow: [flex-direction flex-wrap]
flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
- 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;
多根轴线的对齐方式
如果项目只有一根轴线，该属性不起作用
项目的属性
- order: number;
项目的排列顺序
数值越小，排列越靠前 - flex-grow: number;
项目的放大比例
- flex-shrink: number;
项目的缩小比例
- flex-basis: length | auto;
在分配多余空间之前，项目占据的主轴空间（main size）
- flex: [flex-grow flex-shrink flex-basis] | none;
flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto
快捷值：auto (1 1 auto) 和 none (0 0 auto)。 - align-self: auto | flex-start | flex-end | center | baseline | stretch;
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
动画属性
1 | div { |
@keyframes animationname {[from {}, to {}]|[0% {} - 100% {}]}animation name duration timing-function delay iteration-count;- animation-name: string | none;
- animation-duration: time;
- animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);
- animation-delay: time;
- animation-iteration-count: number | infinite;
- animation-direction: normal | alternae;
- animation-play-state: paused | running;
- animation-fill-mode: none | forwards | backwards | both;
背景属性
1 | background: #000000 url(example.gif) repeat-x fixed top; |
background: color image repeat position attachment
- background-color: string | hex | rgb | transparent | inherit;
- background-image: url() | inherit | none;
- background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit;
- background-position: [top | center | bottom left | center | right] | [x% y%] | [xpos ypos]
- background-attachment: scroll | fixed | inherit;
- background-clip: border-box | padding-box | content-box;
- background-origin: border-box | padding-box | content-box;
- background-size: [width | auto height | auto] | [percentage-width | auto percentage-height | auto] | cover | contain
边框属性
1 | border: 1px solid red; |
border: width style color;
- border-width: thin | medium | thick | length | inherit;
- border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit;
- border-color: string | hex | rgb | transparent | inherit;
以上属性均可分别设置 top right bottom left 各边的属性值
例如：border-width: top-width right-width bottom-width left-width;
border-top-*, border-right-*, border-bottom-*, border-left-* 分别控制各边的以上属性
1 | border-radius: 2em; |
- border-radius: length | %
可通过 border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius 分别控制各角的圆角值
1 | border-image: url(sample.png) 30 30 round; |
border-image: image slice width outset repeat
- border-image-source: image | none;
- border-image-slice: number | % | fill;
- border-image-width: number | % | auto;
- border-image-outset: length | number;
- border-image-repeat: stretch | repeat | round;
1 | box-shadow: 10px 10px 5px #000000; |
box-shadow: h-shadow v-shadow blur spread color inset
1 | outline: #000000 dotted thick; |
outline: color style width
- border-color: string | hex | rgb | invert | inherit;
- border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit;
- border-width: thin | medium | thick | length | inherit;
box 属性
1 | div { |
overflow: x & y
- overflow-x: visible | hidden | scroll | auto | no-display | no-content;
- overflow-y: visible | hidden | scroll | auto | no-display | no-content;
- overflow-style: auto | scrollbar | panner | move | marquee;
1 | div { |
- rotation-point: [left top] | [left center] | [left bottom] | [right top] | [right center] | [right bottom] | [center top] | [center center] | [center bottom] | [x% y%]
- rotation: angle
color 属性
1 | div { |
- opacity: value | inherit
- color-profile:
- rendering-intent:
尺寸属性
1 | div { |
- width | heigh：auto | length | % | inherit;
- max-*：none | length | % | inherit;
- min-* : length | % | inherit;
字体属性
1 | div { |
font: style variant weight size/line-height family;
- font-sytle: normal | italic | oblique | inherit;
- font-variant: normal | small-caps | inherit;
- font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;
- font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | % | inherit;
- line-height:
- font-family: [family-name generic-family] | inherit;
- 通用字体
- Serif
这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
- Sans-serif
这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
- Monospace
Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
- Curslve
这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
- Fantasy
这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。
- Serif
- 特定字体
- Times
- Verdana
- Helvetica
- Arial
- 通用字体
- font-size-adjust: none | number;
- font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
- font-variant: normal | small-caps | inherit;
内容生成
1 | a:after { |
- content: none | normal | content specifications | inherit;
- counter-increment: none | number | inherit;
- counter-reset: none | number | inherit;
1 | q:lang(en) { |
-
quotes: none | [string string string string] | inherit;
显示 代码 " " ’ ' < ‹ > › « « » » ‘ ‘ ’ ’ “ “ ” ” „ „ -
crop:
-
move-to:
-
page-policy:
列表属性
1 | ul { |
list-style: type position image
- list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit;
- list-style-position: inside | outside | inherit;
- list-style-image: url | none | inherit;
- marker-offset:
外边距属性
1 | margin: 2cm 4cm 3cm 4cm; |
- margin: top right bottom left;
- margin-top | magin-right | margin-bottom | margin-left: auto | length | % | inherit;
marquee 属性
1 |
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
多列属性
1 | div { |
columns: width count
- column-width: auto | length;
- column-count: number | auto;
- column-fill: balance | auto;
- column-gap: length | normal;
- column-span: 1 | all;
column-rule: width style color;
- column-rule-width: thin | medium | thick | length;
- column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
- column-rule-color: color;
内边距属性
1 | padding: 2cm 4cm 3cm 4cm; |
- padding: top right bottom left;
- padding-top | padding-right | padding-bottom | padding-left: auto | length | % | inherit;
定位属性
1 | h2 { |
- position: absolute | fixed | relative | static | inherit;
- top: auto | % | length | inherit;
- right: auto | % | length | inherit;
- bottom: auto | % | length | inherit;
- left: auto | % | length | inherit;
- clip: rect(top, right, bottom, left) | auto | inherit;
- z-index: auto | number | inherit;
- float: left | right | none | inherit;
- clear: left | right | both | none | inherit;
- cursor: url | default | auto | crosshair | pointer | move | e-resize | nw-resize | ne-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help;
- display: none | block | inline | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit;
- overflow: visible | hidden | scroll | auto | inherit;
- vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | % | inherit;
- visibility: visible | hidden | collapse | inherit;
打印属性
1 | @media print { |
- page-break-before: auto | always | avoid | left | right | inherit;
- page-break-inside: auto | avoid | inherit;
- orphans
- widows
表格属性
1 | table { |
- table-layout: automatic | fixed | inherit;
- border-collapse: separate | collapse | inherit;
- empty-cells: hide | show | inherit;
- 仅用于分离边框模式（border-collapse: separate;）
- border-spacing: [length length] | inherit;
- caption-side: top | bottom | inherit;
文本属性
1 | p { |
- color: string | hex | rgb | inherit;
- direction: ltr | rtl | inherit;
- letter-spacing: normal | length | inherit;
- line-height: normal | number | length | % | inherit;
- text-align: left | right | center | justify | inherit;
- text-decoration: none | underline | overline | line-through | blink | inheit;
- text-indent: length | % | inherit;
- text-transform: none | capitalize | uppercase | lowercase | inherit;
- unicode-bidi: normal | embed | bidi-override;
- white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;
- word-spacing: normal | length | inherit;
- text-overflow: clip | ellipsis | string;
- text-shadow: [h-shadow v-shadow blur color];
- word-break: normal | break-all | keep-all;
- word-wrap: normal | break-word;
- hanging-punctuation:
- punctuation-trim:
- text-align-last:
- text-emphasis:
- text-justify:
- text-outline:
- text-wrap:
2d/3d 转换属性
1 | div { |
- transform: none | transform-function;
属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
- transform-origin: [x-axis y-axis z-axis];
- transform-style: flat | preserve-3d;
- transform-function:
值 描述 none 定义不进行转换。 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。 translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 scale(x,y) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。
1 | div { |
- perspective: number | none;
- perspective: [x-axis y-axis];
- x-axis: left | center | right | length | %;
- y-axis: top | center | bottom | length | %;
1 | div { |
- backface: visible | hidden;
过渡属性
1 | div { |
transition: property duration timing-function delay;
transition-property: none | all | property;
transition-duration: time;
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
transition-delay: time;
不常用的属性
flexible box 可伸缩框属性
1
2
3
4
5
6
7
8
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
1 | box-align |
content for paged media 属性
1
2
3
4
5
6
7
8
9
10
11
12
13
bookmark-label
bookmark-level
bookmark-target
float-offset
hyphenate-after
hyphenate-before
hyphenate-character
hyphenate-lines
hyphenate-resource
hyphens
image-resolution
marks
string-set
1 | bookmark-label |
grid 属性
1
2
grid-cloumns
grid-rows
1 | grid-cloumns |
hyperlink 属性
1
2
3
4
target
target-name
target-new
target-position
1 | target |
paged media 属性
1
2
3
4
5
fit
fit-position
image-orientation
page
size
1 | fit |
用户界面属性
1 | appearance |
- 本文标题：css 样式表属性与示例记录
- 创建时间：2020-04-04 17:20:57
- 本文链接：2020/04/04/css-style-sheets/
- 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
评论