CSS笔记(菜鸟教程）

admin管理员组

文章数量:1794759

CSS笔记(菜鸟教程）

CSS层叠式样表(cascading style sheet) 1.CSS语法 (1).注释：/这是一个注释/ 2.CSS创建 如何插样式表？ (1).外部样式表：(样式应用于很多页面） (2).内部样式表：(单个文档需要特殊样式） (3).内联样式表：(慎重使用） (4).多重样式： 优先级：内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式 3.CSS背景 (1).background-color:背景颜色 (2).background-attachment:背景图像是否固定在页面还是随着内容滚动 fixed(不会随着页面滚动而滚动） local(随着页面的滚动而滚动） (3).background-image:设置背景图片

(4).background-position：设置图片的位置 (5).background-repeat:定义背景图是否及如何重复 repeat:默认垂直水平重复占满 repeat-x:水平重复横向 repeat-y:垂直重复竖直 no-repeat:不会重复只有一块儿 4.CSS文本格式：就是文字的样式啦 （1).文本颜色(color) （2).文本对齐方式(text-align): center居中 justify每一行被展开为宽度相等，左，右外边距是对齐 （3).文本修饰(text-decoration): overline(上划线） underline(下划线） line-through(删除线） （4).文本转换(text-transform)：字母大小写 （5).文本缩进(text-indent):50px度量 5.CSS Fonts:CSS字体 （1).CSS字型： serif：字符在行的末端拥有额外的装饰 sans-serif:字符在行的末端没有额外的装饰 Monspace:所有等宽字符具有相同的宽度 （2).font-family:设置文本的字体系列 （3).font-style:设置字体样式属性 normal:正常 italic:斜体 oblique:向一边倾斜 （4).font-size:设置字体的大小及像素 如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em 像素50px度量 6.CSS列表样式 （1).list-style:简写列表属性 （2).list-style-image:将图像设置为列表项标志 （3).list-style-position:设置列表项标志的位置 inside outside （4).list-style-type:列表标志的类型 7.CSS Table(表格): （1).表格边框设置: （2).折叠边框: border-collapse:collapse设置表格为单一的边框 （3).表格宽度高度： height width （4).表格文字对齐 水平对齐方式(text-align):right、left、center 垂直对齐方式vertical-align):top、bottom、中间 （5).表格填充：表格的大小 padding以50px度量 （6).表格颜色： color background 8.CSS盒子模型:封装HTML元素(body中的div必须要有内容） （1).外边距(margin):清除边框外的的区域外边距是透明的 （2).边框(border):围绕在内边距和内容外的边框 （3).内边距(padding):清除内容周围的区域，内边距是透明的 （4).内容(content):盒子里的内容，装文本和图片 9.CSS border(边框)： （1).border-style(边框样式) border-style (上 右 底 左） boeder-style(上 左右 底) border-style*(上底 右左） border-style* (四边属性） （2).边框宽度(border-width) （3).边框颜色(border-color) （4).边框单独设置各边 10.CSS轮廓 （1).轮廓颜色(outline-color） （2).轮廓样式(outline-style) （3).轮廓宽度(outline-width) 11.CSS margin(外边距）:清除元素周围的空间 margin****(上 右 下 左） margin***(上 左右 下） margin** (上下 左右） margin* (四边） 12.CSS分组和嵌套:在样式表中有很多样式相同的元素为了代码简单/适用于选择器内部的选择器样式 13.CSS Disply和visibility:定义元素如何显示可见还是隐藏 （1).disply :none元素被隐藏且不占用任何元素空间 （2).visibility： hidden元素被隐藏但是占用原有空间 visible元素可见 collapse元素被隐藏也会占用原有空间 但是遇到tabl相关元素便会释放空间 （3).CSS Display块和内联元素 块级元素(block):表现为另起一行开始且高度宽度内外边距都可以控制 内联元素(inline):所有相邻元素都在一行 高度宽度内外边距不可以控制就是里面文字或者图片的大小 内联块元素(inline-block):同行显示并且可以改变高度宽度和内外边距 14.CSS position定位定义元素在页面的位置或者随之页面滚动是否滚动 （1).static:没有定位遵循正常的文档流 （2).fixed:固定位置不会随着页面的滚动而滚动 （3).relative:相对元素的定位是相对其正常的位置/移动相对定位元素，所占的空间不会改变 （4).absolute:绝对相对定位相对于最近已定位的父位元素 （5).sticky:粘贴定位 （6).z-index:重叠的定位元素 （7).用滚动条来显示溢出的元素(overflow) scroll:右滑动条+下滑动条 hidden:隐藏溢出的元素 auto:右滑动条 visible:直接显示溢出的内容 （8).更改落在元素上光标 auto|text 大写的I crosshair 十字 default \\单箭头 e-resize|w-resize —双向箭头 help \\箭头+? move 四向箭头 n-resize|s-resize |双向箭头 ne-resize|sw-resize /双向箭头 nw-resize|se-resize \\双向箭头 pointer 小手中指 progress | wait 等待蓝色圆圈 15.CSS浮动:定义元素在页面的位置 16.CSS组合选择符 （1).后代选择器(空格分开)：选取某元素的后代元素 （2).子元素选择器(大于号分开):与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 （3).相邻兄弟选择器(加号分开):相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 （4).后续兄弟选择器(~分开):后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。 17.CSS伪类:添加选择器的特殊效果 （1).anchor伪类 （2).CSS firstchild伪类 选择器匹配任何元素第一个子元素p 选择相匹配的所有p元素的第一个i元素 选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素 18.CSS伪元素:添加选择器的特殊效果 （1).first-line伪元素:文本首行设置特殊格式 p:first-line:段落p的第一行设置特殊格式 （2).first-letter:文本首字母设置特殊格式 p:first-letter:段落p的首字母设置特殊格式 （3).CSS before伪元素:在元素的内容前加入新内容 （4).CSS after伪元素:在元素的内容后加入内容 19.CCS属性选择器:具有特殊属性的HTML样式 （1).“value 是完整单词” 类型的比较符号: ~=, |= ~=:包含独立关键字 |=:完整且唯一的关键字或者以-隔开 “拼接字符串” 类型的比较符号: *=, ^=, $= : *=:字符串拆分包含关键字 $=:以关键字结尾 ^=:前几个字母是关键字 20.CSS导航(最近超级喜欢的歌） 21.CSS下拉菜单 22.CSS提示工具 23.CSS图片廊 24.图像的透明与不透明 opacity：值是0-1,值越小元素越透明 alpha（opacity= x）：x可以采取的值是从0 - 100。较低的值，使得元素更加透明。 完.

本文标签： 菜鸟笔记教程css