css文本样式
字体样式
属性名 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 设置所有字体属性 font:italic bold 36px "宋体";
font-family属性
.p1{ font-family: "隶书";
}
.p2{font-family: "黑体";
}
.p3{ font-family: "Arial Black";
}
文章图片
image.png font-size属性 单位：px（像素）
.p1{font-size: 10;
}.p2{font-size: 20px;
}.p3{font-size: 30px;
}
文章图片
image.png font-style属性 normal、italic和oblique
文章图片
image.png 字体的粗细 font-weight属性
normal 默认值，定义标准的字体。
bold 粗体字体。
文章图片
image.png font属性 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";
}
文章图片
image.png 文本样式文本属性
属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
文本颜色 color属性
十六进制方法表示颜色
color:#FFFFFF;
color:#000000;
color:FF0000;
color:#A983D8;
color:#95F141;
color:#339966;
---color:#396;
color:#EEFF66;
---color:#EF6;
6位颜色值相邻数字两两相同时，可两两缩写为1位
文章图片
image.png 水平对齐方式 text-align属性
值 说明
left 把文本排列到左边。
right 把文本排列到右边
center 把文本排列到中间
首行缩进 text-indent：px
行高 【css文本样式】line-height：px
文本装饰 text-decoration属性
值 说明
none 默认值，定义的标准文本。
underline 设置文本的下划线。
overline 设置文本的上划线。
line-through 设置文本的删除线。
文章图片
image.png 垂直对齐方式 vertical-align属性：middle、top、bottom
制作总裁致辞页面
文章图片
image.png 伪类
伪类选择元素基于的是当前元素处于的状态。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
语法：
标签名:伪类名{声明;
}a:hover
{color:#B46210;
text-decoration:underline;
}
伪类应用
Title - 锐客网 a {
text-decoration: none;
}a:hover {
text-decoration: underline;
color: red;
}p:hover {
font-size: 20px;
font-weight: bold;
}中华培训产业融入教育
网页背景颜色 background-color
文章图片
image.png 列表样式 去掉圆点
list-style:none
文章图片
image.png Web字体 Font Awesome---提供可缩放矢量图标
官网地址：http://www.fontawesome.com.cn/
文章图片
image.png 使用步骤 1.引入css
2.你可以通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素（我们喜欢用更简短的标签，它的语义更加精准）。
3.如果您修改了图标容器的字体大小，图标大小会随之改变。同样也适用于颜色。
Title - 锐客网
a{
font-size: 30px;
color: red;
text-decoration: none;
}首页
首页
项目实战之图书封面 先上效果
文章图片
image.png 1 HTML骨架
一张封面，需要有这么几个信息：
1.梗概
2.文章名称
3.作者
4.简介
我们来把这些东西填上去，然后随便编一点数据
- 生活中总是充满了乐趣
聊聊我的大学室友
@张三 著那些回忆，那些事。。。
当前效果图
文章图片
image.png 2 添加图书封面整体样式
.items .item {
width: 230px;
height: 320px;
background: #ccc;
list-style: none;
text-align:center;
}
文章图片
image.png 3 banner部分添加背景色，文字颜色
.item-banner {
background: #666;
color: #FFF;
}
文章图片
image.png 4 header部分的文字调整
.item-header {
font-size: 12px;
line-height: 52px;
}
文章图片
image.png 5 文章名称的样式调整
.item-name {
font-size: 22px;
line-height: 74px;
}
文章图片
image.png 6 作者区域字体样式调整
.item-author {
font-size: 14px;
text-indent: 7em;
padding-bottom: 70px;
}
文章图片
image.png 7 简介部分
.item-description {
background: #eee;
height: 104px;
line-height: 76px;
text-indent: 3em;
font-size: 12px;
}
文章图片
image.png 全部代码
Title - 锐客网
.book{
width: 230px;
background-color: #eeeeee;
text-align: center;
}
.info
{
background-color: #666666;
color: white;
}
.book-description{
line-height: 52px;
}
.book-name{
font-size: 22px;
line-height: 74px;
}
.book-author{
font-size: 14px;
padding-left: 100px;
padding-bottom: 70px;
}
.abstract
{
padding-top: 30px;
padding-bottom: 62px;
}生活中总是充满了乐趣
聊聊我的大学室友
@张三 著
那些回忆，那些事。。。课后作业
必做任务
1.制作禁止吸烟（字体样式）
2.制作分享有礼（ 字体样式）
扩展任务
1.制作直播列表（列表样式）
2.制导航列表（列表样式，字体样式，伪类）
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 第二阶段day1总结
- 3.css浮动
- iOS富文本为html时，修改默认字体颜色
- react-navigation|react-navigation 动态修改 tabBar 样式
- Mac下怎么新建|Mac下怎么新建 .txt 文本文件
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- 使用NSAttributedString富文本踩到的坑
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例