HTML和CSS学习笔记

  • Post author:
  • Post category:其他


这是我的Html和css学习过程中的心得,因为之前就学习过这些内容,所以现在复习起来有些轻松,只需要重点复习自己的遗忘点就好了;

html的注释是:

css的注释是:/

css的注释

/

行内元素:block,一行内允许出现多个元素,元素的大小不允许自己调节,大小根据内容自己确定;内部只允许且套行内元素,但是文字标签如p则只允许嵌套文字,a、span、em、i

块状元素:inline,一行内只允许出现一个元素,可以理解为一个容器,他的里面可以嵌套其他的行内、块状元素都可以,可以自己调节元素的大小

行内块元素:inline-block,既可以一行存放多个元素,又可以调节元素的大小

css的格式:

行内样式:

行内样式

内部样式:

外部样式:

css样式继承:

text-

font-

line-

color-

开头的样式属性可以被子类继承

css样式发生冲突时;

同一级样式发生冲突时,后者的样式覆盖前面的

css样式权重:

继承或者* 0,0,0,0

标签选择器 0,0,0,1

类选择器或者伪类选择器 0,0,1,0

id选择器 0,1,0,0

行内样式 1,0,0,0

计算标签的样式:先看该标签有没有被选中,如果选中了,按照权重计算公式;如果没有选中,继承的权重为0

选择器:

标签选择器:

div{

}

类选择器:

.red{

}

类选择器

id选择器:

#red{

}

id选择器

类选择器和id选择器的区别是:id是唯一的,而class则可以重复。

后代选择器:

div p{

}

子代选择器:

div>p{

}

后代选择器和子代选择器的区别是:后代选择器的范围是所有下级元素标签,而子代选择器的选择范围是最靠近它的的元素标签。

通配选择器:选择所有元素

*{

}

伪类选择器:

a:link{ /

未被访问过的链接

/

}

a:visited{/

已访问过的连接

/

}

a:hover{/

鼠标悬停时展示的状态

/

}

a:active{/

鼠标点击不放开的状态

/

}

交集选择器

/

交集选择器的第一个的第二个选择器为id选择器或者类选择器

/

p.span{

}

并集选择器:

p,div,span{

}

偏僻的属性

table的单元格相邻的边框重叠,导致颜色加深,使用border-collapse:collapse将表格重叠的边框改为一条

padding简写:

一个值:代表四个属性

两个值:上下,左右

三个值:上,左右,下

四个值:上,右,下,左

文字 元素页面居中对齐 margin: 0 auto

图片在页面居中对齐 background-position: top auto

rgba(0,0,0,0.3) 黑色半透明颜色

最后,我个人感觉一些标签不需要刻意的去记忆,只需要记住用法或者记住有这麽个标签就好了,如果忘记的话,就去查查字典啊。。



版权声明:本文为Y0admin原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。