9.1免费版网火影忍者游戏

CSS 引入方式行内式直接写在标签style内优先级高不推荐大量使用嵌入式在 HTML 的head里写style.../style外部式通过link relstylesheet href...引入推荐

1 样式优先级同权重冲突时行内式 嵌入式 外部式另外还受选择器权重specificity和!important影响见下文。

link 标签补充rel/typerel当前文档与外部资源的关系常见stylesheet引入样式表其他了解即可icon、preload、prefetch、nofollow、canonical等type外部资源 MIME 类型例如text/css

选择器Selectors统一格式选择器{属性名:属性值;}

1 基础选择器

3.

1 元素标签选择器用于修改某类标签的共有样式p{color:red;}

3.

2id选择器#id一个页面中同名 id 不应重复dividoneid选择器/div#one{color:red;}

3.

3 class类选择器.类名可复用可给多个元素设置同一类样式divclassone类选择器/div.one{color:red;}

2 高级选择器

3.

1 后代选择器空格选择“某元素内部的所有某类后代”div a{/* div 里面所有 a */}

3.

2 子代选择器只选择“亲儿子”不包含更深层后代.wrap a{/* 只选 wrap 的直接子元素 a */}

3.

3 组合选择器分组选择器多个选择器用逗号分隔共用一套样式h3, span{color:red;}

3.

4 交集选择器同时满足写法选择器1选择器2中间不加空格若包含标签选择器标签要写在最前面div.one{/* 同时满足div 且 classone */}

3.

5 并集选择器与“组合选择器/分组选择器”含义一致选择器1, 选择器2 {}

3 伪类选择器Pseudo-classes

3.

1 a 标签常用爱恨准则 LoVe HAtea:link{color:orange;/* 未访问 */}a:visited{color:green;/* 已访问 */}a:hover{color:black;/* 悬停 */}a:active{color:purple;/* 按下 */}

3.

2 组合用法示例div:hover span{/* 悬停 div 时改变 div 内 span */}

CSS 特性

1 继承性子元素会继承部分父元素的样式如color、font-*但有些不会继承例如border

2 权重Specificity从高到低行内样式1000#id

class/:伪类10元素标签1!important强行提升优先级不建议滥用会破坏维护性

字体与文本属性

1 字体font-family字体建议写备用字体font-size字号常用px也可em/rembody{font-family:Microsoft YaHei,Arial,sans-serif;font-size:16px;}

2 颜色 color关键字redrgb(r,g,b)0~255rgba(r,g,b,a)a 为透明度十六进制#FF

5

3 字体样式font-style: normal | italicfont-weight: 100~900400常视为 normal你原文写的text-weight应为font-weight。

4 文本装饰text-decoration: none | underline | overline | line-through你原文里line-throngh应为line-through。

5 缩进、行高、间距text-indent首行缩进1em通常约等于一个字宽line-height行高一般行高 字号letter-spacing字间距中文常用word-spacing词间距英文常用

6 对齐text-align: left | center | righttext-align处理的是“行内内容在容器中的水平对齐”。

元素显示类型块级元素div/ul/ol/p/h1~h6/table/form ...独占一行可设置宽高默认宽度常为 100%行内元素a/span/em/label/strong ...同行显示通常不能直接设置宽高由内容撑开行内块input/img ...同行显示也可以设置宽高

盒模型Box Model组成由内到外内容区width / height内边距padding边框border外边距margin

1 padding内边距单独方向padding-top/right/bottom/left简写2 个值padding: 上下 左右;3 个值padding: 上 左右 下;4 个值padding: 上 右 下 左;

2 margin外边距水平方向相邻盒子左右 margin 相加垂直方向可能出现外边距塌陷/合并尽量只设置一个方向的 margin 或用 padding/边框等方式隔开

3 border边框border:1px solid red;三要素border-widthborder-stylesolid | dotted | double | dashedborder-color

清除默认样式Reset 思路body, p, ul, ol, dl, dt{margin:0;padding:0;}ul, ol{list-style:none;}input{border:none;outline:none;}a{text-decoration:none;}

盒子水平居中常用margin: 0 auto;需要元素是块级且有明确宽度更直观.box{width:300px;margin:0 auto;}

浮动 float早期布局方式

1

1 取值float: none;默认float: left;float: right;float: inherit;

1

2 常见用途文字环绕例如图片左浮动后文字围绕图片排版多列布局多个盒子一起浮动实现并排

1

3 浮动现象/副作用脱离标准文档流浮动元素相互贴靠可能出现“父元素高度塌陷”等问题需要清除浮动你这份笔记目前到“浮动现象”结束如果你后面还有“清除浮动”的内容也可以继续补进来我再一起整理。

713GccA片上-713GccA片上应用