CSS的入门之旅
这是我参与「第五届青训营 」笔记创作活动的第2天
今天要学习的是关于css的基础知识
下面就来简单介绍CSS的基本知识
CSS的语法规范
css的代码一般是放在<head></head>之间的
如下所示
<head>
<style>
选择器{
修改内容
}
</style>
</head>
CSS选择器
选择器：把需求不同的标签选出来进行功能修改
选择器一般分为基础选择器和复合选择器
下面就来介绍一下常用的基础选择器
1.标签选择器
标签选择器就是指用HTML标签名称作为选择器，为页面中某一类标签进行功能设置
【语法】：
标签名{
属性一:属性值1;
属性二:属性值2;
属性三:属性值3;
}
比如我如果相对页面中的段落标签<p>中的内容进行颜色修改，代码如下
<head>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>这里的文字会变红</p>
</body>
2.类选择器
类选择器就是可以选择不同的标签来进行功能设置
【语法】：
.类名{
属性名1:属性值1;
属性名2:属性值2;
}
例如我想把拥有red类的所有HTML元素都变为红色，类选择器代码如下
.red{
color: red;
}
【调用方式】：
<p class="red">这里会变红</p>
这其中还有一个很重要的知识
一个标签可以指定多个类名，调用类时类名之间要用空格间隔开来
【语法】：
<div class="red font20">字体会变为20像素大小且红色</div>
3.id选择器
id选择器可以为由特定id的标签进行功能设置
【语法】：
#id名{
属性名1:属性值1;
属性名2:属性值2;
}
例如我想把id为red的所有HTML元素都变为红色，id选择器代码如下
#red{
color: red;
}
【调用方式】：
<p id="red">这里会变红</p>
id选择器和类选择器看似很相似，但是其中还是由很大的区别：
- id选择器只能调用一次，而类选择器可以调用多次
4.通配符选择器
统配符选择器是范围最大的选择器，通常是用来选取页面中的所有元素
【语法】：
*{
属性名1:属性值1;
属性名2:属性值2;
}
-
通配符选择器一般不需要调用，因为它会选中页面中的所有元素进行功能修改
-
只有特殊情况下才需要到，比如修改内外边距等等
CSS字体属性
1. 字体系列
【属性名】：font-family
【作用】：用来改变字体风格，比如宋体什么的
【用法】：<div font-family: Microsoft-Yahei;>
2.大小
【属性名】：font-size
【作用】：用来改变字体大小
【用法】：<div font-size: 20px；>
3.粗细
【属性名】：font-weight
【作用】：用来改变字体粗细程度
【用法】：<div font-weight: bold;>
或者<div font-weight: 70;>
- 数值400时是一般字体，700是加粗
4.文字样式（斜体）
【属性名】：font-style
【作用】：用来改变字体样式，比如斜体等
【用法】：<div font-style: italic;>
5.复合属性
【作用】：可以在一行内直接修改字体的各个属性
【语法】：font: font-style font-weight font-size/line=height font-family
- 有些属性可以省略，会以默认值放上，但必须保留font-size和font-familys属性
CSS文本属性
1.文本颜色
【作用】：定义文本字体颜色
【语法】：
div{
color:red
}
属性值还有其他表达方式
| 表示方法 | 属性值 |
|---|---|
| 预定义颜色 | red,green,blue等等 |
| 十六进制 | #ff000000,#29d274等等 |
| RGB代码 | rgb(a,b,c) |
2.对其文本
【作用】：定义文本水平对齐方式
【语法】：
div{
text-align: center;
}
属性值还有其他类型;
| 属性值 | 解释 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
3.装饰文本
【作用】：给文本添加修饰线
【语法】：
div{
text-decoration: underline;
}
属性值还有其他类型;
| 属性值 | 描述 |
|---|---|
| none | 没有装饰线 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
4.文本缩进
【作用】：给文本进行首行缩进
【语法】：
div{
text-indent: 10px;
}
- 属性值还可以是多少多少em，即多少个字的相对单位
5.行间距
【作用】：给文本设置上下距离
行间距的意义：
【语法】：
div{
line-height: 26px;
}
- （冷知识）将行间距设置的与盒子高度一样即可垂直居中
CSS的引入方式
三种样式表
1.行内样式表（行内式，很少用）
行内样式表即在元素标签内部的style属性中设定CSS样式。适合修改简单样式
【语法】：
<div style="color:red; font-size: 12px;">十二像素的红色字体</div>
- style就是标签的一个属性，属性值要放在双引号之间
2.内部样式表（嵌入式，较多使用）
内部样式表即写到html内部，是将所有的css代码抽取出来，单独放到一个<style>标签中
【语法】：
<style>
p{
color: red;
}
</style>
一般style标签放在head标签中
3.外部样式表（链接式，大量使用）
外部样式表即将样式单独写到CSS文件中，之后再把CSS文件引入到HTML页面中使用
一般引入分为两步
1.新建一个后缀名为.css的样式文件，把所有的css代码都放在文件中（此文件中直接写样式，不需要再写style）
2.在html页面中，在head部分使用<link>标签引入这个文件
【语法】：
<link rel="stylesheet" herf="css文件路径">
- 以上就是css的第一部分基础知识啦，希望大家能够掌握。
