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

《（自考专升本）《css》知识点学习知识点串讲笔记.docx》由会员分享，可在线阅读，更多相关《（自考专升本）《css》知识点学习知识点串讲笔记.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、css知识点学习笔记一、 什么是css?全称:层叠样式表,修饰和美化HTML页面中的元素(静态、动态都可以)二、 如何用css1 基本语法: 选择器样式1;样式2 样式:color:red;例子: h1color:red;font-size:20px;三、 在哪里写入css样式?1 内部样式: 写在 html页面中head标签内2 外部样式:在html页面head标签内: 3 行内样式:在某一个标签内,style=” 我是标签备注:优先级 行内样式内部样式外部样式四、 css选择器1 标签元素选择器: 标签名2 类选择器: p标签 .one3 id选择器: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标签内容都变红我是标题我是段落我是段落5 结构伪类选择器:（1） A:nth-child(index) A代表标签选择器,index代表

3、下标(从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-child(even)color:red;-偶数行li标签内容变红111222

4、333444555（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属性并且值开头字母为B的所有A元素（4） Aattr$=”B”: 选择带有attr属性并且值结尾

5、字母为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:40px; -选中name值结尾字母为x的input标签总结:1、 页面中尽量不要用id选择器2、 li多用nth-child选择器3、

6、在表单获取动态数据时,多用属性选择器五、 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;字体风格:倾斜（4） font-family:”宋体”; 字体样式2 文本样式:（1） color:颜色; 文本颜色 百度搜索:css颜色对照表 #FFFFFF白色（2） t

7、ext-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(上划线)、line-through(贯穿线)（5） word-spacing:1em; 文字与文字之间的间距（6） text-indent:1em; 文字首行缩进（

8、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） background-position:x轴像素、y轴像素;（5） background-size:宽度 高度;（6） back

9、ground:linear-gradient(to 方向,颜色1,颜色2);4 鼠标滑过样式:（1） cursor:值; text文本、wait等待、help帮助、pointer小手、corsshair十字光标例: spancursor:pointer;-鼠标滑倒span标签上,鼠标变成小手鼠标滑过变样子5 盒子模型（1） 盒子组成: 元素本身+内边距(padding)+边框(border)+外边距(margin)（2） 内边距:padding用法padding:值; 只写一个值,设置元素上下左右方向的内边距padding:值1 值2; 写两个值,值1上下方向、值2左右方向padding:值1

10、 值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 2px 3px 4px;-上1px、右2px、下3px、左4px我是段落备注:用来控制元素本身距离边框的距离（3） margin:用法同padding一样备注:margin特殊用法: margin:0 au

11、to; 让元素居中,前提是:此元素有宽度（4） border: 1px solid 颜色; solid是实线,可替换为:dotted虚线（5） border-raidus:用法同padding一样; 通常设置值为元素的宽高一半六、 浮动与display1 display用法（1） display:inline; -将元素定义为:行内元素（2） display:block;-将元素定义为:块级元素（3） display:inline-block;-行内元素特性:同行排列、块级元素特性:设置宽高这玩楞是个坑,尽量别用（4） display:none;-隐藏元素2 浮动用法:（1） float:le

12、ft;-让元素左浮动（2） float:right;-让元素右浮动（3） 浮动特性:当元素浮动时,下一个元素会被覆盖,文本内容、图片内容不会被覆盖例: 浮动不会覆盖文字.html 当多个元素同浮动时,多个元素同行显示,inline-block的特性例: 多个元素浮动同行排列.html 当父级元素宽度为400,子级三个元素宽度总和超过400,那么三个元素在浮动时候,第三个元素会另起一行例: 父级宽度不够.html 当父级元素宽度为400,子级三个元素宽度总和超过400,第一个元素高度第二个元素高度,第三个元素会上不去下不来例:卡住了.html（4） 父级元素边框塌陷解决办法: 给父级元素设置样式

13、:overflow:hidden; -子级元素超出父级元素的部分隐藏overflow:scroll; -子级元素超出父级元素的部分滑动滚动条可见（5） 清除浮动:clear:left right both;七、 定位1 定位用法: position:值; 值有三个: （1） relative相对定位:元素在文档流里,相对于原来的位置进行移动（2） absolute绝对定位:元素脱离文档流,相对于浏览器左上角进行移动注:当div也有定位,那么img的绝对定位,相对与div左上角进行移动（3） fixed固定定位:元素脱离文档流,相对于浏览器左上角进行移动,跟父级元素彻底无关例:img position:relative; left:10px; top:10px; 图片相对于div向右移动10px,向下移动10px5