（自考专升本）《css》知识点学习知识点串讲笔记.pdf

《（自考专升本）《css》知识点学习知识点串讲笔记.pdf》由会员分享，可在线阅读，更多相关《（自考专升本）《css》知识点学习知识点串讲笔记.pdf（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备注:id 选择器需

2、要注意:一个 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结构伪类选择器:（1）A:nth-chil

3、d(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;-奇数行 li 标签内容变红li:nth-chi

4、ld(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 元素（3）Aattr=”B”:选择带有 attr 属

5、性并且值开头字母为 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 标签inputname$=”x”width:200px;height:

6、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;字体风格:斜体font-style:oblique;字体风格:倾斜（

7、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:none(没有线)、underline(下划线)、overline(上划线)、

8、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-repeat(不平铺)、repeat-x(沿 x 轴平铺)、repeat-y(沿着y 轴平铺)（4）

9、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）盒子组成:元素本身+内边距(padding)+边框(border)+外边距(margin)（2）内边距:paddin

10、g 用法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 像素padding:5px 6px 7px;-上 5 像素,左右距离 6 像素,下 7 像素padding:1px 2p

11、x 3px 4px;-上 1px、右 2px、下 3px、左 4px我是段落备注:用来控制元素本身距离边框的距离（3）margin:用法同 padding 一样备注:margin特殊用法:margin:0 auto;让元素居中,前提是:此元素有宽度（4）border:1px solid 颜色;solid 是实线,可替换为:dotted 虚线（5）border-raidus:用法同 padding 一样;通常设置值为元素的宽高一半6、浮动与 display1display 用法（1）display:inline;-将元素定义为:行内元素（2）display:block;-将元素定义为:块级元素（

12、3）display:inline-block;-行内元素特性:同行排列、块级元素特性:设置宽高这玩楞是个坑,尽量别用（4）display:none;-隐藏元素2浮动用法:（1）float:left;-让元素左浮动（2）float:right;-让元素右浮动（3）浮动特性:当元素浮动时,下一个元素会被覆盖,文本内容、图片内容不会被覆盖例:浮动不会覆盖文字.html 当多个元素同浮动时,多个元素同行显示,inline-block 的特性例:多个元素浮动同行排列.html 当父级元素宽度为 400,子级三个元素宽度总和超过 400,那么三个元素在浮动时候,第三个元素会另起一行例:父级宽度不够.htm

13、l 当父级元素宽度为 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 页