壹小小俊的博客_css课程

第六课--过渡

transition:动画持续时间,动画属性的作用是赋值给元素，整个元素都在使用这个属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title></head><style>...

过渡

html

赋值

原创 2022-10-12 14:44:55 117 阅读

第四课--文本效果

text-shadow文本阴影box-shadow盒子阴影text-overflow显示溢出内容word-wrap强制文本换行word-break单词拆分换行<!DOCTYPE html><html lang="en"><head>title>文本效果&...

文本效果

html

原创 2022-10-12 14:44:50 128 阅读

第二课--背景

a.background-image添加背景图片background-image: url("border.png");/*背景图片*/background-position: right bottom, left top;/*图片位置*/background-repeat: no-repeat, repeat;/*是否平铺*/b.background-size背景图像的大小c.b...

背景

背景图片

背景图

html

原创 2022-10-12 14:44:41 112 阅读

第八课--列表

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...

列表

html

css

原创 2022-10-12 14:44:26 184 阅读

第七课--链接

a.链接样式a:link /* 未访问链接*/a:visited /* 已访问链接 */a:hover /* 鼠标移动到链接上 */a:active /* 鼠标点击时 */<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...

链接

html

鼠标移动

css

原创 2022-10-12 14:44:19 62 阅读

第四课--背景

CSS 属性定义背景效果:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position水平或垂直平铺：background-repeat:repeat-x;背景图像- 设置定位与不平铺background-repeat:no-repeat;简写属性backg...

背景

html

背景图

css

原创 2022-10-12 14:44:10 226 阅读

第六课--字体

a.字体系列font-family:"Times New Roman", Times, serif;b.字体样式font-style:normal;正常 - 正常显示文本font-style:ita

字体

html

字体加粗

css

原创 2022-10-12 14:44:05 125 阅读

第三课--插入样式表

插入样式表的方法有三种:外部样式表(External style sheet):<link rel="stylesheet" href="demo.css">内部样式表(Internal style sheet):<style></style>内联样式(Inline style):<p style="color:yellow;"></p...

-插入样式表

css

html

内部样式

原创 2022-10-12 14:43:59 72 阅读

第五课--文本格式

文本颜色:color文本的对齐方式:text-align文本修饰:text-decoration:none 取消下划线text-decoration:overline 添加上

文本格式

下划线

html

首字母

原创 2022-10-12 14:43:50 168 阅读

第二课--id 和 class 选择器

1》idid 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。看案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...

id 和 class 选择器

选择器

html

css

原创 2022-10-12 14:43:39 146 阅读

第十课--边框

无边框 : border-style: none;虚线边框 : border-style: dotted;虚线边框 : border-style: dashed

边框

实线

html

无边框

原创 2022-10-12 14:42:44 153 阅读

第十一课--margin(外边距)padding（填充）

margin-top:?px; 上边距margin-bottom:?px; 下边距margin-right:?px; 右边距margin-left:?

margin(外边距)

边距

html

css

原创 2022-10-12 14:42:39 166 阅读

第十三课--尺寸 (Dimension)与CSS Display(显示) 与 Visibility（可见性）

a.尺寸 (Dimension)width:?px 设置长度height：？px 设置高度b.CSS Display(显示) 与 V

css

html

内联元素

原创 2022-10-12 14:42:34 157 阅读

第十二课--分组和嵌套选择器

a.分组在样式表中有很多具有相同样式的元素。为了尽量减少代码，你可以使用分组选

分组和嵌套选择器

html

选择器

嵌套

原创 2022-10-12 14:42:27 50 阅读

第十四课--Position(定位)

a.position 属性的五个值：static ：没有定位relative ：相对定位fixed ：固定定位absol

Position(定位)

html

f5

相对定位

原创 2022-10-12 14:42:23 99 阅读

第十五课--Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。overflow属性有以下值：visible

Overflow

html

默认值

css

原创 2022-10-12 14:42:18 245 阅读

第二十课--案例--导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导

导航栏

html

f5

原创 2022-10-12 14:42:14 43 阅读

第十六课--Float(浮动)

a.使用浮动float:right;float:left;b.清除浮动clear:both;<!DOCTYPE html><html lang="en"

Float(浮动)

html

清除浮动

原创 2022-10-12 14:42:09 83 阅读

第十七课--水平 & 垂直对齐

a.元素居中对齐（要水平居中对齐一个元素(如 <div>)） margin: auto; width: 50%; 使用mar

水平 & 垂直对齐

html

原创 2022-10-12 14:42:05 108 阅读

第二十六课--媒体类型

a.一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性

媒体类型

html

分页

样式表

原创 2022-10-12 14:42:01 128 阅读

第二十一课--下拉菜单

外部div是一个菜单容器，span是菜单，当然，span是可以修改的，可以是button，也可以是

下拉菜单

html

原创 2022-10-12 14:41:54 160 阅读

第二十二课--提示工具(Tooltip)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>: inl...

提示工具(Tooltip)

html

伪元素

居中显示

原创 2022-10-12 14:41:43 226 阅读

第二十三课--图片廊

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片

图片廊

html

原创 2022-10-12 14:41:38 151 阅读

第二十四课--图像透明/不透明

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图

图像透明/不透明

html

原创 2022-10-12 14:41:34 143 阅读

第二十五课--图像拼合技术

图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个

图像拼合技术

雪碧图

html

服务器

加载

原创 2022-10-12 14:41:30 75 阅读

第二十七课--属性选择器

a.属性选择器就是标签中的属性，如title ，name ，等。使用方式：[属性名称]{}b.属性和值

属性选择器

html

选择器

原创 2022-10-12 14:41:26 70 阅读

第二十八课--表单案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表

表单

html

php

原创 2022-10-12 14:41:22 142 阅读

第一课--边框

a.圆角border-radius:??pxb.盒阴影box-shadow: ?px ?px ?px 颜色;<!DOCTYPE html><html lang

边框

html

圆角

原创 2022-10-12 14:41:18 168 阅读

第十九课--伪类(Pseudo-classes)

a.伪类是用来添加一些选择器的特殊效果b.anchor伪类--链接的不同状态都可以以不同的方式显示a:link {color:#FF0000;} /* 未访问的链接 */a:visited {color:#00FF00;} /* 已访问的链接 */a:hover {color:#FF00FF;} /* 鼠标划过链接 */a:active {color:#0000FF;} /* 已选...

伪类(Pseudo-classes)

html

javascript

css

原创 2022-10-12 14:39:32 187 阅读

第一课--css简介、语法、注释

1.css简介CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个2.语法与注释CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器...

css简介、语法、注释

css

html

外部样式表

原创 2022-10-12 14:39:20 75 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

壹小俊的博客

第六课--过渡

第四课--文本效果

第二课--背景

第八课--列表

第七课--链接

第四课--背景

第六课--字体

第三课--插入样式表

第五课--文本格式

第二课--id 和 class 选择器

第十课--边框

第十一课--margin(外边距)padding（填充）

第十三课--尺寸 (Dimension)与CSS Display(显示) 与 Visibility（可见性）

第十二课--分组和嵌套选择器

第十四课--Position(定位)

第十五课--Overflow

第二十课--案例--导航栏

第十六课--Float(浮动)

第十七课--水平 & 垂直对齐

第二十六课--媒体类型

第二十一课--下拉菜单

第二十二课--提示工具(Tooltip)

第二十三课--图片廊

第二十四课--图像透明/不透明

第二十五课--图像拼合技术

第二十七课--属性选择器

第二十八课--表单案例

第一课--边框

第十九课--伪类(Pseudo-classes)

第一课--css简介、语法、注释

欢迎