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>