HTML day03-1

HTML前端班day03课堂内容记录一

主要内容：复习day02

css
层叠样式表 修饰网页的

css的语法
1.行内样式的语法
2.内部样式表和外部样式表的语法

css的使用方式
1.行内样式
2.内部样式表
3.外部样式表
4.外部导入样式

css选择器
ID选择器
class选择器
标签选择器
组合选择器
子代选择器
后代选择器
通用选择器
伪类选择器 :hover鼠标悬浮上去的样式

css样式的优先级
1.根据权重来确定
2.如果权重相同，就近原则（后定义原则）

权重：仅仅只是一个参考的值，并没有实际的含义
内联 1000
id 100
class 10
伪类 10
标签 1
通用 0
!important 只要出现就以这个为主
注意：计算权重的时候不需要去管子代、后代。直接加起来就OK

颜色的三种表示方法
1.颜色英文单词
2.16进制
3.rgb 扩展 rgba

文本类样式
color
line-height 得确定里面有几行
text-align
text-decoration
font-size
font-style
font-family
font-weight

元素的显示方式
display
inline 行内元素
inline-block
block
none 隐藏

元素的隐藏
visibility:hidden

轮廓
主要用在input标签中，只需要清空即可
列表
list-style：none 即可
鼠标的样式
cursor
透明度
opacity: 0.1; 取值：0-1之间 可以为0和1 0表示全透，1表示全不透
rgba(255,0,0,0.1)

面试题
visibility:hidden 和 display:none 的区别？
都是隐藏
但是visibility：hidden隐藏以后还会继续保留位置
display：none 隐藏以后就不会占位置


opacity和rgba的区别？
opacity针对整个元素的，包括里面的背景颜色，图片，文字...
rgba只针对背景颜色