css课程
关注
分享
扫一扫
适合初学者学习前端css课程，此课程需要有前端基础。
韩淼燃
最近在更新运维专栏。欢迎大家来点赞，关注。
展开
-
第六课--过渡
transition:动画持续时间,动画属性的作用是赋值给元素，整个元素都在使用这个属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title></head><style>...原创 2019-08-15 10:46:04 · 184 阅读 · 0 评论 -
第五课--转换
a.2D 转换函数 描述matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。translateX(n) 定义 2D 转换，沿着 X 轴移动元素。translateY(n) 定义 2D 转换...原创 2019-08-15 10:45:22 · 143 阅读 · 0 评论 -
第四课--文本效果
text-shadow文本阴影box-shadow盒子阴影text-overflow显示溢出内容word-wrap强制文本换行word-break单词拆分换行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本效果&...原创 2019-08-15 10:44:29 · 337 阅读 · 0 评论 -
第三课--渐变（Gradients）
a.线性background: linear-gradient(to 方向,颜色,颜色);可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。b.圆性background: radial-gradient(to 方向,颜色,颜色);<!DOCTYPE html><h...原创 2019-08-15 10:43:38 · 223 阅读 · 0 评论 -
第二课--背景
a.background-image添加背景图片background-image: url("border.png");/*背景图片*/background-position: right bottom, left top;/*图片位置*/background-repeat: no-repeat, repeat;/*是否平铺*/b.background-size背景图像的大小c.b...原创 2019-08-15 10:42:43 · 143 阅读 · 0 评论 -
第一课--边框
a.圆角border-radius:??pxb.盒阴影box-shadow: ?px ?px ?px 颜色;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>边框</title></head>...原创 2019-08-15 10:37:59 · 176 阅读 · 0 评论 -
第十三课--尺寸 (Dimension)与CSS Display(显示) 与 Visibility（可见性）
a.尺寸 (Dimension)width:?px 设置长度height：？px 设置高度b.CSS Display(显示) 与 Visibility（可见性）a.visibility:hidden; 隐藏标签display: none; 隐藏标签b.改变一个元素显示列表项显示为内联元素：display:inline;内联元素显示为块元素：display:blo...原创 2019-08-12 15:08:57 · 309 阅读 · 0 评论 -
第十四课--Position(定位)
a.position 属性的五个值：static ：没有定位relative ： 相对定位fixed ：固定定位absolute ：绝对定位sticky ：粘性定位b.重叠的元素position:absolute;z-index:-1;此二者搭配使用，z-index 确定与元素的层次的高低。<!DOCTYPE html><html lang="en...原创 2019-08-12 15:10:42 · 296 阅读 · 0 评论 -
第十五课--Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。overflow属性有以下值：visible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...原创 2019-08-12 15:11:32 · 1039 阅读 · 0 评论 -
第十六课--Float(浮动)
a.使用浮动float:right;float:left;b.清除浮动clear:both;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Float(浮动)</title></head>...原创 2019-08-12 15:12:31 · 174 阅读 · 0 评论 -
第十七课--水平 & 垂直对齐
a.元素居中对齐（要水平居中对齐一个元素(如 <div>)） margin: auto; width: 50%; 使用margin必须和width一起搭配使用b.文本居中对齐text-align: center;c.图片居中对齐要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中.<!DOCTYPE html><ht...原创 2019-08-12 15:13:34 · 180 阅读 · 0 评论 -
第十八课--组合选择符
四种组合方式:后代选择器(以空格分隔)--后代选择器用于选取某元素的后代元素。子元素选择器(以大于号分隔）--与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。相邻兄弟选择器（以加号分隔）--相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素...原创 2019-08-12 15:14:46 · 218 阅读 · 0 评论 -
第十九课--伪类(Pseudo-classes)
a.伪类是用来添加一些选择器的特殊效果b.anchor伪类--链接的不同状态都可以以不同的方式显示a:link {color:#FF0000;} /* 未访问的链接 */a:visited {color:#00FF00;} /* 已访问的链接 */a:hover {color:#FF00FF;} /* 鼠标划过链接 */a:active {color:#0000FF;} /* 已选...原创 2019-08-12 15:15:37 · 302 阅读 · 0 评论 -
第二十课--案例--导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航栏</title></head><style> body { margin: 0; padding...原创 2019-08-13 09:06:17 · 325 阅读 · 0 评论 -
第二十一课--下拉菜单
外部div是一个菜单容器，span是菜单，当然，span是可以修改的，可以是button，也可以是一个a，内部div是菜单选项的容器，菜单选项可以是p，也可以是a。功能关键在于对内部div的隐藏使用以及对hover的使用。此处 看案例<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2019-08-13 10:10:49 · 180 阅读 · 0 评论 -
第二十二课--提示工具(Tooltip)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>提示工具(Tooltip)</title></head><style> .tooltip { display: inl...原创 2019-08-13 10:11:40 · 343 阅读 · 0 评论 -
第十二课--分组 和 嵌套 选择器
a.分组在样式表中有很多具有相同样式的元素。为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔。如下：h1,h2,p{ color: #FFA500;}b.嵌套.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。<!DO...原创 2019-08-12 15:06:54 · 227 阅读 · 0 评论 -
第十一课--margin(外边距)padding（填充）
margin-top:?px; 上边距margin-bottom:?px; 下边距margin-right:?px; 右边距margin-left:?px; 左边距margin:？px ？px ？px ？px; 上右下左margin:？px ？px ？px;上左右下margin:？px ？px;上下左右<!DOCTYPE html><html lang="...原创 2019-08-12 15:04:19 · 243 阅读 · 0 评论 -
第二课--id 和 class 选择器
1》idid 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。看案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...原创 2019-08-06 09:46:13 · 232 阅读 · 0 评论 -
第三课--插入样式表
插入样式表的方法有三种:外部样式表(External style sheet):<link rel="stylesheet" href="demo.css">内部样式表(Internal style sheet):<style></style>内联样式(Inline style):<p style="color:yellow;"></p...原创 2019-08-06 09:47:16 · 381 阅读 · 0 评论 -
第四课--背景
CSS 属性定义背景效果:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position水平或垂直平铺：background-repeat:repeat-x;背景图像- 设置定位与不平铺background-repeat:no-repeat;简写属性backg...原创 2019-08-06 09:49:29 · 170 阅读 · 0 评论 -
第五课--文本格式
文本颜色:color文本的对齐方式:text-align文本修饰:text-decoration:none 取消下划线text-decoration:overline 添加上划线text-decoration:line-through 添加中划线text-decoration:underline 添加下划线文本转换：/*小写转大写*/text-transform:upperca...原创 2019-08-06 09:52:36 · 498 阅读 · 0 评论 -
第六课--字体
a.字体系列font-family:"Times New Roman", Times, serif;b.字体样式font-style:normal;正常 - 正常显示文本font-style:italic;斜体 - 以斜体字显示的文字font-style:oblique;倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）c.字体大小font-size:40px;d.字体...原创 2019-08-06 09:59:35 · 204 阅读 · 0 评论 -
第七课--链接
a.链接样式a:link /* 未访问链接*/a:visited /* 已访问链接 */a:hover /* 鼠标移动到链接上 */a:active /* 鼠标点击时 */<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2019-08-07 09:36:13 · 135 阅读 · 0 评论 -
第八课--列表
a.list-style-type:circle /*圆圈*/list-style-type:square /*方块*/list-style-type:upper-roman/*希腊数字*/list-style-type:lower-alpha/*英文排序*/list-style-image: url('demo.png');/*标记加图片*/b.兼容ul{ list-s...原创 2019-08-07 09:38:20 · 420 阅读 · 0 评论 -
第九课--表格
a.表格边框table,th,td{ border: 1px black solid;}b.折叠边框(边款细线)table,th,td{ border: 1px black solid;}table{ border-collapse:collapse;}c.表格宽度和高度/*表格宽度和高度*/table{ width:100%;}t...原创 2019-08-07 09:39:40 · 160 阅读 · 0 评论 -
第二十三课--图片廊
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片廊</title></head><style> div .img { margin: 5px; b...原创 2019-08-14 10:11:37 · 317 阅读 · 0 评论 -
第二十四课--图像透明/不透明
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图像透明/不透明</title></head><style> #img { opacity: 0.1; /* 设置透明...原创 2019-08-14 10:12:39 · 181 阅读 · 0 评论 -
第二十五课--图像拼合技术
图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量，并节省带宽。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图像拼合技术</title...原创 2019-08-14 10:13:33 · 289 阅读 · 0 评论 -
第二十六课--媒体类型
a.一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。b.@media 规则@media 规则允许在相同样式表为不同...原创 2019-08-14 10:14:26 · 253 阅读 · 0 评论 -
第二十七课--属性选择器
a.属性选择器就是标签中的属性，如title ，name ，等。使用方式：[属性名称]{}b.属性和值选择器就是标签中的属性=值，如title ，name ，等。使用方式：[属性名称=值]{}c.属性和值的选择器 - 多值[属性~=值] { }d.表单样式input[type="名称"]<!DOCTYPE html><html lang="en"...原创 2019-08-14 10:15:34 · 135 阅读 · 0 评论 -
第二十八课--表单案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单</title></head><style>input[type=text], select { width: 100%; pa...原创 2019-08-14 18:54:24 · 146 阅读 · 0 评论 -
第十课--边框
无边框 : border-style: none;虚线边框 : border-style: dotted;虚线边框 : border-style: dashed;实线边框 : border-style: solid;双边框 : border-style: double;凹槽边框 : border-style: groove;垄状边框 : border-style: ridge;嵌入...原创 2019-08-12 15:03:03 · 326 阅读 · 0 评论 -
第一课--css简介、语法、注释
1.css简介CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个2.语法与注释CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器...原创 2019-08-06 09:45:13 · 322 阅读 · 0 评论