运营转前端 CSS学习篇-1

CSS常用文档

45(掌握)认识CSS-CSS的发展

1.认识CSS

  • CSS表示层叠样式表(cascading style sheet)又称为串样式列表,级联样式表,串接样式表,阶层式样式表,是为网页添加样式的代码

2.CSS的历史

  • 总结

    CSS的出现是为了美化HTML的,并且让结构(HTML)与样式(css)分离

    • 美化方式一:给HTML添加各种各样的样式(颜色,字体,大小,下划线)

    • 美化方式二:对HTML进行布局,按照某种结构显示(CS进行布局-浮动,flex,grid)

46(掌握)三种CSS的编写样式

1.CSS如何编写?

  • 语法规则:属性+属性值

  • 声明,一个单独的CSS规则,如color:red,用来指定添加的CSS样式

    • 属性名(property name),要添加的CSS规则的名称

    • 属性值(property value),要添加的CSS规则的值

2.如何将CSS样式应用到元素上?

  • CSS提供了3种方法

    • 内联样式(inline style)

    • 内部样式表(internal style sheet),文档样式表,内嵌样式表

    • 外部样式表(external style sheet)

  • 内联样式

    • 内联样式=内行样式

  • CSS样式之间用 分号; 隔开, 每条CSS样式后面都加上分号

  • 内部样式表

    • 将CSS放在HTML<head>元素的<style>元素中

  • 外部样式表

    • 指将CSS编写在一个独立的文件中,通过<link>元素引进来

    • 使用外部样式表的2个步骤

      • 第一步:将CSS样式在一个独立的css文件中编写(后缀名为.css)

      • 第二部:通过<link>元素引进来

    • @import

      可以在style元素或者CSS文件中使用@import导入其他的CSS文件

  • 注意:

    • 编写代码的时候,注意是否有空格和圆点

    • css文档中,[style.css]文档中的.title和[text.css]中h1前面没有圆点的区别?

47(掌握)CSS的注释和建议

1.CSS的注释

CSS的注释在<head>中的<style>元素里

  • CSS的注释为/* 注释内容*/

  •  

  • html的注释为<!--注释内容->

48(理解)常见的CSS和学习文档推荐

1.必须掌握的CSS属性

(开发中90+%的时间写的都是这些属性)

2.CSS属性的官方文档

3.目前需要掌握的CSS属性

49(掌握)CSS常见的5个属性

1.CSS属性-background-color

  • 决定背景色

2.CSS属性-color

  • color属性用来设置文本内容的前景色

    • 文字/装饰线/边框/外轮廓等的颜色

50(掌握)综合案例

案例-星球介绍

51(掌握)知识补充-link元素的使用

