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

css知识点学习笔记一、 什么是css?全称:层叠样式表,修饰和美化HTML页面中的元素(静态、动态都可以)二、 如何用css1 基本语法: 选择器样式1;样式2 样式:color:red;例子: h1color:red;font-size:20px;三、 在哪里写入css样式?1 内部样式: <style></style>写在 html页面中head标签内2 外部样式:在html页面head标签内: <link href=”css文件地址”>3 行内样式:在某一个标签内,style=” <p style=”color:red;”>我是标签</p>备注:优先级 行内样式>内部样式>外部样式四、 css选择器1 标签元素选择器: 标签名2 类选择器: <p class=”one”>p标签</p> .one3 id选择器:<p id=”two”>p标签</p>#two备注:id选择器需要注意:一个html页面中不能有重复的id名字优先级: 标签选择器<class选择器<id选择器4 层次选择器:（1） A B 选中页面中A标签下的所有B元素(包括孙子)例: ul licolor:red; ->所有的li标签内容都是红色<ul><li>111</li><li>222</li></ul>（2） A>B 选择页面中A标签下儿子辈的B元素例:ul>licolor:red; ->第一个的li标签内容是红色<ul><li>111</li><ol><li>222</li></ol></ul>（3） A+B 选中A标签相邻的兄弟元素B,且只选中第一个例: h1+pcolor:red; -> 第一个p标签内容变红<h1>我是标题</h1><p>我是段落</p><p>我是段落</p>（4） AB 选中A标签相邻的所有兄弟元素B例: h1pcolor:red; -> 所有p标签内容都变红<h1>我是标题</h1><p>我是段落</p><p>我是段落</p>5 结构伪类选择器:（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;->奇数行li标签内容变红li:nth-child(even)color:red;->偶数行li标签内容变红<ul><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li></ul>（5） A:hover 鼠标滑过A元素后的样式例: span:hovercolor:red; ->当鼠标滑倒span标签上,标签内容变成红色<span>鼠标滑过变成红色</span>（6） a:visited 鼠标访问过a标签后的样式例: a:visitedcolor:green;->当鼠标点击了a标签,a标签颜色变为绿色<a href=”>百度</a>6 属性选择器:（1） Aattr: 选中带有attr属性的所有A元素（2） Aattr=”B”: 选择带有attr属性并且值为B的所有A元素（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标签inputname$=”x”width:200px;height:40px; ->选中name值结尾字母为x的input标签<input type=”text” name = “username”><input type=”radio” name = “sex”><input type=”radio” name = “sex”>总结:1、 页面中尽量不要用id选择器2、 li多用nth-child选择器3、 在表单获取动态数据时,多用属性选择器五、 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） text-align:left或center或right;文本左 居中 右对齐（3） line-height:npx; 文字垂直居中对齐,需要n的值与元素的height相等例:pwidth:400px;heigth:40px;text-align:center; 文本水平居中line-height:40px; 文本垂直居中<p>哈哈哈</p>（4） text-decoration: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-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标签上,鼠标变成小手<span>鼠标滑过变样子</span>5 盒子模型（1） 盒子组成: 元素本身+内边距(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像素padding:5px 6px 7px;->上5像素,左右距离6像素,下7像素padding:1px 2px 3px 4px;->上1px、右2px、下3px、左4px<p>我是段落</p>备注:用来控制元素本身距离边框的距离（3） margin:用法同padding一样备注:margin特殊用法: margin:0 auto; 让元素居中,前提是:此元素有宽度（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:left;->让元素左浮动（2） float:right;->让元素右浮动（3） 浮动特性:当元素浮动时,下一个元素会被覆盖,文本内容、图片内容不会被覆盖例: 浮动不会覆盖文字.html 当多个元素同浮动时,多个元素同行显示,inline-block的特性例: 多个元素浮动同行排列.html 当父级元素宽度为400,子级三个元素宽度总和超过400,那么三个元素在浮动时候,第三个元素会另起一行例: 父级宽度不够.html 当父级元素宽度为400,子级三个元素宽度总和超过400,第一个元素高度>第二个元素高度,第三个元素会上不去下不来例:卡住了.html（4） 父级元素边框塌陷解决办法: 给父级元素设置样式:overflow:hidden; ->子级元素超出父级元素的部分隐藏overflow:scroll; ->子级元素超出父级元素的部分滑动滚动条可见（5） 清除浮动:clear:left right both;七、 定位1 定位用法: position:值; 值有三个: （1） relative相对定位:元素在文档流里,相对于原来的位置进行移动（2） absolute绝对定位:元素脱离文档流,相对于浏览器左上角进行移动<div><img></div>注:当div也有定位,那么img的绝对定位,相对与div左上角进行移动（3） fixed固定定位:元素脱离文档流,相对于浏览器左上角进行移动,跟父级元素彻底无关例:img position:relative; left:10px; top:10px; 图片相对于div向右移动10px,向下移动10px<div><img></div>5