WEB开发技术基础知识整理——CSS

简介

css被称作层叠样式表。

让网页结构和样式分离

将HTML文档的表现与内容分离

使HTML文档结构简化、清晰、灵活

极大的提高了HTML文档的可读性

Cascading使样式结构简化、清晰、灵活

增强了网站全局的一致性

CSS文件存储在浏览器的高速缓存中，多个页面

必重新装载分析样式，降低网络数据传输

便于针对不同设备目标定制不同的样式

为视觉障碍者提供帮助

重点

CSS的作用

CSS的基本编写规范

CSS代码的声明定义使用方法

CSS层叠的表现形式及显示效果

Boxing model，表现形式、显示效果、声明定义方法

浮动属性的特点

各应用场景下的尺寸单位

Inline、block、Inline-block属性的特点

CSS的ID、类、元素、子、后代、属性等选择器的声明定义方法

使用方式

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

h1{color：blue;/*这是一条注释*/font-size:12px}

选择器

id选择器

根据元素里面的id属性值进行选择

类似于#id1

类选择器

.class 根据属性class进行选择，可以是一个组

例如h3.green

组合选择器

后代选择器：元素内所有符合第二级选择的元素

子选择器：元素内所有符合第二级选择器的，直接子元素

伪类

：hover 悬浮

：nth-child（odd/even）奇数偶数元素

：invalid 未通过验证

一个元素可以层叠样式

实例：links

：hover （放到link和visited之后有效）

：visited

：link

：active（hover之后有效）

padding（框长宽）

允许多个元素同时选择

a,p,h1{}

属性选择器

a[target]选择a中的target元素

如何使用

外部样式表，外部css文件

内部样式表，内部单独开辟style标签

内联样式表，在元素标签内部添加style属性

优先级，内联样式 > 内部样式表 > 外部样式表

层叠顺序（低--高）：缺省设置，外部，内部，内联

必须按照正确顺序加载css（例如先bootstarp，后基于bs的ui，最后自定义样式）

颜色

rgb（255，55，0）

或者#ff0000

元素

尺寸表示：em，相对于当前元素应有尺寸，用于 缩进

rem相对于html字体尺寸

%相对于父容器百分比

px相对于逻辑像素，相对的绝对单位

字体属性建议使用em，rem

元素布局建议使用px%

容器

外到内：margin，border，padding，content

border

border-style 线条样式 必须

border-width 宽度（5px，medium，thick（顺序上右下左）

border-radius 弧度

border-（top，right，bottom，left）-style 边样式

border-color 颜色

h1{color:blue;font-size:12px;background-color:#000000;border-bottom:6px solid red;}

padding

Padding，内边距，决定了内容至边线的距离；

元素背景颜色决定开空间颜色

margin

外边距，元素边线到其他元素的距离

颜色由父亲容器决定

无法定义颜色

若margin:auto时，可实现动态变化

两边的margin会取最大值

background

background-color

background-image

background-repeat 重复定义

background-position 图片位置

background-attachment 背景不动

text

color

opacity透明度

text-align 对齐方式

text-indent 缩进？

text-decoration （overline,line-through,underline,none）

text-transform uppercase，lowercase，capitalize

letter-spacing 字母间距

line-height 行间距

font

font-family：字体

font-style：字体样式，倾斜，正常

font-size：大小

font-weight：normal，lighter，bold，900 字体粗细

list

list-style-type 样式

list-style-image 图片

list-style-position 外部还是内部，默认外

ul内边距与li外边距

table

border

border-collapse 内部线是否存在

Th，默认字体加粗居中对齐，Td，默认字体左对齐

在tr中声明内/外边距，字体等无效；必须声明在td中

一些转换

li转换成inline级可以横向排列

span转成block级别可以占用一整行

display: none; 元素不存在，不占用布局空间

visibility: hidden;元素存在不可见，仍占用布局空间

Inline元素，纵向内/外边距无效，横向有效；高宽无效；但可与其他元素同行显示

Block元素，内外边距，高宽均有效；但无法与其他元素同行显示

display=inline-block；对外inline，对内block，同行显示并设置高度

overflow 显示 visible溢出部分不截断，留在外边 hidden溢出截断 scroll 溢出部分截断其他为滚动条 auto基于内容长度绝对显示滚动条

float 只能左右不能上下，当浮动元素高度超过父容器时，可设置属性使父容器计算浮动元素尺寸，父容器将在浮动元素定位布局后绘制。

页面定位

默认按照页面流程定位，top等无效

relative 可以使用

absolute 相对的绝对定位

fixed相对浏览器位置固定

flex容器弹性布局

必须声明弹性容器(flex container)，display属性设置为flex

弹性项，具有弹性的，类似inline-block的特性

flex-direction j决定主轴方向 row默认横向，，column纵向

flex-wrap 决定是否换行

flex-flow(组合)

justify-content 主轴对齐方法

align-items 纵轴对齐方式

align-content

子元素

order

flex-grow 确定宽度后占用剩余宽度比重

flex-shrink 缩小比重，用于固定尺寸

flex-basis 确定宽度前的初始长度

flex

align-self 纵轴对齐方式

nav列表元素

list-style-type：none 取消列表样式

width：确定最佳宽度

display：block

text-decoration：none取消下划线

附加：html5布局

本文在博客 几何军工作室 首发

https://kfzjw008.github.io