css

1.css
层叠样式表

2.css学习思路
1.如何查找标签
2.如何调节样式

3.css注释
HTML注释:<!---->
CSS注释:/**/
前端语言的注释在使用的时候通常遵循成双成对出现
<!--导航条开始-->
<!--导航条结束-->

/*导航条样式开始*/
/*导航条样式结束*/


web框架也有针对html页面的注释
该注释浏览器检查也是看不到的
称之为模板语法的注释
jinja2模块: {#模板语法注释#}


CSS语法结构
选择器 {属性1:值;属性2:值;属性3:值}

1.基本选择器
元素/标签选择器 直接写标签名
类选择器 点 + 类名
id选择器 # + id值
通用选择器 *

2.组合选择器
后代选择器 空格
儿子选择器 >
毗邻选择器 +
弟弟选择器 ~

3.属性选择器
标签都可以设置自定义属性
[]
[hobby]
[hobby="jdb"]
input[hobby='xxx']

4.分组和嵌套
div,span,p {color:red}
#id,.cl,span {color:red}

5.伪类选择器
a:link
a:hover 鼠标悬浮
a:active
a:visited
input:focus input框获取焦点(被点击选中)


6.伪元素选择器
p:first-letter
p:before
p:after


选择器优先级
1.选择器相同的情况下:就近原则
2.选择器不同的情况下:
行内>id选择器>类选择器>标签选择器


2.如何调节样式






两个快递盒之间的距离(标签与标签之间的距离) 称之为 外边距(margin)
纸盒的厚度(边框) 称之为边框(border)
内部的物品到盒子的距离(内部文本与边框的距离) 称之为 内边距(padding)
物品本身的大小(文本大小) 称之为内容(content)

浮动的元素 是脱离正常文档流的 也就意味着没有独占一行一说
也不再占用原来的位置


浮动的元素 会造成父标签塌陷


clear 清除浮动带来的负面影响(父标签塌陷)




定位：
所有的标签默认都是静态的 无法直接调节位置
你需要先将其设置成可定位状态
1.相对定位
相对于标签自身原来的位置
2.绝对定位
相对于已经定位过的父标签
但只给你一个父标签的长宽 让你做定位
3.固定定位
相对于浏览器窗口 固定在某个位置


浏览器会优先展示文本内容


脱离文档流
脱离文档流
1.浮动的元素都是脱离文档流的
2.绝对定位是脱离文档流的
3.固定定位也是脱离文档流的
不脱离文档流
1.相对定位不脱离文档流