【web】WEB开发技术基础知识整理（2）

WEB开发技术基础知识整理（2）

第二部分——CSS

简介

• css被称作层叠样式表。
• 让网页结构和样式分离
• 将HTML文档的表现与内容分离
• 使HTML文档结构简化、清晰、灵活
• 极大的提高了HTML文档的可读性
• Cascading使样式结构简化、清晰、灵活
• 增强了网站全局的一致性
• CSS文件存储在浏览器的高速缓存中，多个页面
• 必重新装载分析样式，降低网络数据传输
• 便于针对不同设备目标定制不同的样式
• 为视觉障碍者提供帮助

使用方式

• 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布局

<header>
<nav>
<main>
<aside>
<article>
<footer>
<section>