【第一天】
【】选择器:简单选择器、组合选择器、伪类选择器、伪元素选择器、属性选择器
【】选择器优先级:ID选择器 > 类、伪类、属性选择器 > 元素、伪元素选择器 > 通配符、子类选择器、兄弟选择器 > 继承的样式没有权值
【】使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。如果不希望对子元素应用不透明度,可使用 RGBA 颜色值
【】背景属性:background-color. Background-image. Background-repeat(repeat-x / repeat-y / no-repeat). Background-attachment(fixed / scroll). Background-position(right top)
可以按照前面的属性顺序简写 background 属性
【】背景属性还有: background-size(length / percentage / cover / contain). Background-clip. Background-origin(border-box / padding-box / content-box)
。前者指定绘制区域,后者指定背景图像位置
【】边框属性: border-style border-width border-color
(均可设置一到四个值) 可为一到四条边设置简写边框 border。 边框属性还有 border-radius
【】垂直外边距会发生合并,发生在兄弟元素/父子元素/自身元素中。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
【】margin 可以是负值,padding 不可以为负值
【】轮廓(outline)与边框不同!不同之处在于:轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。 outline(简写,style必须,其他两可选) outline-style outline-color outline-width outline-offset(指定轮廓与元素的边缘或边框之间的空间)
【】对于 W3C compliant CSS:如果定义了 color 属性,则还必须定义 background-color 属性
【】文本属性:color letter-spacing line-height. Text-align. Vertical-align. Text-decoration. Text-indent. Text-shadow. White-space. Word-spacing text-overflow. Direction. Unicode-bidi. Text-transform
【】字体属性:font(简写属性) font-family(必须) font-size(必须) font-style font-weight font-variant
【】向 HTML 页面添加图标的最简单方法是使用图标库,将指定的图标类的名称添加到任何行内 HTML 元素(如 <i>
或 <span>
)
【】链接的四种状态:(:link. :visited. :hover. :active)
【】列表属性: list-style(简写属性,按顺序) list-style-type(none) list-style-position(inside / outside) list-style-image
【】css表格: https://www.w3school.com.cn/css/css_table.asp
【第二天】
【】Display
与visibility(hidden / visible)
,设置元素的 display 属性仅会更改元素的显示方式,而不会更改元素的种类。因此,带有 display: block; 的行内元素不允许在其中包含其他块元素
【】Max-width
与width
在正常情况下表现一致,区别在于当窗口小于当前宽度时,max-width会缩短,而width是增加滚动条
【】position(static / relative / absolute / fixed / sticky)
clip
:配合绝对定位,裁剪绝对定位元素,唯一合法的形状值是:rect (top, right, bottom, left)
【】溢出 overflow(visible / hidden / scroll / auto) overflow-x overflow-y
【】浮动 float(none / left / right / inherit)
, 清除浮动: clear(none / left / right / both / inherit)
。完整的清除浮动: .clearfix::after {content: ‘’;clear:both; display:block}
【】块级元素的水平居中推荐margin:auto
文本居中推荐text-align:center
【】水平垂直居中对齐:(1)position + transform
(2)flex布局(justify-content + align-items)
【】伪类名称对大小写不敏感。 :hover :first-child :focus :first-child :last-child :nth-child
https://www.w3school.com.cn/css/css_pseudo_classes.asp
【】全部伪元素: ::first-line ::first-letter ::before ::after ::selection
。 其中前两项必须和块级元素一起使用,中间两项需要和 content 属性配置使用,最后一个可以和 color background cursor outline 属性配合使用
【】Css下拉菜单,可以动手写一写:https://www.w3school.com.cn/css/css_dropdowns.asp
【】精灵图:background-image background-position
属性设置背景图像的起始位置
【】属性选择器:[attribute] [attribute=value] [attribute~=value] [attribute|=value] [attribute^=value] [attribute$=value] [attribute*=value]
【】Css计数器:counter-reset counter-increment content counter() 或 counters()
函数
【】CSS 边框图像 border-image
【】 线性渐变:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
其中 direction 可以是(to right / to bottom right / deg),颜色可以是 rgba 值。 重复线性渐变: background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
【】径向渐变:background-image: radial-gradient(shape size at position, start-color, ..., last-color);
【】css阴影效果 text-shadow / box-shadow
: 水平 垂直 模糊效果 颜色。 使用逗号可以加多个阴影
【】CSS text-overflow
属性规定应如何向用户呈现未显示的溢出内容,取值 clip / ellipsis
【】css引入外部字体规则 @font-face {font-family: ‘’; src:url();}
【第三天】
【】css 2D转换:translate() translateX() translateY() rotate() scale() scaleX() scaleY() skew() skewX() skewY() matrix()
。写在一起的语法是matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
【】css 3D转换也是使用 transform
属性,使用的方法和2D 很像
【】css过渡属性: transition(简写属性) Transition-timing-function. Transition-delay. Transition-duration. Transition-property
。可以给一个dom元素设置多个过渡效果,使用逗号隔开
【】css动画属性:@keyframes animation animation-delay animation-duration animation-direction animation-timing-function animation-iteration-count animation-name animation-fill-mode animation-play-state
【】CSS object-fit
属性用于规定应如何调整 <img>
或 <video>
的大小来适应其容器。取值为 fill / contain / cover / none / scale-down
【】Css多列布局:column-count column-width column-fill column-rule column-rule-width column-rule-color column-rule-style column-gap column-span columns(简写)
【】resize
属性规定是否可由用户调整元素的尺寸。取值为 none|both|horizontal|vertical
【】Css变量:var()函数
,语法为 var(name, value)
,第二个参数可选是回退值。变量必须是双横线开头,分全局变量和局部变量,在选择器中定义,比如全局变量 :root {--blue: #1e90ff;}
【】Css变量和媒体查询一起使用可以实现全局样式跟随屏幕尺寸改变
【】Css flexbox布局中,关于父容器所使用的属性有:flex-direction(row / row-reverse / column / column-reverse)
,flex-wrap(nowrap / wrap / wrap-reverse)
, flex-flow(前两者属性简写)
, justify-content(flex-start / flex-end / center / space-around / space-between)
,align-items(stretch / center / flex-start / flex-end / baseline)
,align-content(stretch / space-between / space-around / center / flex-start / flex-end)
【】Css flexbox布局中,flex容器的直接子元素会自动成为弹性元素,关于子元素所使用的属性有:order
(值是数字,改变元素展示顺序),flex-grow
(规定某个元素相对于其他元素增长多少,默认值 0),flex-shrink
(规定某个元素相对于其他元素收缩多少,默认值 1),flex-basis
(初始长度),flex
(前三属性简写),align-self
(规定弹性容器内所选项目的对齐方式)
【】媒体查询:@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {}
【】在 img
与 video
元素中,如果将 max-width 设置为 100%,则元素将按比例放大缩小,但绝对不会放大到大于其原始尺寸
【】css网格布局模块: display
元素设置为 grid
或 inline-grid
。 设置行列间隙:grid-row-gap / grid-column-gap / grid-gap
。 设置行列线起始:grid-row-start/end grid-column-start/end
, grid-template-columns
属性定义网格布局中的列数,并可定义每列的宽度 , grid-template-rows
属性定义每列的高度, justify-content
属性用于在容器内对齐整个网格 , align-content
属性用于垂直对齐容器内的整个网格 grid-column
属性是 grid-column-start 和 grid-column-end 属性的简写属性( grid-column: 2 / span 3; ) grid-area
属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性( grid-area: 2 / 1 / span 2 / span 3 )