## CSS：页面美化 ### 1.概念 \~\~\~\~ html Cascading Style Sheets 层叠样式表 \* 层叠：多个样式可以作用在同一个html的元素上，同时生效 \~\~\~\~ ### 2.样式表 \~\~\~\~ html 1. 功能强大 2. 将内容展示和样式控制分离 \* 降低耦合度。解耦 \* 让分工协作更容易 \* 提高开发效率 \~\~\~\~ ### 3.CSS使用 \~\~\~\~html 1. 内联样式 行内样式 \* 在标签内使用style属性指定css代码 \* 如： hello css 2. 内部样式 \* 在head标签内，定义style标签，style标签的标签体内容就是css代码 \* 如： hello css 3. 外部样式 1. 定义css资源文件。 2. 在head标签内，定义link标签，引入外部的资源文件 \* 如： \* a.css文件： div{ color:green; } hello css hello css \* 注意： \* 1,2,3种方式 css作用范围越来越大 \* 1方式不常用，后期常用2,3 但是1优先级最高 2 3要看加载顺序 \* 3种格式可以写为： \~\~\~\~ ### 4.CSS语法 \~\~\~\~html css语法： \* 格式： 选择器 { 属性名1:属性值1; 属性名2:属性值2; ... } \* 选择器:筛选具有相似特征的元素 \* 注意： \* 每一对属性需要使用；隔开，最后一对属性可以不加； \~\~\~\~ ### 5.选择器 \~\~\~\~html 选择器：筛选具有相似特征的标签 \* 分类： 1. 基础选择器 1. id选择器：选择具体的id属性值的标签.建议在一个html页面中id值唯一 \* 语法：#id属性值{} \* 注意：id选择器优先级最高 2. 类选择器：选择具有相同的class属性值的标签。 \* 语法：.class属性值{} \* 注意：类选择器选择器优先级高于标签选择器 3. 标签选择器：选择具有相同标签名称的标签 \* 语法： 标签名称{} 2. 扩展选择器： 1. 选择所有标签： \* 语法： \*{} 2. 并集选择器： \* 选择器1,选择器2{} 3. 子选择器：筛选选择器1元素下的选择器2元素 \* 语法： 选择器1 选择器2{} .h1 font{} class为h1的标签中的所有font标签 .h1\>font{} class为h1的标签中子代为font的标签 4. 父选择器：筛选选择器2的父元素选择器1 \* 语法： /\* 选择包含 p 元素的 span \*/ span:has(p) { border: none; } /\* 选择包含 .child 元素的 .parent \*/ .parent:has(.child) { border: none; } /\* 选择直接子元素中包含 .child 元素的 .parent \*/ .parent:has(\>.child) { border: none; } /\* 选择紧挨着 p 元素的前一个元素 span \*/ span:has(+p) { border: none; } /\* 选择 p 元素前面的所有兄弟 span 元素 \*/ span:has(\~p) { border: none; } 5. 属性选择器：选择元素名称，属性名=属性值的元素 \* 语法： 元素名称\[属性名="属性值"\]{} 6. 伪类选择器：选择一些元素具有的状态 \* 语法： 元素:状态{} \* 如： \* 状态： //\* link：初始化的状态 //\* visited：被访问过的状态 \* active：正在访问状态 \* hover：鼠标悬浮状态 a{ text-decoration:none; /\* cursor: help; \*/ font-size: 20px; color: green; } /\* 鼠标放入效果 \*/ a:hover{ color: #00FFFF; } /\* 点击不松手 \*/ a:active{ color: #FF00FF; } text-decoration:none 取消超链接默认效果 //鼠标状态 cursor: default; pointer wait help text crosshair \~\~\~\~ ### 6.属性 \~\~\~\~html 属性 1. 字体、文本 \* font-size：字体大小 \* color：文本颜色 \* text-align：对其方式 center 文本左右居中 \* line-height：行高 一边设置高度 一边内容垂直居中 2. 背景 \* background： 路径 是否重复 上下居中 同时设置：url(图片路径) no-repeat center 3. 边框 \* border：设置边框，符合属性 同时设置：粗细 线形 颜色 4. 尺寸 \* width：宽度 \* height：高度 5.visibility:hidden visible display="none" "" \~\~\~\~ ### 7.盒子模型 \~\~\~html 控制布局 \* margin：外边距 \* padding：内边距 \* 默认情况下内边距会影响整个盒子的大小 \* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小 默认 上右下左 \* float：浮动 \* left \* right box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； 如果要给行级标签添加宽高 则需要先变为块级 添加display: block - 前两个属性是必须写的。其余的可以省略。 - 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset div { width: 200px; height: 200px; border: 10px solid red; /\* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); \*/ /\* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； \*/ box-shadow: 0 15px 30px rgba(0, 0, 0, .4); } transition:0.5s; 变化时间 overflow:hidden; 超出部分不显示 \~\~\~ ### 8.定位 \~\~\~ html 1.绝对定位 position: absolute; 不会对其他元素产生影响 相对于页面左上角 定位 2.相对定位 position: relative; 相对于所在容器的左上角 定位 依然会对该容器内其他元素产生影响 3.浮动定位 position:fixed; top right bottom left 不会对其他元素产生影响 相对于窗口的左上角定位 \~\~\~ ## 案例： 小米商城