本文详细介绍了CSS的基础知识，包括语法规范、代码风格、选择器的使用以及字体属性的设置。CSS选择器分为标签选择器、类选择器、ID选择器和通配符选择器，用于精准定位和美化HTML元素。字体属性涵盖字体家族、大小、粗细和样式，以及复合属性的使用。此外，还讲解了文本颜色、对齐、装饰和行间距等文本属性。最后，探讨了CSS的三种引入方式：内部样式表、行内样式表和外部样式表。
目录
CSS简介
CSS也是一种标记语言，美化HTML，布局网页
CSS主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等），图片的外形以及版面的布局和外观显示样式
结构（HTML）与样式(CSS)相分离
CSS语法规范
CSS规则由两个主要的部分构成：选择器 以及 一条或多条声明
h1{color:red; font-size:25px} h1 是选择器 color 是属性 red是值
在 <head>里面添加<style>，<style>里面开始写CSS
选择器 {
样式： 改成什么样式；
样式： 改成什么样式；
}
CSS代码风格
1.样式格式书写
①紧凑格式（都挤到一行）；②展开格式《如上图》更直观
2.样式大小写
用小写书写，特殊情况除外
3.空格规范
①属性值冒号后面 保留空格；②选择器和括号{ 之间保留空格
CSS选择器
选择器的作用
选择标签用的（根据不同的需求把不同的标签选出来）
CSS：①找到标签；②将找到的标签设置样式
选择器分类
基础选择器
由单个选择器组成；
包括：标签选择器，类选择器，id选择器，通配符选择器
- 标签选择器：指用HTML标签名称作为选择器； 能快速的为页面中同一类标签统一设置样式
标签名 {
属性1： 属性值1；
属性2： 属性值2；
}- 类选择器：单独选择一个或者某一个标签；差异化不同的标签
<style>
.red {
color: red;
}
</style>
...........
<body>
<p class="red">我是红色<p>
</body>
类选择器-多类名
在标签class里面写多个类名，必须用空格分开
<div class="red font20">刘德华</div>- id选择器
以 # 来定义 id属性只能在每个HTML文档中出现一次，调用一次
- 通配符选择器
用 * 来定义 选取页面中所有元素（标签）
复合选择器（看CSS第二天）
CSS字体属性
定义 字体系列（如微软雅黑），大小，粗细，和文字样式（如斜体）
字体系列 字体什么样式font-family
font-family 来定义
- 各字体之间用 逗号 隔开
- 多个单词组成的字体加引号
- 尽量使用系统默认字体
- 可以给<body>标签使用font-family
p {
font-family:'微软雅黑'；
}字体大小 font-size
font-size 来定义
- px(像素)大小是我们网页最常用的单位
- 可以给body标签使用，标题标签比较特殊，需要单独指定文字大小
body {
font-size: 18px;
}字体粗细 font-weight
font-weight 来定义
文字样式 粗斜体 font-style
font-style 来定义
平时很少给文字加斜体，反而要给斜体标签<em>改为不倾斜字体
p{ font-style: normal; }
复合属性
body{
font: font-style font-weight font-size/line-height font-family;
font: italic 700 50px 'Papyrus';
}
- 不能更换顺序！！！每个属性之间以空格隔开
- 不需要的属性可以省略，但必须保留font-size和font-family属性！！
文本属性
可定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等
文本颜色
开发中最常用的是十六进制
对齐文本 居中对齐text-align
text-align 用于水平对齐
left 左对齐（默认） right右对齐 center 居中对齐
div {
text-align: center;
}装饰文本 下划线text-decoration
text-decoration 添加到文本的修饰 可以给文本添加 下划线，删除线，上划线等
none 取消装饰线（默认） underline 下划线 overline 上划线（几乎不用）line-through 删除线（不常用）
div {
text-decoration: underline
}文本缩进 text-indent
text-indent 用来定义第一行的缩进距离，通常是段落首行缩进
em 是一个相对单位，就是当前元素（font-size）1个文字的大小。
p {
text-indent: 2em;
}
行间距 line-height
line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。
行间距=上间距+下间距+文字高度（不变）后加px
p {
line-height: 30px;
}CSS引入方式
内部样式表（嵌入式引入）
写到html页面里面，放到<style>标签里面，一般放到<head>标签里面，可以控制整个html页面里面的元素。代码结构清晰，部分实现结构与样式完全分离，可以控制一个页面
行内样式表（行内式引入）
在元素标签内部的style属性中设定CSS样式，适合于修改简单样式，不适合大量使用，没有实现结构与样式分离，可以控制一个标签
<p style="color:pink;font-size:20px;">给我一个粉色的回忆</p>外部样式表（最多使用）
单独建CSS文件，然后把CSS文件引入到HTML页面中,完全实现结构与样式分离，可以控制多个页面
- 先建一个.css文件，把所以CSS代码都放入此文件中
- 在HTML页面中，<head>标签里使用<link>标签引入这个文件
- <link rel="stylesheet" href="css文件路径">
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
