《（自考专升本）《css》知识点学习知识点串讲笔记》由会员分享，可在线阅读，更多相关《（自考专升本）《css》知识点学习知识点串讲笔记（5页珍藏版）》请在金锄头文库上搜索。
1、1css知识点学习笔记1、什么是 css?全称:层叠样式表,修饰和美化 HTML 页面中的元素(静态、动态都可以)2、如何用 css1基本语法: 选择器样式 1;样式 2 样式:color:red;例子: h1color:red;font-size:20px;3、在哪里写入 css 样式?1内部样式: 写在 html 页面中 head 标签内2外部样式:在 html 页面 head 标签内: 3行内样式:在某一个标签内,style=” 我是标签备注:优先级 行内样式内部样式外部样式4、css 选择器1标签元素选择器: 标签名2类选择器: p 标签 .one3id 选择器:p 标签#two备注:
2、id 选择器需要注意:一个 html 页面中不能有重复的 id 名字优先级: 标签选择器class 选择器所有的 li 标签内容都是红色111222（2）AB 选择页面中 A 标签下儿子辈的 B 元素例:ullicolor:red; -第一个的 li 标签内容是红色111222（3）A+B 选中 A 标签相邻的兄弟元素 B,且只选中第一个例: h1+pcolor:red; - 第一个 p 标签内容变红我是标题我是段落我是段落（4）AB 选中 A 标签相邻的所有兄弟元素 B例: h1pcolor:red; - 所有 p 标签内容都变红我是标题我是段落我是段落第 1 页 共 5 页25结构伪类选择
3、器:（1）A:nth-child(index) A 代表标签选择器,index 代表下标(从 1 开始计数)（2）A:nth-child(参数) 参数的值: odd 奇数行、even 偶数行（3）A:first-child 选择第一个 A 元素（4）A:last-child 选择最后一个 A 元素例: li:first-childcolor:red;-第一个 li 标签内容变红li:last-childcolor:red;-最后一个 li 标签内容变红li:nth-child(3)color:red;-第三个个 li 标签内容变红li:nth-child(odd)color:red;-奇数行
4、li 标签内容变红li:nth-child(even)color:red;-偶数行 li 标签内容变红111222333444555（5）A:hover 鼠标滑过 A 元素后的样式例: span:hovercolor:red; -当鼠标滑倒 span 标签上,标签内容变成红色鼠标滑过变成红色（6）a:visited 鼠标访问过 a 标签后的样式例: a:visitedcolor:green;-当鼠标点击了 a 标签,a 标签颜色变为绿色百度6属性选择器:（1）Aattr: 选中带有 attr 属性的所有 A 元素（2）Aattr=”B”: 选择带有 attr 属性并且值为 B 的所有 A 元素
5、（3）Aattr=”B”: 选择带有 attr 属性并且值开头字母为 B 的所有 A 元素（4）Aattr$=”B”: 选择带有 attr 属性并且值结尾字母为 B 的所有 A 元素例:inputnamewidth:200px;height:40px;-选中所有含有 name 属性的 input 标签inputname=”username”width:200px;height:40px;-选中所有 name 属性值为 username 的 input 标签inputname=”u”width:200px;height:40px; -选中 name 值首字母为 u 的input 标签inputn
6、ame$=”x”width:200px;height:40px; -选中 name 值结尾字母为 x的 input 标签总结:第 2 页 共 5 页31、页面中尽量不要用 id 选择器2、li 多用 nth-child 选择器3、在表单获取动态数据时,多用属性选择器5、css 样式 : 选中器属性:值;1字体样式（1）font-size:1px;字体大小（2） font-weight:normal; 字体正常大小font-weight:bold;字体加粗font-weight:bolder 字体更粗（3） font-style: normal;字体风格:正常font-style:italic;
7、字体风格:斜体font-style:oblique;字体风格:倾斜（4）font-family:”宋体”; 字体样式2文本样式:（1）color:颜色; 文本颜色 百度搜索:css 颜色对照表 #FFFFFF 白色（2）text-align:left 或 center 或 right;文本左 居中 右对齐（3）line-height:npx; 文字垂直居中对齐,需要 n 的值与元素的 height 相等例:pwidth:400px;heigth:40px;text-align:center; 文本水平居中line-height:40px; 文本垂直居中哈哈哈（4）text-decoration
8、:none(没有线)、underline(下划线)、overline(上划线)、line-through(贯穿线)（5）word-spacing:1em; 文字与文字之间的间距（6）text-indent:1em; 文字首行缩进（7）text-shadow:颜色 x 轴 y 轴 模糊半径;例: text-shadow: red 10px 10px 5px; 通常结合文本颜色一起使用color: green;3背景样式:（1）background-color:颜色; 背景颜色（2）background-image: ulr(图片路径); 背景图片（3）background-repeat: no-
9、repeat(不平铺)、repeat-x(沿 x 轴平铺)、repeat-y(沿着y 轴平铺)（4）background-position:x 轴像素、y 轴像素;（5）background-size:宽度 高度;（6）background:linear-gradient(to 方向,颜色 1,颜色 2);4鼠标滑过样式:（1）cursor:值; text 文本、wait 等待、help 帮助、pointer 小手、corsshair 十字光标例: spancursor:pointer;-鼠标滑倒 span 标签上,鼠标变成小手第 3 页 共 5 页4鼠标滑过变样子5盒子模型（1）盒子组成:
10、元素本身+内边距(padding)+边框(border)+外边距(margin)（2）内边距:padding 用法padding:值; 只写一个值,设置元素上下左右方向的内边距padding:值 1 值 2; 写两个值,值 1 上下方向、值 2 左右方向padding:值 1 值 2 值 3; 写三个值,值 1 上方向、值 2 左右方向、值3 下方向padding:值 1 值 2 值 3 值 4; 写四个值,分别代表上 右 下 左例:ppadding:10px; -元素本身在上下左右四个方向距离边框都有 10 像素padding:10px 5px; - 上下方向有 10 像素,左右方向有 5
11、像素padding:5px 6px 7px;-上 5 像素,左右距离 6 像素,下 7 像素padding:1px 2px 3px 4px;-上 1px、右 2px、下 3px、左 4px我是段落备注:用来控制元素本身距离边框的距离（3）margin:用法同 padding 一样备注:margin特殊用法: margin:0 auto; 让元素居中,前提是:此元素有宽度（4）border: 1px solid 颜色; solid 是实线,可替换为:dotted 虚线（5）border-raidus:用法同 padding 一样; 通常设置值为元素的宽高一半6、浮动与 display1displ
12、ay 用法（1）display:inline; -将元素定义为:行内元素（2）display:block; -将元素定义为:块级元素（3）display:inline-block;-行内元素特性:同行排列、块级元素特性:设置宽高这玩楞是个坑,尽量别用（4）display:none;-隐藏元素2浮动用法:（1）float:left;-让元素左浮动（2）float:right;-让元素右浮动（3）浮动特性:当元素浮动时,下一个元素会被覆盖,文本内容、图片内容不会被覆盖例: 浮动不会覆盖文字.html 当多个元素同浮动时,多个元素同行显示,inline-block 的特性例: 多个元素浮动同行排列.
13、html 当父级元素宽度为 400,子级三个元素宽度总和超过 400,那么三个元素在浮动时候,第三个元素会另起一行例: 父级宽度不够.html 当父级元素宽度为 400,子级三个元素宽度总和超过 400,第一个元素高度第二个元素高度,第三个元素会上不去下不来例:卡住了.html第 4 页 共 5 页5（4）父级元素边框塌陷解决办法: 给父级元素设置样式:overflow:hidden; -子级元素超出父级元素的部分隐藏overflow:scroll; -子级元素超出父级元素的部分滑动滚动条可见（5）清除浮动:clear:left right both;7、定位1定位用法: position:值; 值有三个: （1）relative 相对定位:元素在文档流里,相对于原来的位置进行移动（2）absolute 绝对定位:元素脱离文档流,相对于浏览器左上角进行移动注:当 div 也有定位,那么 img 的绝对定位,相对与 div 左上角进行移动（3）fixed 固定定位:元素脱离文档流,相对于浏览器左上角进行移动,跟父级元素彻底无关例:img position:relative; left:10px; top:10px; 图片相对于 div 向右移动 10px,向下移动 10px第 5 页 共 5 页
