CSS文字样式属性
01.引入CSS样式表
分为三类：行内样式表，内部样式表，外部样式表 下面我们一一来看。
1.1行内样式表
是通过标签的style属性来设置元素的样式（一次只能控制一个标签）
代码如下：
<标签名 style=“属性1：属性值1; 属性2：属性值2; 属性3：属性值3;”>内容</标签名>
案例
<P style="color:red; font-size:12px;">外面有一个更丰富的生活，而我想在那样的世界生活</p>
1.2内部样式表
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义（整个页面都能控制前提是要相同的标签）
代码如下：
<head>
<style>
选择器（选择的标签）
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
</style>
</head>
案例：
<style>
h4 {
color: pink;
}
</style>
</head>
<body>
<h4>青春不常在</h4>
<h4>努力向往着美好</h4>
<h4>上九天揽月 下五洋捉鳖</h4>
</body>
</html>
1.3外部样式表
是将所有的样式放在一个或者多个以.css创建的一个文件夹中
通过link标签将外部样式表文件链接到HTML文档中（也可以实行共享）
代码如下：
<head>
<!--这句话就是给html文件和 css文件建立一种联系-->
<link rel="stylesheet" type="text/css"(可以省略掉) href="css文件路径">
</head>
案例如下:
注意：
- link是个单标签
- link标签需要放在head头部标签中，并且指定link标签的三个属性
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |
| href | 定义所链接外部样式表文件的URL,可以是相对路径，也可以是绝对路径 |
代码风格
推荐用展开方式：
h3 {
color:deeppink;
font-size:20px;
}
代码都用小写字母书写
02-css选择器
基础选择器分别为标签选择器，类选择器，id选择器，调配符选择器下面我们一一来看。
2.1 标签选择器
是指用HTML蒙一个标签指定统一的CSS样式
代码如下：
指定的标签名 {
属性1：属性值；
属性1：属性值；
属性1：属性值；
}
案例
<style>
h4 {
color: pink;
}
div {
color: red;
}
</style>
</head>
<body>
<h4>青春不常在</h4>
<h4>努力向往着美好</h4>
<h4>上九天揽月 下五洋捉鳖</h4>
<div>标签选择器</div>
<div>页面同选起</div>
<div>直接写标签</div>
<div>全部不放弃</div>
</body>
</html>
2.2类选择器
类选择器使用“.”进行标识，后面跟类名。可以选择一个标签或者多个标签
代码如下
.类名（自定义）{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
<P class="类明">内容</P>
案例
<style>
.red {
color: red;
}
</style>
</head>
<body>
<h4 class="red">青春不常在</h4>
<h4>努力向往着美好</h4>
<h4>上九天揽月 下五洋捉鳖</h4>
<div class="red">差异化标签</div>
<div>一个或者多个</div>
<div>上面点定义</div>
<div>类名别写错</div>
<div>谁用谁来调</div>
<div>class来做</div>
多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的
案例
<style>
.font100 {
font-size: 100px;
}
.haha {
color: blue;
}
.enen {
color: brown;
}
.aa {
color: coral;
}
.ww {
color: darkgreen;
}
.hehe {
color: maroon;
}
</style>
</head>
<body>
<!-- 在一个标签只能有一个class 中间用空格分开 -->
<span class="haha font100">G</span>
<span class="enen font100">O</span>
<span class="aa font100">O</span>
<span class="haha font100">g</span>
<span class="ww font100">l</span>
<span class="hehe font100">e</span>
</body>
</html>
2.3 id选择器
元素id是唯一的，只能对应于文档中蒙一个具体的元素
代码如下
<style>
#类名（自定义）{
属性1；属性值1；
属性2；属性值2；
属性3；属性值3；
}
</style>
案例
<style>
#pink {
color: pink;
}
</style>
</head>
<body>
<!-- 只能调用一次id -->
<P id="pink">愿你走出半身</P>
<P>归来仍是少年</P>
<P>原我洗尽铅华</P>
<P>依旧笑魔如花</P>
</body>
</html>
2.4 通配符选择器
选择所有的页面标签进行改颜色(由于是选择所有标签的是没有类名的）
代码如下
<style>
* {
属性1： 属性值1；
属性2： 属性值2；
属性3： 属性值3；
}
</style>
案例
<style>
* {
color: pink;
}
</style>
</head>
<body>
<!--用“*”表示 页面所以标签都改成统一颜色 -->
<div>所有的，我都要</div>
<div>所有的，我都要</div>
<p>所有的，我都要</p>
<span>所有的，我都要</span>
</body>
</html>
03-CSS文字文本样式：font字体
3.1 font-size:大小
代码如下
body（自定义） {
font-size： 20px；（结合实际情况给出字体大小）
}
案例
<style>
body {
<!--设置字体-->
font-size: 30px;
}
* {
color: red;
}
</style>
</head>
<body>
<!--一般给body指定页面的大小 -->
<p>生活，重简单开始，向美好出发</p>
<p>所谓生活，就是从简单开始，向美好出发，忠于自己的内心，不负自己所想</p>
<p>愿你在无趣的日子里依然保持好奇，世界很大随时都可能绽放奇迹</p>
</body>
</html>
3.2 font-family：字体
代码如下
body(自定义) {
<font-family:"Microsoft yahei"
}
我们也可以引入字体（不常用 小心版权问题）
使用font-face引入字体
@font-face{
指定字体的名称
font-family:'test';
本地字体的路径，要求字体必须是本地的字体
src:url('./font/ZCOOLKuaiLe-Regular.ttf');
}
案例
<style>
body {
<!--设置字体大小-->
font-size: 30px;
<!--设置字体各个之间用“，”号隔开 中文字体需要加上引号""-->
font-family: Arial,"Microsoft yahei","微软雅黑"
}
</style>
</head>
<body>
<p>生活，重简单开始，向美好出发</p>
<p>所谓生活，就是从简单开始，向美好出发，忠于自己的内心，不负自己所想</p>
<p>愿你在无趣的日子里依然保持好奇，世界很大随时都可能绽放奇迹</p>
</body>
</html>
3.3 font-weight:字体加粗
代码如下
.title(自定义) {
font-weight：bold（700）
}
案例
<style>
body {
/* 设置字体大小 */
font-size: 30px;
/* 设置字体内形*/
font-family: Arial,"Microsoft yahei","微软雅黑"
}
.title {
/* 设置字体粗细 */
font-weight:bold（700）;
}
</style>
</head>
<body>
<p class="title">生活，重简单开始，向美好出发</p>
<p>所谓生活，就是从简单开始，向美好出发，忠于自己的内心，不负自己所想</p>
<p>愿你在无趣的日子里依然保持好奇，世界很大随时都可能绽放奇迹</p>
</body>
</html>
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400等同于normal，而700等同于bold |
3.4 font-style：字体风格
代码如下：
em(自定义)font-style {
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
案例
em {
/* 让倾斜的字体不倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<em>生活，重简单开始，向美好出发</em>
</body>
</html>
| 属性 | 作用 |
|---|---|
| normal | 默认值让倾斜的字体不倾斜 |
| italic | 让字体倾斜 |
font综合设置字体样式（重点）
代码如下
选择器 { font: style weight font-size font-family;}
案例
<style>
body {
/* font: style(字体样式) weight（字体粗细） size（字号） family（字体型号）; */
/* 使用font属性时必须按上面顺序书写各个属性空格隔开 */
font: italic 700 40px "微软雅黑";
}
</style>
</head>
<body>
<P>对任何热爱的事情都要全力以赴，包括自己</P>
<P>愿我们平安喜乐，静度一生</P>
<P>这世上，肯定蒙个角落，存在着能完全领会我想表达的意思的人</P>
<body>
4.CSS外观属性
4.1 color文本颜色
color属性用于定义文本的颜色
我们通常用16进制写法可以简写比如#FF0000简写为：f00
| 十六进制 | #FF0000，#FF6600,#29D794 我们通常用Faststone 工具进行吸取 |
|---|
4.2 文本水平对齐方式
代码如下
text-align
其可用属性值如下：
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
案例如下
.haha {
/* 文本水平居中对其 */
text-align: center;
}
注意一点：是让盒子里面的内容水平居中，而不是让盒子居中对齐
4.3 行间距
实际工作中我们常用像素px
代码如下
line-height
案例
p {
/* 行间距（行高） */
line-height: 24px;
}
注意一点：一般情况下行距比字号大个7/8即可
4.4首行缩进
代码如下
text-indent
案例
p {
/* 首行缩进俩个字的距离 em是倍数关系 1em就是一个字的距离 2em就是俩个字的宽度 */
text-indent: 2em;
}
4.5文本装饰
通常我们用于给链接修改装饰效果
代码如下
text-decoration
案例
a {
/* 取消下划线因为a是链接默认自带下划线 */
text-decoration: none;
}
属性
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。取消下划线（最常用） |
| underline | 定义文本下的一条线。添加下划线 也是链接自带的（常用） |
5.垂直对齐方式
语法如下
vertical-align：
| baseline | 基线对齐 |
|---|---|
| top | 和父元素顶部对齐 |
| bottom | 和父元素得底部对齐 |
| super | 上标 |
| sub | 下标 |
| middle | 居中 |
vertical-align：bottom 在图片中用的多以后默认的图片和父元素下面有一小段外边距 可以使用vertical-align：bottom来解决 也可以使用font-size：0 来解决
本章完
扫一扫
2098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
