CSS层叠样式表
用于美化网页 层叠样式表也是一种标记语言，可称之为CSS样式表或级联样式表
可设置文字，图片，布局网页，美化网页
将结构HTML和样式CSS分离
CSS规则主要由两个部分构成：选择器以及一条或多条声明。
Css基础选择器
根据不同的需求吧不同的标签选出来，简单的来说，即选择不同的标签
选择器分为基础选择器和复合选择器
基础选择器：
a标签选择器
用html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式，无法进行差异化设计
B类选择器
差异化不同的标签，单独选一个或者某几个标签，可以使用类选择器
<style>
.red {
color: red;
}
</style>
<li class="red">冰雨</li>
类选择器-多类名选择器
给一个标签指定多个类名，从而达到更多的目的
使用方式
例如
<div class="red font35">刘德华</div>
Class属性中血多个类名
必须使用空格隔开
Id选择器
<style>
/* id选择器，样式#定义，结构id调用，只能调用一次 */
#pink {
color: pink;
}
</style>
<div id="pink">刘德华</div>
id选择器，样式#定义，结构id调用，只能调用一次
通配符选择器
使用*定义，表示选取页面中所有元素
基础选择器总结
Css字体属性
字体Font-family
各种字体之间必须使用英文状态下的逗号隔开
一般如果有空格隔开的多个单词组成的字体，加引导
最常见的几个字体：body{font-family:’Microsoft YaHei’,Tahoma,arial,’Hiragino Sans GB’;}
字体大小 font-size属性定义字体大小
使用px作为文字大小单位
谷歌浏览器默认为16px
不同浏览器可能默认显示的字号大小不一致
字体粗细font-weight属性设置文字粗细
语法：font-weight:normal/normal/border/lighter/number
.curde {
font-weight:bold;
}
<p class="curde">呼叫pink老师</p>
Nomal正常 border 加粗
常用 number
.border {
font-weight:700;
}
直接在font-weight后面加数字，700的效果等同于border
可以使用<strong>标签加粗
文字样式
font-style属性设置文本的风格
字体复合属性
字体属性可以把以上文字样式综合来写可以达到节约代码的目的
顺序不能改变 依次为 风格 字重 大小/行高 字体
不可以随意改变顺序，并且属性依次使用空格隔开
不需要设置的属性可以省略（取默认值），但是必须保留font-size font-family
Css字体属性总结
CSS文本属性
Css text可定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距
文本颜色 color属性用于定义文本颜色
Text-algin属性用于设置元素内文本内容的水平对齐方式
装饰文本
Text-decoration属性规定添加到文本的修饰，可以给文本添加下划线上划线删除线
例如
.underline{
text-decoration: underline;
}
<div class="underline">下划线</div>
文本缩进
Text-indent属性用于指定文本第一行缩进
p {
/* 文本第一行首行缩进多少距离 */
text-indent: 2em;
}
一个em表示一个文字大小的距离
行间距
Line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
CSS文本属性总结
CSS引入方式
内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有css代码抽取出来单独放到一
个style标签中
理论上style标签可以放到html文档任何一个地方，但是我们习惯于放到<head>标签中
行内样式表
行内样式表（内联样式表）实在元素标签内部style属性中设定css央视。适合于修改简单样式
外部样式表（***重点***）
实际开发都是使用外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后吧CSS文件引入到HTML页面中使用
引入外部样式表分为两步：
1新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件之中、
2在HTML页面中，使用<link>标签引入此文件
CSS引入方式总结
扫一扫
3066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
