css学习
文章平均质量分 68
小花fafa
这个作者很懒,什么都没留下…
展开
-
如何设置网站顶部的logo图标
我们平时浏览一个网站时可以看到页面顶部左侧都有一个logo如何在自己的网站设置这样一个图标呢?1.先准备好logo的图片,格式要png2.把png图片转换成ico图标http://www.bitbug.net选择你的png图片,输入附加码,点击生成ico图标3.我们找到下载好的文件位置,将其放到网站的根目录下剪切到:和你的页面同位置4.引入图标: 打开你的html页面,在head标签中引入该图标:...原创 2021-09-13 09:49:10 · 6111 阅读 · 0 评论 -
CSS3动画
使用步骤:先定义动画,再使用动画1.用keyframes定义动画@keyframes 动画名称{ 0%{ 开始效果 } 100%{ 结束效果 } } 动画序列: 0%是动画的开始,100%是动画的完成,中间可以有其他阶段45% | 75%... 用关键字from和to等同于0%和100%@keyframes move { 0% { mar...原创 2021-08-16 20:37:56 · 108 阅读 · 0 评论 -
CSS3 2D转换
1.移动 translate 语法:transform:translate(x,y) | translateX(n) | translateY(n) 优点:不会影响其他元素的位置 ☆translate中百分比单位是相对于自身元素 ☆对行内标签没有效果 ☆利用定位 + translate 实现水平居中...原创 2021-08-15 10:26:56 · 63 阅读 · 0 评论 -
CSS3过渡(和:hover搭配)(如何给动画添加过渡效果)
transition : 要过渡的属性 花费时间 运动曲线 何时开始1.属性 : 宽度 高度 背景颜色 内外边距 ... (all 所有)2.花费时间 : 单位是秒(必须写)3.运动曲线:默认是ease(逐渐慢下来) linear (匀速)ease-in (加速) ease-out (减速) ease-in-out (先加后减)4.何时开始:单位是秒 默认是0<!DOCTYPE html><html lang="en"&g...原创 2021-08-14 20:51:17 · 1409 阅读 · 0 评论 -
CSS定位(相对定位,绝对定位,固定定位,粘性定位,子绝父相)
定位 = 定位模式 + 边偏移1.模式 position : static (静态) | relative (相对) | absolute (绝对) | fixed (固定)2.边偏移 top | bottom | left | right1.静态定位static 默认定位方式,无定位的意思2.相对定位relative 相对于它原来的位置进行偏移 特点:原来在标准流中的位置继续占有(不脱标)未加定位:...原创 2021-08-12 11:31:20 · 533 阅读 · 0 评论 -
CSS浮动(多个块级元素横向排列)
默认元素的布局是按照普通流(文档流/标准流),也就是所有标签按照规定好的方式排列:块级元素单独占一行,行内/行内块一行排列。☆一般来说多个块级元素纵向排列找标准流☆多个块级元素横向排列找浮动浮动: float : none(不浮动) | left(向左) | right (向右)未加浮动前:<style> div { width: 200px; height: 50px; } .one { ...原创 2021-08-07 10:32:44 · 5681 阅读 · 0 评论 -
圆角边框,盒子阴影,文字阴影
1.圆角边框 border-radius : length 原理:以length为半径的圆和边框的交集 length可以是数值,百分比 圆形:length为正方形的一半<style> .big { width: 200px; height: 200px; background-color: yellowgreen; border-radius: 100px; }</sty...原创 2021-08-06 21:48:59 · 80 阅读 · 0 评论 -
CSS盒子模型
1.边框 1.border-width ---- 粗细 2.border-style ---- 样式 1.none 2.solid ---- 实线 3.double ---- 双实线 4.dashed ---- 虚线 5.dotted ---- 点线 ...原创 2021-08-06 20:55:16 · 296 阅读 · 0 评论 -
css选择器的权重(为什么写了css样式但是看不到效果)
css选择器的种类非常多,但是当使用了不同选择器对同一个元素设置了样式,那么应该显示哪个?实际上,不同选择器的优先级(权重)是不一样的,这就导致有的时候明明写了样式但是可能显示的还是原来的。1.继承父级的样式或通配符选择器 ---- 权重( 0 0 0 0 )2.标签选择器 ---- 权重( 0 0 0 1 )3.类选择器,伪类选择器 ---- 权重 ( 0 0 1 0 )4.ID选择器 ---- 权重 ( 0 1 0 0 )5.行内样式(style=" ...原创 2021-08-05 18:18:54 · 214 阅读 · 0 评论 -
CSS的背景background
1.颜色 background-color (默认是transparent ---- 透明的)2.图片 background-image : none | url3.平铺 background-repeat : repeat | no-repeat | repeat-x | repeat-y4.位置 background-position : x y;5.背景图像固定(背景附着) background-attachment : scroll | fixed...原创 2021-07-31 22:48:29 · 227 阅读 · 0 评论 -
元素的显示模式----块元素、行内元素和行内块元素
1.块元素 <h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 特点:1.独占一行<h1>这里是h1标签,我独占一行哦!</h1><h1>这里是h1标签,我独占一行哦!</h1> 2.高度,宽度,内外边距都可以控制<style> div { width: 200px;...原创 2021-07-29 11:09:49 · 1261 阅读 · 0 评论 -
CSS字体和文本属性
一.CSS字体属性字体 font-family : '宋体' | '微软雅黑' | 'Microsoft YaHei' …… 大小 font-size : 16px(谷歌默认) 粗细 font-weight : normal(正常) | bold(粗体)| bolder(特粗) | lighter (细体)| number (100|200|、、、|900) 样式 font-style : normal(正常)| italic (斜体) 复合属性 ...原创 2021-07-27 17:03:44 · 254 阅读 · 0 评论 -
css选择器总结
1.通配符选择器 * =>表示选中页面中所有元素 ( 如下,页面所有标签中的文字都是蓝色)<style> * { color: blue; }</style><div>这是div中的文字</div><p>这是p中的文字</p><a href="#">这是a中的文字</a><h1>这是h1中的文字</h1&g...原创 2021-07-25 22:25:08 · 747 阅读 · 0 评论