css样式行内样式直接在代码行中进行定义 h1 stylecolor: red;nihaonihao/h1内部样式在html中进行代码编写通过定义h1p或id等进行css编写 h1{ color:red; }外部样式直接创建css文件可以在不同的页面同时使用。样式表的优先级1.行内样式优先级最高内部与外部的样式相当于定义默认样式 2.内部与外部优先级相同谁的代码行更靠下谁的优先级高 3.!important 可以强制最高优先级 4.选择器权重id class 元素 通配语法规范选择器 { 属性: 值; } 每条声明以分号(;)结束属性与值之间用冒号(:)连接css单个选择器通配选择器星号(*)放在css大括号前表示通配选择器将html里的所有元素选中 *{ color:orange; }元素选择器选中本页面所有的元素进行选中进行重定义 h2{ color: red; }类选择器在元素中使用class类名定义类名后将指定的类进行重定义。 warning 1.哪怕元素不同也可以使用同一类 2.一个元素可以同时使用多个 class在 class 中添加多个类名空格隔开 .speak{ color: red; } .speak2{ color: red; } p classspeak speak2说话的文字是红色的/pid选择器将指定id的元素进行更改 warning 1.id是唯一的 #ida{ color:red; } p idida说话的文字是红色的/p复合选择器交集选择器(且)选择同时符合多个条件的元素进行更改 .rich{ color:red; } p.rich{ color:blue; font-size:16px; } p classrich我的字体16像素蓝色/p h1 classrich我的字体红色/h1并集选择器(或)让不同选择器使用同一代码用逗号(,)连接 .rich,dog{ color:red; background-color:grey; } p classrich我的字体16像素蓝色/p h1 classdog我的字体红色/h1后代选择器选择被a元素包裹中的b元素进行定义可以俩个及以上不限层级 div p{ color: red; } div p说话的文字是红色的/p section p说话的文字也是红色的不限层级/p /section /div p说话的文字不是红色的/p子代选择器用链接将被a元素直接包含的b元素进行选择只能选直接子元素 div a { color:red; } div a href#文字是红色的/a /div兄弟选择器用选择紧邻(只往下看上面不管)的兄弟元素用~选择后面所有的兄弟元素 h1 p{ color: red; } h1我是标题/h1 p紧邻 h1 的兄弟文字是红色的/p p后面的兄弟不满足相邻条件不变色/p属性选择器通过元素的属性或属性值来选中元素 [href]{ color: red; } a hrefhttps://www.baidu.com带 href 属性的链接变红/a p不带 href 属性不变色/p 属性选择器的几种写法 [attr]选中带有该属性的元素 [attrval]属性值完全等于 val 的元素 [attr^val]属性值以 val 开头的元素 [attr$val]属性值以 val 结尾的元素 [attr*val]属性值包含 val 的元素伪类选择器选中元素的某种特定状态用冒号:连接常用伪类可分为以下几类动态伪类根据交互状态:link 未访问的链接 / :visited 已访问的链接 / :hover 鼠标悬停 / :active 鼠标按下 / :focus 获得焦点 :link{ color: blue; } :visited{ color: purple; } :hover{ color: red; } :active{ color: orange; } :focus{ color: green; }结构伪类根据在父元素中的位置:first-child 第一个子元素 / :last-child 最后一个子元素 / :nth-child(n) 第 n 个子元素 / :nth-child(odd/even) 奇偶位子元素 :first-child{ color: red; } :last-child{ color: blue; } :nth-child(2n){ color: green; }否定伪类:not(选择器) 选中所有不符合该选择器的元素 :not(p){ color: red; } p这是 p不变色/p div这是 div变红/divUI 伪类表单元素状态:checked 被选中的表单元素 / :disabled 被禁用的元素 / :enabled 可用的元素 / :valid 输入有效 / :invalid 输入无效 / :required 必填项 / :optional 选填项 :checked{ outline: 2px solid red; } :disabled{ color: gray; } :enabled{ color: black; } input typecheckbox checked 我被选中了 input typetext disabled value我被禁用了 input typetext value我可以输入目标伪类:target 选中当前被锚点跳转定位到的元素 :target{ color: red; } a href#p1跳转到 p1/a p idp1被锚点定位到这里时文字变红/p语言伪类:lang() 选中指定语言的元素 p:lang(en){ color: blue; } p langenHello, English./p p langzh这是一段中文不变色/p元素间的关系父元素直接包裹某个元素的元素是这个元素的父元素子元素被某个元素直接包裹的元素是那个元素的子元素祖先元素某个元素的父元素的父元素以及之后的父元素是祖先元素后代元素子元素的子元素及他们的子元素是后代元素兄弟元素同等级的元素是兄弟元素文字特性像素px文字颜色一共有四种方法 1.直接写颜色单词 color:red/blue/green/chocolate; 2.rgb表示 color: rgb(x,y,z);(xyz分别表示红绿蓝三个通道的数值) 3.color: #xxyyzz;(十六进制简写 #fbc 代表 #ffbbcc)可以在后面再加一组数字来表示透明度 4.hsl表示由圆形色相环饱和度亮度共同构成 color: hsl(h, s%, l%);字体大小font-size:**px; 字体实体框通常偏下宽度紧贴文本体型文本压在基线上字体族font-family:******;字体风格(是否倾斜)font-style:normal(默认)/italic(斜体)*推荐使用/oblique(斜体)字体粗细font-weight:lighter(细)/normal(默认)/bold(粗)/bolder(更粗)字体符合属性所有的字体属性综合要注意排序字体大小一定要是倒数第二位字体族一定要是倒数第一位 font: italic lighter 100px 微软雅黑;常用的文本属性文本颜色同上文文字颜色四种方式 1.直接写颜色单词 color:red/blue/green/chocolate; 2.rgb表示 color: rgb(x,y,z);(xyz分别表示红绿蓝三个通道的数值) 3.color: #xxyyzz;(十六进制简写 #fbc 代表 #ffbbcc)可以在后面再加一组数字来表示透明度 4.hsl表示由圆形色相环饱和度亮度共同构成 color: hsl(h, s%, l%);文本间距letter-spacing:**px;(可以有负数从而达到字母叠在一起)文本修饰text-decoration:overline(上划线)/underline(下划线)/line-through(中间线)/none(没有) 超链接使用 none 可以把下划线去除文本缩进首行空两格 text-indent:**px;文本对齐文本左中右对齐 text-align:left/center/right行高与字体行高就是右键选择文字时蓝色框高低差 行高最好大于文字大小预留位置防止重叠 line-height:**px; warning 最舒适的大小为字体大小的1.5-2倍 只能控制行内元素 四种方法 1.值为像素 2.值为normal 3.值为数值(字体大小的倍数)最常用 4.值为百分比(字体大小的倍数) height:**px;(行高,不影响上下行间距)常用文字属性vertical-align:top(顶部对齐)/bottom(底部对齐)/baseline(基线对齐)/middle(元素中部与父元素的x中心高度对齐)列表相关属性ul/ol/li{ list-style-type:upper-roman(罗马数字)/none(小时)/decimal(阿拉伯数字)调整列表符号 list-style-position:inside/outside选择列表符号在行内或行外 list-style-image:url(路径);更改列表符号为图像 list-style:** ** **;前面三个三合一无顺序区分 }边框相关属性table(外边框){ border-width:2px;宽度 border-color:red;颜色 border-style:solid(实线)/double(双实线)/dotted(点线)/dashed(虚线);线的款式 border:** ** **;三合一无顺序 } td,th(内边框){ border } /*border可以用于h2等其他属性*/表格独有属性table(表格){ border-collapse:collapse(合并)/separate(分离);相邻单元格边框是否合并 border-spacing:2px;单元格间距(separate时生效) caption-side:top(上方)/bottom(下方);表格标题位置 empty-cells:show(显示)/hide(隐藏);空单元格是否显示 table-layout:auto(自动)/fixed(固定);表格布局算法 }背景相关属性div{ background-color:red/#fff;背景颜色 background-image:url(路径);背景图片 background-repeat:no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺);背景平铺方式 background-position:center(居中)/top left(左上角);背景位置 background-size:cover(铺满)/contain(完整显示);背景尺寸 background:** ** **;综合简写无顺序 }鼠标相关属性div(任意元素){ cursor:default(默认箭头)/pointer(手型)/text(文本竖线);鼠标光标样式 cursor:move(移动十字)/wait(等待沙漏)/help(帮助问号);鼠标光标样式 cursor:not-allowed(禁止)/crosshair(十字准星)/grab(抓手);鼠标光标样式 cursor:zoom-in(放大)/zoom-out(缩小);图片缩放光标 cursor:url(位置),pointer;更改鼠标样貌 }元素显示模式块元素 (block)独占一行宽度默认铺满父元素可以直接设置宽高主体结构标签: 、排版标签:~、、、、列表标签:、、、、 、表格相关标签: 、、、、、与行内元素 (inline)在页面中不独占一行一行中不能容纳下的行内元素会在下一行继续从左到右排列 宽度由内容展开高度也由内容展开 (大小无法直接定义)文本标签:、、、、、、与与行内块元素 (inline-block)页面不独占一行一行中不能容纳下的行内元素会在下一行继续从左到右排列 宽度由内容展开高度也由内容展开 大小可以直接定义图片:单元格: 、表单控件: 、、、框架标签:修改元素显示形式更改元素的属性 display:block(块元素)/inline(行内元素)/inline-block(行内块元素)/none(消失)盒子模型外边距边框内边距内容区 padding内边距 内容区设置的颜色会填充内边距与边框内边距与边框的颜色为覆盖 margin只影响盒子位置不影响大小 其余三个都影响盒子大小 宽度 min-width:**px; 最小值低于**不形变 max-width:**px; 最大值大于**不形变 width:**px; 固定大小 高度 min-height:**px; 最小值低于**不形变 max-height:**px; 最大值大于**不形变 height:**px; 固定大小盒子内边距padding:**px; padding:**px **px;上下左右 padding:**px **px **px;上 左右 下 padding:**px **px **px **px;上 右 下 左 padding-left:**px; padding-right:**px; padding-top:**px; padding-bottom:**px; 行内元素的上下内边距只有样貌没有碰撞体积盒子边框border-width: ;(上下左右分别调整) border-style: ;(上下左右分别调整) border-color: ;(上下左右分别调整) border-位置-属性: ;(分别调整示例) border:四个位置三个属性统一调整 border-位置: ;单边位置三个属性统一调整盒子外边距margin:**px; margin:**px **px;上下左右 margin:**px **px **px;上 左右 下 margin:**px **px **px **px;上 右 下 左 margin-left:**px; margin-right:**px; margin-top:**px; margin-bottom:**px; warning!!! 父盒子中的子元素外边距从父盒子的内容区开始计算 行内元素无法设置上下margin margin:auto;代表距离能有多远就多远 margin-left:auto; margin-right:auto; 可以直接表示居中对齐margin塌陷父子嵌套时子元素的 margin-top 会传递到父元素身上导致父元素一起下移 触发条件父元素与第一个子元素之间没有 border、padding 或内容隔离 解决措施 1.给父元素加 border 或 padding 2.给父元素设置 overflow:hidden 3.给父元素设置 display:flex现代推荐方案margin合并相邻兄弟元素的垂直 margin 不会相加而是取最大值 现象上面元素 margin-bottom 与下面元素 margin-top 重叠谁大取谁 解决措施只给其中一个元素设置垂直 margin或改用 padding处理内容溢出overflow:visible(默认溢出可见)/hidden(溢出隐藏)/scroll(一直显示滚动条)/auto(需要时滚动条) overflow-x / overflow-y 可分别控制水平、垂直方向 overflow:hidden 会创建 BFC常用来解决 margin 塌陷隐藏元素的两种方式display:none 彻底移除不占位无法过渡动画 visibility:hidden 隐藏但占位可过渡动画 opacity:0 透明但占位可过渡动画样式的继承可继承属性字体相关font-*、color、line-height、text-align 等 不可继承属性盒子相关width/height、margin、padding、border、background 特殊a 标签的 color 不继承父级浏览器默认样式优先标题 h 的 font-size 也不继承 可以用 inherit 强制继承initial 恢复默认值元素的默认样式浏览器自带默认样式如 html/body 有默认 margin(约8px) h1~h6 有不同字号并加粗p 有上下 marginul 有默认 padding-left a 默认蓝色带下划线 常用做法reset 清零——*{ margin:0; padding:0; } 或引入 normalize.css 统一默认样式布局技巧问题一导航栏文字之间出现巨大间距### 出现的问题 导航栏文字之间的间距过大且不受控看起来整行文字都被撑开了 ### 产生原因 word-spacing 控制的是文字之间的空白会把所有文字间距一起放大 导航栏真正需要的间距是每个链接 a 自己之间的间距不是文字间距 ### 解决措施 1. 不要用 word-spacing 控制导航栏间距 2. 用 a { margin } 控制导航按钮之间的间距 3. 用 input { margin-left } 控制搜索框与前面的距离 错误写法巨大间距由 word-spacing 产生 div{ word-spacing: 20px; } 正确写法 a{ margin-right: 20px; } input{ margin-left: 20px; } 如果下载客户端和输入框还是太远单独给最后一个链接处理 a:last-child{ margin-right: 0; } warning word-spacing 影响所有文字空白a { margin } 控制按钮间距input { margin-left } 控制搜索框距离问题二hover 动画没有效果### 出现的问题 鼠标悬停时链接没有出现预期的下移/位移动画 ### 原因一transform 对行内元素inline不起作用 链接 a 默认是行内元素transform 无法作用于行内元素所以不会移动 解决措施给 a 加 display:inline-block;不影响布局推荐或 display:block; a{ display: inline-block; } ### 原因二transition 写错位置 transition 写在 hover 状态里鼠标移开时浏览器找不到动画规则元素会瞬间恢复 解决措施transition 写在元素的原始状态hover 里只写变化的属性 错误写法 a:hover{ transform: translateY(2px); transition: all 0.3s; } 正确写法 a{ transition: all 0.3s; } a:hover{ transform: translateY(2px); } ### 原因三行内图片用百分比宽度影响布局 width:2%;是相对父元素宽度计算的行内图片可能导致高度变化 解决措施改为固定像素或用 display:block 处理 ### 更稳定的方案flex 布局 用 flex 可以让文字垂直居中、图片不乱跳、hover 下移效果更稳定 nav{ display: flex; align-items: center; }