3.20 css样式
今天跟着老师把官网做了一下,讲的挺快,不过大部分还是能听进去,讲完完事就开始让我们自己做,我就先做我那个学校的官网,没有啥会不会得,不会就查,有书有老师有百度,所以说没啥不会的,就看你掌握的熟不熟练,总体来说我希望老师给我压力,让我们快速的学完js然后考我们css,考完再考js,这样我们才能给自己压力,知道记忆力的一重要。
现在还早,还有时间努力,继续加油吧。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | 内联 写在标签里面 style= "样式" 控制精确,代码重用性差 内嵌 嵌在页面的head里面 <style type= "text/css" ></style> 控制没有内联的精确,代码重用性好 外部 单独的样式文件 引入:右键-CSS样式表-附加样式表 引入:<link href= "test.css" rel= "stylesheet" type= "text/cs" /> 控制没有内联的精确,代码重用性最好 样式表用来选取元素的 标签 根据标签名选中元素 class . (点) 根据 class 名来筛选元素 id # (井号) 根据id名来筛选出唯一元素 不能使用数字开头(中文开头) 复合 逗号并列 div,span 空格后代 #list li 点筛选 div.s 标签>*, class >标签,id> class 大小 width 宽度 height 高度 背景 background-color 背景色 background-image 背景图片 background-repeat 背景图的平铺方式 background-position 背景图片位置 background-attachment 设置背景图片是否滚动 background-size 背景图的大小 200px 200px 字体 font-family 字体样式 font-size 字体大小 12px 14px font-style italic倾斜 font-weight bold加粗 text-decoration underline下划线 overline上划线 line-through删除线 none没有,用来去掉超链接的下划线 <a><span>默认没法调整大小 color 字体颜色 对齐方式 text-align 水平对齐方式 vertical-align 垂直对齐方式,配合行高使用 line-height 行高 text-indent 缩进 单位像素 边界边框 margin 外边距 上右下左(所有的外面) padding 内边距 上右下左 (嵌套的里面的和外面的距离) 如果加了内边距,该元素会相应的变大 border 1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色 列表方块 list-style none将列表前面的序号去掉;inside是点在里面;outside是点在外面 list-style-image 可以将前面的序号变为图片 格式与布局 位置 position 不占位 fixed 固定 相对于浏览器边框位置固定 absolute绝对位置 相对于父级元素(浏览器,绝对定位的上级) relative相对位置 相对于自身应该出现的位置 top 距离上边的距离 right 距离右边的距离 bottom 距离下边的距离 left 距离左边的距离 流 float left 向左流 right 向右流 clear both 清掉流 z-index分层 值越大越靠上 其它 display 显示block和隐藏none,不占位置 visibility 显示visible和隐藏hidden,占位置 overflow 超出范围 hidden隐藏 透明 opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50) 圆角 border-radius:5px; 阴影 box-shadow:左20px 上20px 羽化10px white; hover 鼠标颜色 |
样式表一些代码,抄袭备注。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步