html和css学习第七天、第八天

父子选择器 派生选择器

css 权重

!important 无穷大 css属性:red!important;

行间样式 1000html属性<div style="color:red"></div>（js给元素设置样式，作用到行间样式）

#id 100 选择器

.class|伪类|属性 10 选择器

标签元素 伪元素 1 选择器

*>,space 0选择器

css样式不生效

1.权重值大小

2.选择器失效

3.css文件未被引入

4.语法错误

id唯一条件 js中的唯一的

---

只要写在同一行的权重相加

并列选择器 分组选择器 

font-size字体大小 16px（默认）互联网一般12px \14px，绝对设置等高

font-weight字体粗细lighter normal bold bolder 100 200-900

font-style italic斜体

font-family: arial等线体 cursive楷体

color字体颜色

1.土鳖式（纯英文单词）
2.颜色代码
#000000
r      g     b
00-ff 00-ff 00-ff
3.颜色函数
rgb(255,255,255)白色

border边框：1px solid black;

 border-width；    border-style：dotted点dashed条solid固体；  border-color；

border-left-color;

transparent透明色

text-align对齐方式

垂直居中：line-height单行文本所在高度=height容器所在高度

text-indent:2em缩进两个文本距离

单位	含义
em	1 em=1 font-size=16px（相对）

text-decoration：line-through；中划线 underline;下划线

cursor：光标定义值 pointer 变成小手help变成问号

伪类选择器a:hover{

        background-color:orange;

        border-radius：10px;

}权重10

css特性

1.行级元素 inline

span strong em a del

feature：内容决定元素所占位置，不可以通过css改变宽高

2.块级元素 block

display:block后面不可以站人 

div  p ul li ol form address           

feature：独占一行，可以通过css改变宽高

3.行级块元素 inline-block

img

feature:内容决定大小，可以改宽高

凡是带有inline的元素，都有文字特性

 

 先定义功能，后选择，等着别人去引用（先定义功能，后选配功能）

css功能包

初始化标签

a{

text-decoration:none;

color:black

}

em{

font-style:normal

color:red;

}

通配符选择器*{

padding:0;

margin:0;

text-decoration：none；

line-style：none；

}

盒子模型

 

盒子三大部分

盒子的组成部分：

盒子壁 border 内边距 padding 盒子内容 width+height

margin+border+padding+（content=width+height）

padding：上 下 左 右

                上 左右 下

                上下 左右

                四个方向

 

realWidth realHeight不看margin 盒模型计算

body有天生的margin :8px

层模型 absolute 1.脱离原来位置进行定位 相对于最近的有定位的父级进行定位，如果没有相对于文档进行定位

relative1.保留原来位置进行定位 相对于自己的原来位置进行定位

fixed 可以应用到返回页面头的操作