1.link元素

  • link元素时外部资源链接元素,规范了文档与外部资源的关系

    • link元素通常是在head元素中

  • 最常用的链接时样式表(CSS)

    • 还可以用来创建站点图标(比如:"favicon 图标)

  • link最常见的属性

52(了解)进制的由来和其他进制表示

1.认识进制

  • 进制:当数字达到某个值时进一位(比如从1位变成2位)

  • 数到9的时候,用一位已经表示不了了,就进一位变成2位

  • 二进制,八进制,十六进制

53(掌握)CSS的颜色各种表示方法

1.CSS颜色的表示方法

  • 颜色关键字(color keywords)

  • RGB颜色

    • RGB是一种色彩空间,通过R(red,红色),G(green,绿色),B(blue,蓝色)三原色通过不同比例组成不同的颜色

    • RGB各个原色的取值范围是0~255

2.RGB的表示方法

  • RGB可以通过前缀的十六进制和函数(rgb() ,rgba())标记表示

  • 方式一:十六进制符号:#RRGGBB[AA]

    • R(红),G(绿),B(蓝)和A(alpha)是十六进制字符(0-9,A-F),A是可选的

      • 比如: #ff0000=#ff0000ff

  • 方式二:十六进制符号:RGB[A]

    • R(红),G(绿),B(蓝)和A(alpha)是十六进制字符(0-9,A-F)

    • 三位数符号(#RGB)是六位数形式(#RRGGBB)的缩写版

      • 比如:#f09=#ff0099,都表示同一种颜色

    • 四位数符号(#RGBA)是八位数形式(#RRGGBBAA)的缩写版

      • 比如:#0f38=#00ff3388,都表示同一种颜色

53-1(掌握)chrome开发工具的使用

1.chrome浏览器开发者工具

  • 打开调试工具

    • 方式一:右键-检查

    • 方式二:快捷键-F12

53-2(理解)浏览器的渲染流程

1.浏览器的渲染流程

55(了解)CSS文本属性-字体属性-选择器

56(掌握)文本属性-text-decoration

1.CSS属性-text-decoration(常用)

  • 设置文字的装饰线

  • 常见取值:

    • none:无任何装饰线

      • 可以去除a元素默认的下划线

    • underline:下划线

    • overline:上划线

    • line-through:中划线(删除线)

56.-1(了解)文本属性-text-transform

1.text-transform

  • text-transform:用于设置文字的大小转换

  • 常见值:

    • capitalize:使首字母大写,每个单词的首字符变成大写

    • uppercase:大写字母,每个单词的所有字符变为大写

    • lowercase:小写字母,每个单词的所有字符变为小写

    • none:没有任何影响

2.text-indent

  • 用于设置第一行内容的缩进

  • 刚好是缩进2个文字

    可以设置成px或者em

57(掌握)文本属性-text-align基本使用

1.text-align

  • text-align直接翻译就是设置文本的对齐方式

  • MDN:定义行内内容 (例如文本) 如何相对它的块父元素对齐

  • 常用的值

    • left:左对齐

    • right:右对齐

    • center:正中间显示

    • justify:两端对齐

58(掌握)文本属性-text-align本质

  • text-align只针对行内级元素有效,所以在练习中,绿色背景无法在红色背景中居中,绿色背景的代码中<div>属于块级元素,需要把它改为行内级元素才行

  • 把块级元素改为行内元素的2种方式

59(了解)文本属性-text-align-justity

  • text-align-justity文本居中(但是对最后一行无效)

  • 如何对最后一行也使用文本居中?

    • text-align-last

60(了解)文本属性-word-letter-spacing

  • 设置字母间的间距letter-spacing

  • 设置单词间的间距word-spacing

61(掌握)CSS字体属性-font-size

1.font-size 决定字体的大小

  • 常用设置

    • 具体数值+单位

      • 比如100px

      • 也可用em单位,1em表示100%,2em表示200%,0.5em表示50%(不推荐这种方式)

    • 百分比

      • 基于父元素的font-size计算,比如50%表示等于父元素font-size的一半

62(掌握)字体属性-font-family

  • font-family设置文字的字体名称

    • 可以设置1个或多个字体名称

    • 浏览器会选择列表中第一个该计算机上有安装的字体

    • 通过@font-face指定的可以直接下载的字体

  • 可以通过单独新建一个css文件,通过link引入

    • 注意link不可以放在<style>元素中,需要和<style>元素为兄弟关系,这样输入link元素后,后面的值才会自动出来,否则会报错

63(掌握)字体属性-font-weight

  • font-weight设置文字的粗细(重量)

    • 常见的取值

      • 100|200|300|400|500|600|700|800|900,每一个数字表示一个重量

      • normal:等于400

      • bold:等于700

  • 案例:

64(掌握)字体属性font-style-variant

1.font-style设置字体斜体

  • 有2种方式

  • 方式一:italic

  • 方式二:oblique

2.font-variant影响小写字母的显示形式

  • 可以设置的值

    • normal:常规显示

    • small-caps:将小写字母替换为缩小过的大写字母(将小写字母替换为大写字母,但还是占据小写字母的高度)

65(掌握)文本居中显示line-height

  • line-height 设置文本的行高

    • 一行文字所占据的高度

    • 严格定义:两行文字基线之间的间距

  • line-height和height的区别

    • height:元素的整体高度

    • line-height:元素每一行文字所占据的高度

  • 应用:假如div中只有一行文字,如何让这行文字在div内部垂直居中?

    • 让line-height等同于height

66(掌握)font缩写属性的语法规则

  • font的缩写属性

  • font缩写属性的规则

    • 案例

注:规则可以去MDN文档查询

67(了解)CSS选择器-统配选择器的使用

  • 开发中需要找到特定的网页元素进行设置样式,通过CSS选择器找

  • CSS选择器:按照一定规则选出符合条件的元素,给它添加CSS样式

  • 选择器的种类

  • 通配符

    • 注意*在编程语言里表示通配符

    • 案例

  • 通用选择器

    • 所有的元素都会被选中

    • 一般用来给所有的元素做一些通用性的设置

      • 比如内边距,外边距

      • 重置一些内容

68(掌握)简单选择器

  • 简单选择器是开发中用的最多的选择器

  • 案例

  • id值是唯一的,不能重复

    • id如果有多个单词组成,单词间可以用中划线-或者下划线_链接,也可以使用驼峰表示(首字母大写)

69(掌握)CSS选择器-属性选择器

  • 属性选择器(attribute selectors]

    • 拥有某一个属性[att]

    • 属性等于某个值[att=val]

70(掌握)CSS选择器-后代选择器

  • 后代选择器(descendant combinator)

    • 后代选择器一:所有的后代(直接/间接的后代)

      • 选择器之间以空格分割

    • 后代选择器二:直接子代选择器(必须是直接子代)

      • 选择器之间以>分割

71(理解)CSS选择器-兄弟选择器

  • 兄弟选择器一:相邻兄弟选择器

    • 使用符号 + 连接

  • 兄弟选择器二:普遍兄弟选择器

    • 使用符号"波浪号"连接

72(掌握)选择器-选择器组-交集-并集

  • 交集选择器

    • 需要同时符合两个选择器条件(两个选择器紧密连接)

    • 作用:开发中为了精准的选择某一个元素

      • 注意: 注意div和.one中间没有空格,有空格就变成了后代选择器

  • 并集选择器

    • 符合一个选择器条件即可(两个选择器以逗号, 分割)

    • 作用:为了给多个元素设置相同的样式

73(理解)认识伪类和常见的伪类

1.伪类

  • 伪类: 是选择器的一种,用于选择处于特定状态的元素

  • 比如:当鼠标放在一个元素上时,会显示另外一个颜色

2.常见的伪类

  • 动态伪类

    • :link , :visited , :hover , :active , focus

  • 目标伪类

    • :target

  • 语言伪类

    • :lang

  • 元素状态伪类

    • :enabled , :disabled , :checked

  • 结构伪类

  • 否定伪类

    • :not()

所有伪类:伪类 - CSS:层叠样式表 | MDN

74(掌握)伪类-动态伪类

1.动态伪类

  • 动态伪类

    • 使用举例

      • a:link 未访问的链接

      • a:visited 已访问的链接

      • a:hover 鼠标挪动到链接上

      • a:active 激活的链接(鼠标在链接上长按住未松开)

  • 使用注意

    • :hover必须放在:link和:visited后面才能完全生效

    • :active必须放在:hover后面才能完全生效

    • 建议编写顺序::link ,:visited ,:hover ,:active

  • 除了a元素,:hover,:active也能用在其他元素上,比如div、span,h1

2.动态伪类-:focus

  • :focus指当前拥有输入焦点的元素(能接收键盘输入)

    文本框一聚焦后,背景就会变成红色

  • 因为a元素可以被键盘的Tab键选中聚焦,所以:focus也适用于a元素

  • 动态伪类编写顺序为

    • link ,:visited ,:focus ,:hover ,:active

  • 直接给a元素设置样式,相当于给a元素的所有动态伪类都设置了red

    • 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

76(了解)伪元素first-line-letter

  • 常用的伪元素

    • :first-line, ::first-line, 对首行文本设置属性

    • :first-letter, ::first-letter, 对首字母设置属性

    • :before, ::before

    • :after, ::after

      注意:为了区分伪元素和伪类,伪元素最好用2个冒号

77(掌握)伪元素-before-after

  • ::before和::after用来在一个元素的内容之前或之后插入其他内容(文字\图片)

  • 常通过content属性来为一个元素添加修饰性的内容

  • 添加<span></span>和content的区别

    • <span>与内容不在一行,那么内容和<span>中的内容之间会有空格

    • <span>与内容在一行时,内容与<span>之间没有空格,但是可读性就会变差,因此使用befor和after伪元素

    • 使用伪元素在内容之前或者之后添加新内容时,可以在属性值后面添加item,进行批量添加

  • 注意:@import可以通过""和url两种方式引入

  • 调整after中图标的位置:position:relative(相对定位)

  • 注意

    • 使用伪元素的过程中,content不能省略

    • 伪元素为行内非替换元素,不能设置宽度和高度,所以需要使用display:inline-block

78(掌握)CSS属性的特性-继承性

1.css的属性继承

  • CSS的某些属性具有继承性

    • 如果一个属性具备继承, 那 在该元素上设置后 , 它的后代元素都可以继承这个属性 ;

    • 如果后代元素自己有设置该属性 , 那么优先使用后代元素自己的属性 (不管继承过来的属性权重多高 )

  • 如何知道一个属性是否具有继承性?

    • 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性

    • 查MDN文档看属性是否具有继承性

2.继承

  • 默认继承

  • 继承计算值(了解)

  • 强制继承

79(掌握)CSS属性的特性-层叠性

  • CSS的翻译是层叠样式表,什么是层叠:

  • 多个样式属性覆盖之后,哪个会生效?

  • 选择器的权重

80(掌握)HTML元素的特性-块级-行内级

  • div是块级元素会独占一行,span是行内级元素会在同一行显示

  • 块级元素:独占父元素的一行

  • 行内级元素:多个行内级元素可以在父元素的同一行显示

  • 通过CSS修改元素类型

    • div是块级元素,span是行内级元素

    • div是块级元素是因为浏览器默认设置了display的属性

  • CSS属性-display(修改元素的显示类型).有4个常用值

    • block:让元素显示为块级元素

    • inline:让元素显示为行内级元素

    • inline-block:让元素同时具备行内级,块级元素的特征

    • none:隐藏元素

81(掌握)display的值-block-inline

  • CSS属性-display

  • inline-block值的特点

    • 可以和其他元素在同一行显示,还可以设置宽度和高度

  • 伪元素after也是一个行内级元素,添加红色小方格时不可以设置宽度和高度,所以需要设置display:inline-block,才能设置宽高

  • 总结

82(理解)HTML元素编写的注意事项

  • 块级元素:h1/p/div

    行内级元素:span/a/img/strong

  • 块级元素里面可以嵌套块级元素和行内级元素

  • 不要在p元素里面放div元素

  • 行内级元素中不要放块级元素

83(掌握)HTML元素的隐藏四种方法

  • 元素隐藏的4种方法

    • 方法一 : display设置为 none

      • 元素不显示出来 , 并且也不占据位置 , 不占据任何空间 (和不存在一样 );

    • 方法二 : visibility设置为hidden

      • 设置为 hidden, 虽然元素不可见 , 但是会占据元素应该占据的空间 ;

      • 默认为 visible,元素是可见的 ;

    • 方法三 : rgba设置颜色 , 将a的值设置为 0

      • rgba的a设置的是 alpha 值, 可以设置透明度 , 不影响子元素 ;

    • 方法四 : opacity设置透明度 , 设置为 0

      • 设置整个元素的透明度 , 会影响所有的子元素;

84(理解)css不生效的原因

85(掌握)认识盒子模型-盒子模型的四部分

  • 盒子模型-HTML中的每一个元素都可以看做是一个盒子,具备4个属性

    • 内容(content)

      • 元素的内容:width/height

    • 内边距(padding)\

      • 元素和内容之间的间距

    • 边框(border)

      • 元素自己的边框

    • 外边距(margin)

      • 元素和其他元素之间的间距

  • 盒子模型的四边

    • 因为盒子有四边,所以margin/padding/border/都包括top/right/bottom/left四个边

86(掌握)盒子模型-内容-width-height

  • 宽度设置:width

  • 高度设置:height

    • 对于行内级非替换元素来说,设置宽高是无效的

  • 设置其他属性

    • min-width:最小宽度,无论内容多少,宽度都>=min-width

    • max-width:最大宽度,无论内容多少,宽度都<=max-width

    • 移动端适配时,可以设置最大宽度和最小宽度

87(掌握)盒子模型-内边距-padding

  • padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;

  • padding包括四个方向, 所以有如下的取值:

    • padding-top:上内边距

    • padding-right:右内边距

    • padding-bottom:下内边距

    • padding-left:左内边距

  • padding单独编写是一个缩写属性:

    • padding-top、padding-right、padding-bottom、padding-left的简写属性

    • padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

  • padding的其他值

88(掌握)盒子模型-边框-border

  • border 用于设置盒子的边框

  • border有三个属性width,style,color

  • 设置边框的方式

  • 边框样式的设置值

  • 圆角-border-radius: 用于设置盒子的圆角

  • border-radius 常见的值

    • 数值:通常用来设置小的圆角, 比如6px;

    • 百分比:通常用来设置一定的弧度或者圆形;

  • border-radius其实是一个缩写属性

    • 将border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和border-bottom-left- radius 这四个属性简写为一个属性。

    • 一个个圆角设置比较少见

  • 如果一个元素是正方形, 设置border-radius大于或等于50%时,就会变成一个圆

89(掌握)盒子模型-外边距-margin

  • margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;

  • margin包括4个方向:

    • margin-top:上外边距

    • margin-right:右外边距

    • margin-bottom:下外边距

    • margin-left:左外边距

  • margin单独编写是一个缩写属性:

    • margin-top、margin-right、margin-bottom、margin-left的简写属性

    • margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

  • magin的其他值

90(掌握)盒子模型-padding和margin对比

  • padding和margin都能设置子元素到父元素之间的边距,但都有缺点

    • 用padding设置时,设置的边距超过父元素的宽度时,子元素会把父元素撑开;

    • 用margin设置时,设置top的边距超过父元素的高度时,会把父元素撑高

  • 总结:

    • margin一般是用来设置兄弟元素之间的间距

    • padding一般是用来设置父子元素之间的间距

91(掌握)盒子模型-margin上下传递问题

  • margin-top传递

    • 如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素

  • margin-bottom传递

    • 如果块级元素的底部线和父元素的底部线重写,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素

  • 如何防止出现传递问题?

    • 给父元素设置padding-top\padding-bottom

    • 给父元素设置border

    • 触发BFC(block formation context)格式化上下文: 设置overflow为auto

92(掌握)盒子模型-margin上下折叠模型问题

  • 垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin,这种现象叫做collapse(折叠)

  • 水平方向上的margin(margin-left、margin-right)永远不会collapse

  • 折叠后最终值的计算规则:两个值进行比较,取较大的值

  • 如何防止margin collapse?

  • 只设置其中一个元素的margin

  • 两个兄弟块级元素之间上下margin的折叠

  • 父子块级元素之间margin的折叠

注意:父子之间最好不用margin,用父元素的padding来设置间距,避免折叠

93(掌握)块级元素的水平居中

把块级元素水平居中的2种方法

  • 方法1:将块级元素改成行内块级元素

  • 方法2:margin设置成auto

94(理解)关于margin-auto值的优劣分析

  • margin-auto可以设置水平居中,但是没有办法协调多个块级元素进行垂直居中的弊端,后面需要借助flexible进行设置.

95(掌握)盒子模型-外轮廓-outline

  • outline表示元素的外轮廓

    • 不占用空间

    • 默认显示在border的外面

  • outline相关属性有

    • outline-width: 外轮廓的宽度

    • outline-style:取值跟border的样式一样,比如solid、dotted等

    • outline-color: 外轮廓的颜色

    • outline:outline-width、outline-style、outline-color的简写属性,跟border用法类似

  • 应用实例

    • 去除a元素,input元素的focus效果

      注意:a元素不单独设置:link,:visited,:hover,:focus,:active时,表示对这些统一进行了设置.

96(掌握)盒子模型-盒子阴影-box-shadow

97(理解)盒子模型-文字阴影-text-shadow

  • text-shadow用法类似于box-shadow,用于给文字添加阴影效果

    • 可以同时叠加多个shadow

  • <shadow>的常见格式如下

  • 网站测试文字的阴影:Text Shadow CSS Generator Online

98(掌握)盒子属性在行内非替换元素的特殊性

  • 盒子属性:

    • 内容content(width/height)

    • 内边距padding

    • 边框border

    • 外边距margin

  • 行内非替换元素:span/a/strong/i

  • 盒子属性的特殊性

98.1(掌握)盒子尺寸计算box-sizing

  • 前景色有没有设置到border下面(有设置)

  • 前景色会在border没有设置颜色的情况下,显示出来color颜色

  • box-sizing用来设置盒子模型中宽高的行为

    • content-box:padding,border都布置在width,height外边

    • border-box:padding,border都布置在width,height里面

98.2(掌握)盒子模型-案例练习1

  • 元素水平居中的方法

    • 行内级元素(包括inline-block元素)

      水平居中:在父元素中设置text-align:center

    • 块级元素

      水平居中:margin:0 auto

    京东案例:

99(掌握)盒子模型-案例练习2

  • 小米商品展示案例

    • 单行显示省略号

100(掌握)盒子模型-案例练习3

  • 注意

  • display:-webkit-box:用来设置多行保留时显示省略号

  • 文本显示一行出现省略号

  • 文本显示2/3行出现省略号

102(掌握)设置背景-background-image

  • background-image用于设置元素的背景图片

    会盖在 (不是覆盖 )background -color 的上面

  • 如果设置多张图片

    设置的第一张图片将显示在最上面 ,其他图片按顺序层叠在下面

  • 注意:如果设置了背景图片后,元素没有具体的宽高是不会显示出来的

103(掌握)设置背景-repeat-size-position

1 background-repeat

  • background-repeat设置图片是否要平铺

  • 常见的设置值:

    • repeat :平铺

    • no -repeat:不平铺

    • repeat -x:只在水平方向铺

    • repeat -y:只在垂直平方向铺

2 background-size

  • background-size用于设置背景图片的大小

    • auto:默认值,以背景图本身大小显示

    • cover:缩放背景图,以完全覆盖铺满元素 ,可能背景图片部分看不见

    • contain :缩放背景图,宽度或者高铺满元素但是图片保持宽高比

    • <pecentage>:百分比,相对于背景区(例如:100% 100%)

    • length :具体的大小,比如 100px

3 background-position

  • background-position设置背景图片在水平、垂直方向上的具体位置

  • 可以设置具体的数值:比如20px 30px;

  • 水平方向可以设置:left,center,right

  • 垂直方向可以设置:top,center,bottom

  • 如果只设置了1个方向,另一个方向默认是center

104(掌握)设置附加-attachment-缩写属性

  • background-attachment决定图像的位置是在视口内固定,或者随着包含它的区块滚动

  • 设置的值

    • scroll:此关键属性值表示背景相对于元素本身固定,而不是随着它的内容滚动(内容滚动,背景图片不动)

    • local :此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动(内容滚动,背景图片也滚动)

    • fixed:此关键属性值表示背景相对于视口固定。 即使一个元素拥有滚动机制,也不会随着元素的内容滚动

  • background是一些列背景相关属性的简写属性

105(理解)background-image和img的对比

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值