本文介绍了CSS的基础知识，包括选择器（标签选择器、类选择器、id选择器和通配符选择器）、字体样式（如font-family、大小、粗细）、文本样式（颜色、对齐、装饰和缩进）、以及CSS的三种引入方式（行内、内联和外部）。同时提到了Chrome浏览器的调试工具在样式调试中的应用。
目标：CSS，CSS基础选择器，设置字体样式，文本样式，CSS三种引入方式，使用Chorme调试工具调试样式
CSS是层叠样式表（Cascading Style Sheets）简称,有时会称为CSS样式表或级联样式表，CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
格式例如
<head>
<style>
p{
color： ；
font-size：25px； }
</style>
</head>
属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格
CSS选择器
作用选择标签用的
选择器分为基础选择器和复合选择器两大类，基础选择器是由单个选择器组成的，基础选择器包括：标签选择器，类选择器，id选择器，通配符选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名分类 。优点：快速为页面中同类型的标签统一设置样式。
标签名 {
属性1： 属性值1；
属性2：属性值2；
...
}
类选择器：如果想要单独选一个或者某几个标签。
.类名 {
属性1： 属性值1；
...
}
结构需要用class属性来调class类的意思
<div class='red'>变红色</div>
background-color背景颜色
类选择器-多类名
<div class="red font35">
在标签class属性中写多个类名 ，多个类名中间必须用空格分开，这个标签就可以分别具有这些类名的样式 。
我们可以把一些标签元素共同的部分放到一个类里面，这个标签都可以调用这个公共的类，然后在调用自己独有的类
id选择器
可以为标有特定id的HTML元素指定的样式
#id名 {
属性1： 属性值1 例如<div id= "pink">内容</div>
...
}
注意：id属性只能在每个HTML文档中出现一次。口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
通配符选择器
在css中，通配符选择器用 "*" 定义，它表示选取页面中所有元素（标签）。
* {
属性1： 属性值1；
...
}
这里把html body div span li 等等的标签都改为了红色
基础选择器总结
如果是修改样式，类选择器使用最多。
css字体属性
CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式。CSS使用font-family属性定义文本字体系列。
p { font-family:"微软雅黑"；}
字体大小
标题标签比较特殊，需要单独指定文字大小。
字体粗细
文字样式
字体复合属性
字体属性总结
CSS文本属性
文本颜色
CSS Text属性可定义文本的外观，如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。
开发中最常用的是第十六进制
文本对齐
装饰文本
a {
//取消a默认的下划线
text-decoration: none;
color: red;
}
文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。甚至长度可以是负值
div { p {
text-indent: 10px; text-indent: 2em;
} }
em是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小。
行间距
line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离
p {
line-height： 26px
}
推荐工具FSCapture.exe测量行高
css引入方式
根据css样式书写的位置或者引入的方式，CSS样式表分为三类：1.行内样式表（行内饰）、2.内部样式表（嵌入式）、3.外部样式表（链接式）。
内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的css代码抽取出来，单独放到一个<style>标签中
行内样式表（内联样式表）是在元素标签内部的style属性中设定css样式，适合修改简单样式
外部样式表适合样式比较多的情况，核心是：样式单独写到css文件中，之后把css文件引入到HTML页面中使用，步骤：1、新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。2、在HTML页面中，使用<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">位置写在</head>上方
使用外部样式表设定css，通常也被称为外链式或链接式引入
<hr>横线标签
想要图片居中对齐，则是让他的父亲 p标签添加 水平居中的代码
Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和css样式
1、打开调试工具
打开Chrome浏览器，按下F12键或者右键 检查。找elements（元素）
扫一扫
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
