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(右对齐)
}