计算机进制
10进制
0 1 2 3 4 5 6 7 8 9 ...
逢十进一
2进制
0 1 10 11 100 101 11 0111 1000 1001 1010 1011 1100.....
以0和1组成 逢二进一
二进制转为十进制:
从右到左,依次乘以2的幂数,进行累加
0B10 --> 0 * 2^0 + 1 * 2^1 = 0 + 2 = 2
0B110 --> 0* 2^0 + 1* 2^1 + 1 * 2^2 = 0+2+4 = 6
八进制
组成: 0 1 2 3 4 5 6 7
特点: 逢八进一
八进制转为十进制:
从右到左 依次乘以八的幂数 进行类型
010 --> 0 * 8^0 + 1 * 8^1 = 0+8 = 8
16进制
0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12...
94=9x4+4...ff=fx16=f=255
特点 逢十六进一
十六进制转为十进制:
从右到左,一次乘16的幂数 进行累加
0x10 --> 0 * 16^0 + 1 * 16^1 = 0+16 = 16
CSS级联样式表/层叠样式表
CSS组成: 选择器{CSS属性}
css的使用
在元素中使用style属性
在<style>元素中使用
使用link元素 引入外部的css
定义后缀名为.css的文件 引入要编辑的html文档里面
css选择器
一. 基本选择器
- HTML元素选择器 标签选择器
根据标签的名字匹配所有标签 - ID选择器 唯一选择器
html中使用id="名称"
css中使用#名称{属性}
注:id只能有一个名字 区分开class 用于精确查找 - CALSS选择器 类选择器
html中使用 class="名称"
css中使用 .名称{属性}
注:可以在class中通过空格分开起多个名字 - 全局选择器 全局有效 *{}
二. 层次选择器
- 关联选择器
p空格b 选中被p标签包着的b标签 - 组合选择器
多个选择器中间用逗号隔开 如 p,b - 父类选择器 >
选择父元素下的子元素 如 ul>li - 兄弟选择器 +
紧挨着的兄弟元素 只能有一个 如 p+b - ~选择器
选择p元素之后所有的兄弟元素b 如 p~b
三. 属性选择器
- E[ATT]匹配所有具有ATT属性的E元素,不考虑linux版属性值.
注:如果把元素E去掉表示匹配所有ATT属性的元素 - E[ATT=VAL]匹配所有ATT属性等于VAL的E属性
- E[ATT~=VAL]匹配所有ATT属性具有多个空格分隔值其中一个等于VAL的E元素
- E[ATT^=VAL]匹配ATT属性值以VAL开头的E元素
- E[ATT$=VAL]匹配ATT属性值以VAL结尾的E元素
- E[ATT*=VAL]匹配ATT属性的值包含VAL字符的E元素
四.伪类选择器
伪类对元素进行分类是基于特征 而不是它们的名字 属性或者内容; 特征的分类一般叫伪类
所谓的伪类选择器, 其实并不是对真正的元素进行选择, 顾称为伪类选择器
E:first-line E元素的第一行内容
E:first-letter E元素的第一个字母
E:before 在E元素之前 E:before{content: 要添加的内容}
E:after 在E元素之后 E:after{content: 要添加的内容}
2)结构性伪类选择器
- :root 将样式绑定到页面的根元素
根就是位于文档最顶部的结构元素,在html页面中最顶端的就是html 也就是改变整个html - E:not() 除了某个元素
对某个元素使用样式 但是要排除这个元素下面的某个元素 - E:empty 所有为空的E元素
- :target 连接目标
css常用属性
一.背景属性
backgound-color 设置背景属性
可以使用颜色的方法表示:英文/ 六\三位数的十六进制/ rgb()
在css中六位十六进制如果六位每两位都是相同的数字或者字母 可以使用三位数字或者三位字母表示
例如: #ffcc00--->fc0
rgb(0~255,0~255,0~255)
transoarent 透明色 背景透明 默认就是透明 写不写都一样
background-image 设置背景图片
background-image:url(图片地址)
background-repeat 设置背景重复
repeat-x 水平重复
repeat-y 竖直重复
no-repeat 不重复
默认值为repeat 水平竖直重复
background-position 设置背景位置
1.background-positin:水平位置和垂直位置 leift,center,right
2.background-positin:水平位置和垂直位置 top,center,bottom
长度单位: px em等
background-attachment 设置背景是否滚动
默认: scrll 背景图片随着滚动条滚动
fixed绑定页面 图片不随滚动条滚动
二.字体属性
normal正常字体 默认值
italic 斜体
small-caps将小写字母转换为小型大写字母
font-weight设置字体粗细 bold粗体 normal默认
font-size设置字体大小 单位: px em
font-family设置字体类型
该属性设置的字体必须存在客户端电脑中有的字体才可以使用
font字体样式统一这个标签
使用该属性时 值具有顺序关系必须是按照顺序来写不存在可以省略其中font-size font-family必须写
中文字体的2大分类:
无衬线: 黑体 文泉驿正黑 sans-serif
有衬线: 宋体 新宋 seif(像衬衫一样有菱角)
三.文本属性
text-indent首行缩进 px em一个汉字的大小
Line-height 设置当前文本的行高 px em
text-align 设置元素内容的对其方式
text-decoration设置文本修饰
none 不修饰
underline 下划线
line-through 删除线
word-spacing 设置单词之间的距离
letter-spacing 设置字母之间的距离 可以为负数
四.边框属性
boder: 宽度 线体 颜色;
none 无轮廓 color和width都会被忽略
hidden隐藏边框
dottrd 点状轮廓
dashed虚线轮廓
solid 实线轮廓
double双线轮廓
geoove 3D凹槽轮廓
ridge3D凸槽轮廓
inset 3D凹边轮廓
outset 3D凸边轮廓
五.光标属性
<span style="cursor:crosshair"> </span> 十字架
style="cursor:default" 默认
style="cursor:pointer" 小手
style="cursor:move" 移动
style="cursor:e-resize" 左右扩大
style="cursor:ne-resize" 又斜着扩大
style="cursor:nw-resize" 左斜着扩大
style="cursor:n-resize" 上下扩大
style="cursor:text" 文本
style="cursor:wait" 等待
style="cursor:help" 帮助
六.列表属性
列表属性用于设置ul和ol的样式列表
list-style-type:设置列表的符号样式
值:disc 实心圆
cricle 圆圈
square 小方框
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写字母
upper-alpha 大写字母
list-style-image:使用指定的图片来代替列表的序号
list-style-position:设置列表符号需要的位置 取值:inside 需要在内容中
outside 需要在内容外
七.表格属性
border-collapse 规定是否合并表格边框
值: separate 默认 独立
collapse 合并
border-spacing 规定相邻单元格边框之间的距离
caption-side 规定表格标题的位置
值: caption= top表格上 buttom表格下
empty-cells 规定是否显示表格中的空单元格上的边框和背景
值: show 默认 hide
table-layout 设置用于表格的布局算法
值: auto 默认
fixed 平布局 和表格内容无关
css选择器优先级 id选择器>class选择器>标签选择器
div+css
- div元素和span元素
style id class name title
2.块级元素(行级元素) 行内元素(内联元素)
2.1块级元素
常见的块级元素: div p h1~h5 table tr ul ol li等
2.2行内元素span
3.盒子模型
1) maegin 外边距 设置盒子模型的外部距离
maegin-top 设置当前元素和顶部元素之间的距离
maegin-left 设置当前元素和左部元素之间的距离
maegin-right 设置当前元素和又部元素之间的距离
maegin-bottom 设置当前元素和下部元素之间的距离
简写属性:
1.分别设置4个边的间距(1个参数)
margin:同时设置上下左右
2.分别设置4个边的间距(2个参数)
margin:上下/左右
3.分别设置4个边的间距(3个参数)
margin:上/左右/下
4.分别设置4个边的间距(4个参数)
margin:上/右/下/左
margin:opx auto; 可以让块状元素水平居中
2) padding内边距
padding-top 设置当前元素与顶部的边框之间的距离
padding-left 设置当前元素与左部的边框之间的距离
padding-bottom 设置当前元素与下部的边框之间的距离
padding-right 设置当前元素与右部的边框之间的距离
简写属性:
1.分别设置4个边的间距(1个参数)
padding:同时设置上下左右
2.分别设置4个边的间距(2个参数)
padding:上下/左右
3.分别设置4个边的间距(3个参数)
padding:上/左右/下
4.分别设置4个边的间距(4个参数)
padding:上/右/下/左
注:一般设置padding和marging 都不要同时设置 会破坏盒子模型理想的效果
3)boder边框设置盒子模型边框的属性
boeder-color:同时设定四个边框的颜色
boeder-width:同时设定四个边框的宽度
boeder-style:同时设定四个边框的样式
border-top 单独设定顶部边框颜色样式宽度
border-top-width 单独设定顶部边框宽度
border-top-color 单独设定顶部边框颜色
border-top-style 单独设定顶部边框样式
border-left 单独设定左部边框颜色样式宽度
border-left-width 单独设定左部边框宽度
border-left-color 单独设定左部边框颜色
border-left-style 单独设定左部边框样式
border-bottom 单独设定底部边框颜色样式宽度
border-bottom-width 单独设定底部边框宽度
border-bottom-color 单独设定底部边框颜色
border-bottom-style 单独设定底部边框样式
border-right 单独设定右部边框颜色样式宽度
border-right-width 单独设定右部边框宽度
border-right-color 单独设定右部边框颜色
border-right-style 单独设定右部边框样式
边框样式的取值:
detted 点线
dashed 虚线
solid 实线
double 双实线
groove 槽状线
ridge 脊线
inset 内嵌效果
outset 外凸效果
border-image 边框图片
border-radis 圆角处理
一个值代表四个角
两个值代表 左上右下; 右上左下
三个值代表 左上 右上坐下 右下
四个值代表 左上 右上 右下 左下
border简写: border:1px solid red 同时设置四个边的厚度 样式 颜色
float浮动
float 设置浮动 脱离普通文档流
取值: left左浮动 right右浮动
注意: 如果父级没有给高度, 那么他就会变成一条线 因为里面没有任何内容所有的
内容全部在浮动层面 不再普通文档流里面
如果你使用浮动 请将你的元素计算精确 如果不精确会有利弊
clear 清除浮动 让年脱离文档流的内容回到文档流里面
取值: left 清除左边的浮动
right清除右边的浮动
both清除两边的浮动 一般用这个
定位属性
1)position 设置元素的定位方式
值: static默认值 没有定位
absolute 绝对定位
relative 相对定位 相对于自己
fixed 定位到窗口
详细: absolute 绝对定位 以其他元素作为参照物移动指定距离的定位方式,默认是body,也就是整个文档的开头
注意: 绝对定位之后 该元素不会占据原来的位置
如果只使用position:absolute没有任何意义 只是脱离文档流 需要配合方位使用
left 设置定位元素的水平移动位置(距离左边的距离)
top 设置定位元素的垂直移动位置(距离顶部的位置)
right 设置定位元素的水平移动位置(距离右边的距离)
bottom 设置定位元素的垂直移动位置(距离底 部的位置)
关于绝对定位:
1.如果该元素的外元素没有任何的一个元素采用position定位 那么此时的定位参照元素是body或者说整个页面的参照点0.0
2.如果元素的外层为非static(有了默认值以外的定位位置)那么这个外层元素的成为该元素的参照点 这个外层元素的左上角才是0.0
3.如果元素的外层元素没有任何设置的position的值 那么该元素将寻找距离自己最近的其他设置过position的元素作为参照物(必须是嵌套关系)
- relative 相对定位
相对定位 以当前元素作为参照物移动指定的距离的定位元素 该元素在什么位置那么他就是以自己的左上角为0.0
注意: 该元素依旧占据原来的位置 fixed 固定位置
overflow: hidden/scroll/auto/visible
visiblr 始终可见(默认值)
hidden 超出部分隐藏
scroll 滚动条
auto 自动
