web前端的css样式
一、什么是css？
全称:层叠样式表,修饰和美化HTML页面中的元素(静态、动态都可以) element
二、如何用css
1．基本语法: 选择器{样式1;样式2} 样式:属性名:属性值;
例子: h1{color:red;font-size:20px;}
三、在哪里写入css样式？
1．内部样式: <style> 选择器{样式1;样式2} </style>(写在 html页面中head标签内)
2．外部样式:在html页面head标签内: <link href=”css文件地址”>
3．行内样式:在某一个标签内，style=”” <p style=”color:red;”>我是标签</p>备注:优先级 行内样式>内部样式>外部样式
四、css选择器
1．标签元素选择器: 标签名{}
2．类选择器: <p class=”one”>p标签</p> .one{}
3．id选择器:<p id=”two”>p标签</p> #two{} (备注:id选择器需要注意:一个html页面中不能有重复的id名字优先级: 标签选择器<class选择器<id选择器)
4．层次选择器:（1）A B{} 选中页面中A标签下的所有B元素(包括孙子) 例: ul li{color:red;} 则所有的li标签内容都是红色<ul><li>111</li><li>222</li></ul>
（2）A>B{} 选择页面中A标签下儿子辈的B元素 例:ul>li{color:red;} ---->第一个的li标签内容是红色<ul><li>111</li><ol><li>222</li></ol></ul>
（3）A+B{} 选中A标签相邻的兄弟元素B，且只选中第一个 例: h1+p{color:red;} ----> 第一个p标签内容变红<h1>我是标题</h1><p>我是段落</p><p>我是段落</p>
（4）A~B{} 选中A标签相邻的所有兄弟元素B 例: h1~p{color: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-child{color:red;} ---->第一个li标签内容变红li:last-child{color: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:hover{color:red;} ----->当鼠标滑倒span标签上，标签内容变成红色<span>鼠标滑过变成红色</span>
（6）a:visited{} 鼠标访问过a标签后的样式例: a:visited{color:green;} -->当鼠标点击了a标签，a标签颜色变为绿色<a href="https://www.baidu.com">百度</a>
6．属性选择器:（1）A[attr]: 选中带有attr属性的所有A元素
（2）A[attr=”B”]: 选择带有attr属性并且值为B的所有A元素
（3）A[attr^=”B”]: 选择带有attr属性并且值开头字母为B的所有A元素
（4）A[attr$=”B”]: 选择带有attr属性并且值结尾字母为B的所有A元素 例:input[name]{width:200px;height:40px;} ----->选中所有含有name属性的input标签input[name=”username”]{width:200px;height:40px;} ---->选中所有name属性值为username的input标签input[name^=”u”]{width:200px;height:40px;} ---->选中name值首字母为u的input标签input[name$=”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:”宋体”; 字体样式例: span{font-size:20px;}
2．文本样式:（1）color:颜色; 文本颜色 百度搜索:css颜色对照表 #FFFFFF白色
（2）text-align:left或center或right;文本左 居中 右对齐
（3）line-height:npx; 文字垂直居中对齐，需要n的值与元素的height相等例: p{width:400px;heigth:40px;text-align:center; 文本水平居中line-height:40px; 文本垂直居中}<p>哈哈哈</p>
（4）text-decoration:none(没有线)、underline(下划线)、overline(上划线)、line-through(贯穿线)
（5）letter-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: url(图片路径); 背景图片
（3）background-repeat: no-repeat(不平铺)、repeat-x(沿x轴平铺)、repeat-y(沿着y轴平铺)
（4）background-position:x轴像素、y轴像素;
（5）background-size:宽度 高度; body{background-size:cover;}
（6）background:linear-gradient(to 方向，颜色1，颜色2);
4．鼠标样式:（1）cursor:值; text文本、wait等待、help帮助、pointer小手、corsshair十字光标 例: span{cursor:pointer; ---->鼠标滑倒span标签上，鼠标变成小手}<span>鼠标滑过变样子</span>
5．盒子模型（1）盒子组成: 元素本身+内边距(padding)+边框(border)+外边距(margin)
（2）内边距:padding用法padding-方向:值; 只设置一个方向的内边距padding:值; 只写一个值,设置元素上下左右方向的内边距padding:值1 值2; 写两个值，值1上下方向、值2左右方向padding:值1 值2 值3; 写三个值，值1上方向、值2左右方向、值3下方向padding:值1 值2 值3 值4; 写四个值，分别代表上 右 下 左例: p{padding: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一样; 通常设置值为元素的宽高一半，此元素就会变成圆形
六、浮动与display
1．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，第一个元素高度>第二个元 素高度，第三个元素会上不去下不来
（4）父级元素边框塌陷解决办法: 给父级元素设置样式:overflow:hidden; ---->子级元素超出父级元素的部分隐藏overflow:scroll; ---->子级元素超出父级元素的部分滑动滚动条可见
（5）清除浮动:clear:left right both;
七、定位
1．定位用法: position:值; 值有三个: （1）relative相对定位:元素在文档流里，相对于原来的位置进行移动
（2）absolute绝对定位注:当元素的父级没有发生定位，此元素会相对于浏览器进行定位移动当元素的父级发生了定位，此元素会相对于父级元素定位移动
（3）fixed固定定位:元素脱离文档流，相对于浏览器左上角进行移动，跟父级元素彻底无关例:img{ position:relative; left:10px; top：10px;} 图片相对于div向右移动10px，向下移动10px<div><img></div>
八、动画效果
1、属性名:transform
2、属性值:(1) 偏移:translate(xpx,ypx)
(2) 旋转:rotate(ndeg),当旋转角度数为正数，顺时针旋转，负数为逆时针
(3) 缩放:scale(1,1):0~1之间是缩小，1~无穷大是放大
(4) 倾斜:skew(xdeg,ydeg)
九、动画过度
1、属性名:transition
2、 属性值:要过度的css属性名、多少秒内完成效果、时间曲线、延迟时间
十、动画
1、@keyframes 动画名称{from{background:red;}to{background:blue;}}
2、animation:让元素关联动画animation: 动画名称 执行时间 时间曲线 延迟时间;animation-iteration-count:infinite; 默认值为1，动画执行次数，infinite循环播放animation-direction:alternate; 动画下一次播放是否逆向进行 alternate逆向、normal正常animation-play-state:paused; 动画状态:run
浙公网安备 33010602011771号