CSS 基础

2019-08-28 CSS CSS 0 评论字数统计: 3.1k(字) 阅读时长: 12(分)

CSS基础知识

CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。

外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一

层叠次序

浏览器缺省设置
外部样式表
内部样式表(位于<head>标签内部)
内联样式表(在HTML元素内部)

选择器优先级

内联样式的权重为1000
ID选择器的权重为100
类选择器的权重为10
元素选择器的权重为1
权重计算永不进位

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器的分组，用都好将需要分组的选择器分开
集成及其问题，子元素从父元素继承属性有些浏览器不支持其继承，可以用组选择器

!important定义和用法

提升指定样式规则的应用优先权。

div{color:#f00!important;color:#000;}

comment定义和用法

/* 这里是注释内容 */

@import定义和用法

指定导入的外部样式表及目标媒体。

<url>：使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url
<media_query_list>：指定媒体类型和查询条件。

1
2
3

@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

@charset定义和用法

在外部样式表文件内使用。指定该样式表使用的字符编码。

<charset>：字符编码。如：@charset “utf-8”;

@media定义和用法

指定样式表规则用于指定的媒体类型和查询条件

媒体类型	描述
all	所有浏览器-用于所有媒体设备类型
aural	Opera-用于语音和音乐合成器
braille	Opera-用于触觉反馈设备
handheld	Chrome,Safari,Opera-用于小型或手持设备
print	所有浏览器-用于打印机
projection	Opera-用于投影图像，如幻灯片
screen	所有浏览器-用于计算机显示器
tty	Opera-用于使用固定间距字符格的设备。如电传打字机和终端
tv	Opera-用于电视类设备
embossed	Opera-用于凸点字符（盲文）印刷设备

@media all and (width:1024px){
	body{color:#f00;}
}
@media all and (device-height:800px){ … }
@media all and (orientation:landscape){ … }
@media all and (device-aspect-ratio:16/10){ … }
@media all and (min-color:1){ … }
@media all and (monochrome:0){ … }
@media all and (grid:0){ … }

@font-face定义和用法

设置嵌入HTML文档的字体。

<identifier>：字体名称
<url>：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
<string>：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype, opentype，embedded-opentype, svg等
<font>：定义字体相关样式

@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9+ */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('diyfont.woff') format('woff'), /* chrome、firefox */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

@page定义和用法

设置页面容器的版式，方向，边空等。

<label>：页面标识符
<pseudo-class>：打印伪类:first, :left, :right

@page:first{margin:300px;}

@keyframes定义和用法

指定动画名称和动画效果。@keyframes定义的动画名称用来被animation-name所使用。定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

@keyframes testanimations{
	0%{transform:translate(0,0);}
	20%{transform:translate(20,20);}
	40%{transform:translate(40,0);}
	60%{transform:translate(60,20);}
	80%{transform:translate(80,0);}
	100%{transform:translate(100,20);}
}

CSS 函数

名称	描述
counter()	插入计数器，counter()只能被使用在content属性上。 `li:before{counter-increment:item;content:counter(item)".";color:#f00;}`
attr()	插入元素的属性值。 `div{width:attr(width, px, auto);}`
calc()	用于动态计算长度值。任何长度值都可以使用calc()函数进行计算。calc()函数支持+, -, *, /, mod运算，以后还可能加入对min()/max()等运算。 `.test{width:-moz-calc(100% - 50px);width:calc(100% - 50px);background:#eee;}`
min()	用于比较数值的大小并取出最小的那个。 `div{width:min(10% + 20px, 300px);}`
max()	用于比较数值的大小并取出最大的那个。 `div{width:max(10% + 20px, 300px);}`
cycle()	允许子孙元素使用取值序列中的值循环替换继承而来的值。 `li > ul{list-style-type:toggle(disk,circle,square,box);}`

Image

属性	描述
linear-gradient()	用线性渐变创建图像。
radial-gradient()	用径向渐变创建图像。
repeating-linear-gradient()	用重复的线性渐变创建图像。
repeating-radial-gradient()	用重复的径向渐变创建图像。

CSS单位

CSS 的单位对于 CSS 的值有是一个直接影响的。因为 CSS 的单位直接对 CSS 的值的计算是有直接影响的，在 CSS 中单位的之间有一个关系如下所示：

单位	描述
角度单位`<angle>`	deg：度 grad：梯度 rad：弧度 turn：圈
字体单位`<length>`	em：相对于父元素 rem：相对于根元素 ch：数字“0”的宽度 ex：相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
频率单位`<frequency>`	Hz：赫兹 KHz：千赫兹
整数单位`<length>`	px：相对长度单位，像素
长度单位`<length>`	cm：厘米（Centimeters）。绝对长度单位。 mm：毫米（Millimeters）。绝对长度单位。 in：英寸（Inches）。绝对长度单位。 pt：点（Points）。绝对长度单位。 pc：派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。 px：相对长度单位。像素（Pixels）。
百分比单位	%：百分比
分辨率单位`<resolution>`	dpi：每英寸包含点的数量（dots per inch）普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi； dpcm：每厘米包含点的数量（dots per centimeter） dppx：每像素包含点的数量（dots per pixel）
时间单位`<time>`	s:秒 ms:毫秒
视窗单位`<length>`	vw：相对于视口的宽度。视口被均分为100单位的vw vh：相对于视口的高度。视口被均分为100单位的vh vmax：相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax vmin：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

单位	描述
相对单位	字体相对单位：em、rem、ch、ex 视窗相对单位：vw、vh、vmax、vmin
绝对单位	px、pt、pc、cm、mm、in
角度单位	deg、grad、rad、turn
时间单位	s、ms
分辨率单位	dpi、dpcm、dppx
频率单位	Hz、KHz

绝对单位

不受任何屏幕大小或字体的影响。这些单位的显示可能会根据不同的屏幕分辨率而有所不同，因为它们取决于屏幕的DPI（每英寸上的点数）。绝对单位常用于一些物理测量上。在环境输出已知的情形下非常有用。

分辨率术语

术语	描述
720P	1280*720-称为：HD，中文译为“高清”
1080P	1920*1080-称为：FULL HD，中文称为“全高清”
1440P	2560*1440-称为：QHD或Quad HD,即4倍的HD
2160P	3840*2160-称为：4K
4320P	7680*4320-称为：8K

参考地址：https://www.w3cplus.com/css/css-values-and-units.html

颜色值

属性	描述
HEX	颜色值十六进制(HEX)表示,语法如：#rrggbb或#rgb
RGB	RGB表示方式，语法如：rgb(128,128,128)
RGBA	颜色值RGBA表示方式，语法如：rgba(128,128,128,0.5)
HSL	颜色值HSL表示方式，HSL(Hue-色调,Saturation-饱和度,Lightness-亮度)
HSLA	颜色值HSLA表示方式，HSL(Hue-色调,Saturation-饱和度,Lightness-亮度,Alpha-透明度)语法如：hsla(360,50%,50%,0.5)
Transparent	颜色值透明(Transparent)表示方式(RGBA)

元素选择符

选择符	描述
通配选择符`*`	选定所有对象。
类型选择符`E`	以文档语言对象类型作为选择符。
ID选择符`E#ID`	以唯一标识符id属性等于myid的E对象作为选择符。
类选择符`E.Class`	以class属性包含myclass的E对象作为选择符。

关系选择符

选择符	描述
包含选择符`E F`	选择所有被E元素包含的F元素。
子选择符`E>F`	选择所有作为E元素的子元素F。
相邻选择符`E+F`	选择紧贴在E元素之后F元素。
兄弟选择符`E~F`	选择E元素后面的所有兄弟元素F。

属性选择符

选择符	描述
`E[att]`	选择具有att属性的E元素。
`E[att="val"]`	选择具有att属性且属性值等于val的E元素。
`E[att~="val"]`	选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
`E[att^="val"]`	选择具有att属性且属性值为以val开头的字符串的E元素。
`E[att$="val"]`	选择具有att属性且属性值为以val结尾的字符串的E元素。
`E[att*="val"]`	选择具有att属性且属性值为包含val的字符串的E元素。
```E[att	=”val”]```

伪类选择符

选择符	描述
E:link	设置超链接a在未被访问前的样式。
E:visited	设置超链接a在其链接地址已被访问过时的样式。
E:hover	设置元素在其鼠标悬停时的样式。
E:active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus	设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:lang(fr)	匹配使用特殊语言的E元素。
E:not(s)	匹配不含有s选择符的元素E。
E:root	匹配E元素在文档的根元素。
E:first-child	匹配父元素的第一个子元素E。
E:last-child	匹配父元素的最后一个子元素E。
E:only-child	匹配父元素仅有的一个子元素E。
E:nth-child(n)	匹配父元素的第n个子元素E。
E:nth-last-child(n)	匹配父元素的倒数第n个子元素E。
E:first-of-type	匹配同类型中的第一个同级兄弟元素E。
E:last-of-type	匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type	匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n)	匹配同类型中的倒数第n个同级兄弟元素E。
E:empty	匹配没有任何子元素（包括text节点）的元素E。
E:checked	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled	匹配用户界面上处于可用状态的元素E。
E:disabled	匹配用户界面上处于禁用状态的元素E。
E:target	匹配相关URL指向的E元素。
@page:first	设置页面容器第一页使用的样式。仅用于@page规则
@page:left	设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right	设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

伪对象选择符

选择符	描述
E:first-letter/:first-letter	设置对象内的第一个字符的样式。
E:first-line/:first-line	设置对象内的第一行的样式。
E:before/:before	设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/:after	设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder	设置对象文字占位符的样式。
E::selection	设置对象被选择时的颜色。

本文链接： https://liushuai97.github.io/2019/08/28/CSS-基础/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY 4.0 CN协议许可协议。转载请注明出处！

Anily前端 & Web Developer

任何值得做的事就值得把它做好。- Whatever is worth doing is worth doing well.