后序 登录

下一节课程: 无 (次播放)

5 秒后自动播放下一节
  重新观看
介绍 >

CSS视频教程-玉女心经版

难度:初级 共25节 361040次学习

新课:PHP零基础(CMS开发)教学!

立即报名
章节 评论 笔记 课件
第1章 CSS快速入门

什么是CSS?

02分钟46秒

CSS的三种引入方法

05分钟52秒

CSS的基础语法

05分钟37秒

CSS的基础选择器(元素、类别、ID)

07分钟43秒

派生选择器与属性选择器

09分钟26秒

CSS中的伪类

10分钟00秒
第2章 CSS中常见样式

CSS中的文本控制

12分钟28秒

CSS中的字体控制

08分钟29秒

CSS中的背景控制

09分钟28秒

CSS中的列表控制

07分钟24秒

CSS中的链接控制

06分钟03秒

CSS中的表格控制

10分钟34秒

CSS中的常见伪元素

06分钟30秒
第3章 CSS的盒模型

了解CSS中的盒模型

03分钟32秒

CSS的边框

13分钟19秒

CSS的内边距

07分钟07秒

CSS中的外边距

09分钟19秒
第4章 CSS的定位(Positioning)

CSS定位概述

04分钟46秒

CSS相对定位

06分钟10秒

CSS绝对定位

05分钟38秒

CSS中的浮动

08分钟01秒
第5章 CSS实战案例(高仿中原诗词网)

CSS实战布局(1)

17分钟41秒

CSS实战布局(2)

12分钟45秒

CSS实战布局(3)

17分钟53秒

后序

01分钟55秒

