CSS通常由选择器、属性、属性值组成多个规则可以结合在一起使用style标签来包裹 包含在head标签中style p{ color: blue; font-size: 26px; } /style导入css的方式内联样式 直接放在标签 style 中直接导入内部样式表 head 在head中利用style外部样式表 在另一个文件中head里面利用另一个标签链接到HTML文档中允许在不同网页用一个样式从上往下优先级递减选择器子元素选择器div classfather p这是一个子类/p /div.father .son{ color: blueviolet; } .是找类 是找亲儿子后代选择器包含选择器div classfather p classson这是一个子类/p div p classgrandson这是一个后代选择器示例/p /div /div 是找亲儿子 所以说语法就不能加 grandson不是亲儿子所以加空格.father .son{ color: blueviolet; }兄弟选择器例子p只是一个普通的p标签/p h3相邻兄弟选择器/h3 p这是另一个p标签/ph3 p { color: brown; }他寻找的是p标签h3和p中间不能有其他标签必须紧邻着选择器直到找完只选1 个元素那个直接跟在 h3 后面的第一个 p寻找所有的h3p、伪类选择器选中HTML文素中的特定状态或者位置的 不仅仅是本身的属性伪类选择器 元素的 “特殊状态”我用最通俗、最直白的话给你讲一听就懂1. 啥叫伪类伪 假的、不是真标签类 状态、样子合起来不是你写在 HTML 里的 class而是元素 “天生自带的状态”浏览器自动给元素加的隐形状态你直接用就行。2. 最常见的 4 个伪类必须记住全部以:开头①:hover—— 鼠标放上去cssdiv:hover { background: red; }意思鼠标碰到 div 时变红②:active—— 鼠标点下去时cssbutton:active { background: blue; }意思按下去那一瞬间变蓝③:first-child—— 第一个子元素cssp:first-child { color: green; }意思如果 p 是爸爸的第一个孩子就变绿④:nth-child(数字)—— 第几个孩子cssp:nth-child(2) { color: orange; }意思爸爸的第二个孩子是 p就变橙3. 伪类和普通 class 的区别普通 class.red→你自己写的伪类:hover→浏览器自带的不用写在 HTML 里4. 一句话总结伪类选择器 选中元素的 “特殊状态 / 位置”鼠标放上去 →:hover第一个孩子 →:first-child第几个孩子 →:nth-child(数字)CSS属性块元素和行内块元素font代表 字体 属于复合属性块内元素跟行内块元素都能设置width和height 行内块可以有行内块但不能有块元素行内元素不能添加宽和高这三种元素可以互相转换利用行内样式或者内部样式 display元素盒子模型border属性是符合属性可以设置边框的样式 、宽度和颜色 不用属性的话border-width四个边框遵循上右下左或者width-left 复合属性padding 内边距边框与文本之间距离margin 外边距 浏览器跟边框距离浮动与行内块区别块与块之间没有边框 只会在父元素内部移动三大特性脱标一行显示顶部多块对齐具有行内块特性父类坍塌 清理浮动法1 overflow:hidden; 在父类样式中书写法2.father::after{ content:; display: table; clear: both; }定位position: relative; left: 120px; top: 40px;往上移写bottom 向下移写top 左移right 右移left绝对定位图层相当于高了一级固定定位positionfixed