这篇博客详细介绍了CSS的使用，包括行内样式、内部样式、外部样式和导入式的应用，以及CSS选择器的类型，如标签选择器、类选择器、ID选择器和通配选择器。此外，还探讨了CSS的优先级规则和文本对齐方式。通过实例展示了如何通过CSS实现网页元素的样式设置和布局管理，强调了类选择器和ID选择器在页面唯一性元素上的区别。
CSS（层叠样式表）
主要使用场景就是美化网页、布局页面
CSS规则由两部分构成：选择器 ，声明
CSS引用：
写在<head></head>标签内：
<style type = "text/css">
CSS样式.....
</style>
CSS注释：/注释语句/
如何引用CSS样式：
1、行内样式：在开始标签内添加style样式属性：如：<p style ="color:red;">内容</p>
2、内部样式：把css样式代码写在：
<style type ="text/css">
样式
</style>
/* <style>要放在<head>标签之间*/
3、CSS外部样式：把CSS样式代码写在独立的一个文件中
扩展名：CSS文件名.CSS
引入外部文件：
<link href ="XX.css" rel ="stylesheet" type ="text/css"/>
/*说明：<link>要放在<head>标签之间*/
4、CSS导入式：
@import “外部CSS样式”
/*说明:@import 写在<style>标签内最开始
CSS使用方法优先级： 行内样式>内部样式>外部样式
1、链入外部样式表与内部样式表之间的优先级取决于所在位置；
2、最后定义的优先级最高（就近原则）
CSS选择器：标签选择器；类选择器；ID选择器；通配选择器
类选择器：为HTML标签添加class属性：
<h1 class="red">内容1</h3>
<p>内容2</p>
<p class="red">内容3</p>
通过类选择器来为具有此class属性的元素设置CSS样式：
.red{color:red;}
同一个元素可以设置多个类，之间有空格隔开：
<p class="red fsize">内容</p>
长名称或词组可以使用中横线来为选择器命名；
多类名：
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签 ；
各个类名中间用空格隔开；
ID选择器：为HTML标签添加ID属性：
<p id="p1">内容1</p>
<p id="p2">内容2</p>
通过ID选择器来为具有此ID的元素设置CSS规则：
#p1{color:red;}
#p2{color:blue;}
id选择器和类选择器的区别：
1、类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用；
2、id选择器好比人的身份证号码，全中国唯一的，不得重复；
3、id选择器和选择器最大的不同在于使用次数上；
4、类选择在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用；
标签选择器：是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签名 {
属性值1：属性值1；
属性值2：属性值2；
属性值3：属性值3；
…
}
通配选择器：
font-family属性定义文本的字体系列：
p {font-family:“微软雅黑”；}
div {font-family：Arial,“Microsoft Yahei”,“微软雅黑”；}
1、各个字体之间必须使用英文状态隔开；
2、如果有空格隔开的多个单词组成的字体，加引号；
3、最常见的几个字体：body { font-family:“Microsoft Yahei”,tahoma,arial,“Hiragion Sans GB”}
对齐方式：
text-align:属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center;(居中) left（左对齐）； right（右对齐）
}
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