全部评论我要评论

  • 旭

    4年前

    谢谢师太姐姐,我是小白就看视频做笔记各种套用练习,收益很大

    回复
    2

  • 手机用户921196359

    手机用户9211963595年前

    挺好的视频,受益非常大。谢谢老师的讲解。

    回复
    2

  • 愿我的梦想不再是梦想

    愿我的梦想不再是梦想5年前

    作为一名IT行业的菜鸟,能有幸听到小师太老师的课,真是一件幸福的事!万分感谢

    回复
    2

  • 晓春家电8288656

    晓春家电82886564年前

    谢谢师太的精彩讲解,让我又重新系统的复习了一下

    回复
    1

  • 吴皇

    吴皇4年前

    非常感谢师太小妹,看了你的教程,对整个div和css有了全面的认识~对了,师太小妹有QQ群或微信群么?有的话可以拉我进群吗

    回复
    1

  • 关超

    关超4年前

    讲的很好,期待再多发布一些 视频

    回复
    1

  • 时间带走一切

    时间带走一切4年前

    师太声音很性感,就是视频有点短。。。

    回复
    1

  • 紫萱爸爸_徒步寻迹

    紫萱爸爸_徒步寻迹4年前

    挺好的视频,受益非常大。谢谢老师的讲解。

    回复
    0

  • F.A.F

    F.A.F4年前

    很好的视频,收获很多,老师声音好听

    回复
    0

  • Chuan

    Chuan4年前

    讲得好.挺好的视频,受益非常大。谢谢老师的讲解。

    回复
    0

  • 毛永强

    毛永强4年前

    师太太棒了,声音很好听,录的很用心,受益匪浅。

    回复
    0

  • 何绍君

    何绍君5年前

    感谢师太,哈哈

    回复
    0

  • 甘霖

    甘霖5年前

    感谢师太,哈哈

    回复
    0

  • a001诚信工作室

    a001诚信工作室5年前

    谢谢~希望在多看一些你的视频 声音也好听,

    回复
    0

  • 晨光

    晨光5年前

    好听,哈哈

    回复
    0

  • 全部笔记发布笔记

  • 老姨

    老姨4年前

    第一章:css快速入门 一,css的基本语法: 1,内联样式:只针对当前标签<标签 style="css属性:属性值:"> <body style ="background:pink;"> 2,内部样式:只针对当前写法:在head元素内部 标签名{属性:属性值} p{color:pink} 3,外部样式:共享的css文件需要引用一个外部的css文件: 二,css的基础选择器(元素,类别,ID) /*选择器{声明} 选择器{属性:属性值;属性:属性值;}*/ p{color:red;} /*选择器的分组*/ h1,h2,h3,h4{font-size:40px;} 三,派生选择器与属性选择器 /*元素选择器*/ html{color:red;} p{text-align:center;} /*类别选择器*/ .list-1{color:green} p,.list-1{font-size:40px;} .list-1,.list-2{color:pink;} /*id选择器*/ #one{color:pink;font-size:30px;} 四,css中的伪类 /*派生选择器:(后代,子元素,相邻兄弟)*/ /*后代选择器*/ ul em{color:blue;} ul b{color:pink;} /*子元素选择器*/ ul>li{font-size:60px;} li>em{font-size:40px;} /*相邻兄弟选择器*/ ul+ol{text-align:center;} /*属性选择器*/ a[href]{color:blue;} a[href+定义的网址]{color:green;} 五,css中伪元素 语法:选择器:伪类型 {样式} 锚伪类:(未被访问状态,已被访问状态,鼠标悬停状态,活动状态) :link 未被访问的链接添加样式 a:link{color:pink;} :visited 向已被访问链接添加样式 a:visited{color:red;} :hover向鼠标悬停时向元素添加样式 a:hover{background:blue;} :active向被激活的元素添加样式 a:active{color:#fff} :focus向拥有键盘输入焦点的元素添加样式 input:focus{background:blue;} :first-child 向第一个子元素添加样式 p:first-child{font-size:50px;} p:first-child b{color:red;} 第二章:css中常见样式 一,css中的文本控制 color:设置文本颜色 h1{color:pink} direction:设置文本方向 h2{direction:rt1;} line-height:设置行高 p{line-height:40px;} letter-spacing:设置字符间距 p{line-height:40px;letter-spacing:2px;} word_spacing:设置字间距 text-indent:缩进首行文本 p{line-height:40px;letter-spacing:2px;text-indent:2em;} text-decoration:向文本添加修饰 h3{text-decoration:underline;}文本有下划线 h4{text-decoration:overline;}文本上面有横线 h4{text-decoration:line-through;}文本中有横线 a{text-decoration:none;}没有横线 text-align:对齐元素中的文本 h1{color:pink;text-align;right;} text-transform:控制元素中的字母 .one{text-transform:capitalize;}定义文本中首字母为大写 .one-1{text-transform:uppercase;}定义文本中字母全是大写 .one-2{text-transform:lowercase;}定义文本中字母全是小写 二,css中的字体控制 font-family:属性定义文本的字体系列(通用系列:serif,sans-serif,monospace,cursive,fantasy) /*通用系列*/ h1{font-family:monospace;} /*特定*/ h2{font-family:dosis;} font-style:属性规定斜体文本(normal,italic,oblique) font-weight:属性用来设置文本粗细的(normal,bold,100~900) font-size :属性用来设置文本的大小(px\em\%) 三,css中的背景控制 background-color:属性设置元素的背景颜色(color-name\hex-name\rgb-name) background-image:属性为元素设置背景图形 例A .list-2{background-image(images/1.png)width:100px;height:100px;} background-repeat:属性设置是否或者重复背景图像(repeat\repeat-x\repeat-y\no-repeat) background-position:属性设置背景图像的起始位置(top,bottom,left,right,center\%\px) 四,css中的列表控制 list-style-type 属性设置列表标记的类型(disc/none/square/decimal/...) list-style-:属性使用图像来替换列表项的标记 list-style-position:属性设置在何处放置列表项标记 list-style:复合写法 四,css中的链接控制 a{color:#ccc;font-size:20px;} 五,css中的表格控制 border-style:属性用于设置元素边框的样式(dotted,solid,double,dashed/...) border-collapse:属性设置是否将表格边框折叠为单一边框(separate/collapse) border-spacing:属性设置相邻单元格的边框间的距离(length length) caption-size:属性设置表格标题的位置(top/bottom) 表格中的文本对齐方式: text-align:属性设置水平对齐方式(left/center/right) vertical-align:属性设置垂直对齐方式(top/center/bottom) 六,css中常见的伪元素 before:该元素定义在元素之前添加内容 h1:before{conntent:ur1(图片来源);"哈喽!"} after:该伪元素定义在元素之后添加内容 first-line:该伪元素向文本的首行添加内容特殊样式 first-letter:该伪元素向文本的第一个字母添加特殊样式 第三章:css中的盒模型 *{margin:0px;padding:0px;}内外边距为零。 一,css的边框 border-style:属性用于设置元素所有边框样式 border-width:属性为元素的所有边框设置宽度(thin\nedium\thick\length) border-color:s属性设置四条边框的颜色 *border:简写属性,用于把针对四个边的属性设置在一个声明内 二,css的内边距 *{padding:0px;} padding:简写属性在一个声明中设置所有内边距属性(auto、length/%)通过使用下面四个单独属性可以分别设置上,下,左,右内边距: padding-top padding-right padding-bottom padding-left 三,css的外边距 *{padding:0px;margin:0px;} margin:是简写属性可以声明中设置所有外边距属性(auto/lenfht/%)该属性可以有1到4 个值 第四章:css的定位 一:css的相对定位 position:relative;设置为相对定位的元素框会偏移某个距离,语速仍然保持其未定位前的形状,它原本所占的空间仍保留;(positiion与top,bottom,right,left连用) 二,css中的绝对定位 position:absolute;设置了绝对定位的元素框从文档流完全删除并且元素原先在正常文档中所占的空间会关闭,就好像该元素原来不存在一样,位置是相对于已定位的父级元素或者是初始包含块定位 三,css中的浮动 float:属性定义元素在那个方向浮动(left/right) 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止,由于浮动框不在文档的普通流中,所以文档的普通流中的块表现的就像浮动框不存在一样。 clear:属性规定元素的那一侧不允许其他浮动元素(left/right/both) 第五章,css实战案列 一,css实战布局 border:radius;属性控制圆角(与top,bottom.left,right连用)

    0

  • 取消 回复 发送
  • 取消 发布笔记 发送
  • PHP中文网