CSS基础


CSS盒模型

 

 

标准模型 box-sizing:content-box;

IE模型 box-sizing:border-box;

“框”=“盒子”=box,边框=“border”。诸如此类的,padding大部分人翻译成“内边距”,但是 padding也有人翻译为“填充”

CSS规则由以下组成: K:找对象 一组 属性 ,属性的值更新了 HTML 的内容的显示方式 一个 选择器,它选择元素,在上面应用属性值。 V:进行修饰 值:各种颜色,大小,位置等具体属性 每一条属性记录都是 k:v 的形式,多个用分号分割 { k1:v1; k2:v2;...}

选择器

简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。

属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。

伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前 被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。

伪元素(Pseudo-elements):匹配处于相关的确定位置的一个或多个元素,例如每个段落的第一个字 ,或者某个元素之前生成的内容。

组合器(Combinators):这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于 非常特定的选择的方法。例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的 段落。 多重选择器(Multiple selectors):这些也不是单独的选择器;这个思路是将以逗号分隔开的多个选择 器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
element element div p 选择 <div> 元素内部的所有 <p> 元素。 1
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:first-line p:first-line 选择每个 <p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 <p> 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute**=value*] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 <input> 元素。 3
:disabled input:disabled 选择每个禁用的 <input> 元素 3
:checked input:checked 选择每个被选中的 <input> 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3

边框和背景

color: CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的 最低值可以是 0(十六进制 00)。最高值是 255(十六进制 FF)

用途:边框,背景,文字

十六进制色 使用三个双位数来编写,并以 # 符号开头,比如#0000ff 值显示为蓝色

RGB 颜色 rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%),rgb(0,0,255) 和 rgb(0%,0%,100%)

RGBA 颜色 是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度 alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字 rgba(255,0,0,0.5);

HSL 颜色

HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标 表示法

hsl(hue, saturation, lightness)

Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。 Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值 ;0% 是黑色,100% 是白色。

hsl(120,65%,75%);

HSLA 颜色 比HSL多一个 alpha 通道 - 它规定了对象的不透明度 hsla(hue, saturation, lightness, alpha) hsla(120,65%,75%,0.3)

CSS边框

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

CSS 背景属性

属性 描述
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

文本样式

 

https://html-css-js.com/css/generator/background/

https://html-css-js.com/css/generator/gradient/

修改文本样式

https://html-css-js.com/css/generator/font/ https://html-css-js.com/css/generator/text-shadow/

内边距padding

外边距margin

设置顺序 两个值:上和下,左和右。

三个值:上、左和右、下。

四个值:上、右、下、左。

图片样式与用途 图像做边框

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Borders

 

图像做背景

 

">">

布局

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout

position定位 relative absolute

float布局 left right clear

flexbox布局

让布局变得灵活和直观 容器自己决定如何均匀分配它的子元素 – 包括子元素的大小和相互之间的间隔。 自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间 适用于应用组件和小比例布局 flex item(flex项)沿着主轴从左到右排列

解决问题:对齐方式,排列方向,排列顺序

属性 display:flex

Flex-direction 改变主轴方向 row/columu/row-reverse /column-reverse

justify-content 控制 flex item(flex项) 在主轴(main axis)上的对齐 flex-start flex-end center space-between space-around

align-items 属性则定义了 flex item(flex项) 在交叉轴(cross axis)上的对齐方式 flex-start flex-end center stretch baseline

align-self 允许单独设置每个 flex item(flex项) 的对齐方式

flex-basis 控制一个子元素(flex项)的默认大小,沿着轴线的长度 flex-grow 初始值都是 1, 每个item的相对宽度

flex-shrink 决定矩形子元素允许收缩多少的,主要用途是指定哪些 flex项 要缩小,哪些 flex项 不要缩小。默认情况下,每个矩形子元素(flex项)都为 1 – 这意味着每个矩形子元素将 随着容器收缩而收缩 flex:flex-grow,flex-shrink 和 flex-basis 的缩写

https://flexboxfroggy.com/#zh-cn https://www.w3cplus.com/blog/tags/157.html https://hufan-akari.github.io/solved-by-flexbox/

  • grid网格系统

  • 特点 强大,灵活,简单 结构和表现分离 针对目标为大比例布局

  • 两个核心组成部分是 wrapper(父元素)和 items(子元素)。wrapper 是实际的 grid(网格 ),items 是 grid(网格) 内的内容

  • 二维的网格容器,我们需要定义列和行

  • grid-template-columns: 100px 100px 100px;

  • grid-template-rows: 50px 50px;

  • 定位和调整 items(子元素) 大小,使用 grid-column 和 grid-row 属性来设置起始grid:

  • grid-column: 1 / 4;

  • grid-row: 2 / 5;

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

  • https://cssgridgarden.com/#zh-cn

  • CSS的各种尺寸

  • 单位

  • % 百分比

  • pt 磅 (1 pt 等于 1/72 英寸)

  • px 像素 (计算机屏幕上的一个点)

  • em 1em 等于当前的字体尺寸。

  • 2em 等于当前字体尺寸的两倍。

  • 如果某元素以 12pt 显示,那么 2em 是24pt。

  • 在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

  • 缺点:多层嵌套,计算麻烦

  • rem r’是“root”的缩写,意思就是1rem等于根元素的字体大小; 大部分情况下,根元素就是元素 优点:找个共同祖先,计算方便

  • vh,vw 和视口有关系的百分比尺寸

  • 1vh 等于1/100的视口高度。 浏览器高度900px, 1 vh = 900px/100 = 9 px 整个屏幕高度: height: 100vh;

http://www.w3school.com.cn/cssref/css_units.asp

https://github.com/simaQ/cssfun/issues/1

CSS动画

网页动画 CSS3转换(变形)

https://html-css-js.com/css/generator/transform/

http://www.w3school.com.cn/css3/css3_3dtransform.asp

2D 语法:transform:[transform-function] *; 变形可以是一个,也可以是多个,中间以空格分开

2D Transform 方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

转换属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

3D Transform 方法

函数 描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

CSS3过渡

当元素从一种样式变换为另一种样式时为元素添加效果

http://www.w3school.com.cn/css3/css3_transition.asp

https://1stwebdesigner.com/css-effects/

过渡属性

transition-property: none|all|property;

规定应用过渡效果的 CSS 属性的名称

none 没有属性会获得过渡效果。

all 所有属性都将获得过渡效果。

property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

transition-duration: time; 规定完成过渡效果需要花费的时间(以秒或毫秒计)

过渡动画函数( transition-timing-function )

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubicbezier(n,n,n,n);

linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。

ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubicbezier(0.25,0.1,0.25,1))。

ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。

ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。

ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的 数值。

transition-delay: time; 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计

正值:元素过渡效果不会立即触发,当过了设置的时间值后才会被触发

负值:元素过渡效果会从该时间点开始显示,之前的动作被截断

0:默认值,元素过渡效果立即执行

demo: https://ianlunn.github.io/Hover/

过渡的触发机制

伪类触发 :hover :active :focus :checked

CSS3动画

http://www.w3school.com.cn/css3/css3_animation.asp

CSS Animations 是CSS的一个模块:定义了如何用关键帧来随时间推移对CSS属性的值进行动画 处理。关键帧动画的行为可以通过指定它们的持续时间,它们的重复次数以及它们如何重复来控制 。

animation属性

@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

是如下属性的一个简写属性形式: animation-name, animation-duration, animation-timing-function, animationdelay, animation-iteration-count, animation-direction 和 animation-fill-mode.

使用步骤

设置关键帧

调用关键帧

 


最后更新于:2018-11-26 10:23:40