Cascading Stytle Sheets 层叠样式表

1、优势

1.内容和表现分离
2.网页结构表现统一，可以复用
3.样式丰富
4.建议使用独立于html的css文件
5.利于SEO,容易被搜索引擎收录

2、语法

image.png

  1. p {
  2.     color:red;
  3.     text-align:center;
  4. }

3、三种导入方式

优先级

遵循就近原则，离标签近的生效

1.行内样式

2.外部css样式 link

3.

4、选择器

优先级

id>类>标签

分类

基本选择器

标签选择器

  1. p {
  2.     color:red;
  3.     text-align:center;
  4. }

类选择器 class 可以复用

class任意名字都可以

  1. .regist_btn{
  2.     color:red;
  3. }

id选择器 id唯一

  1. #id1{
  2.    color:red; 
  3. }
  4. #id2{
  5.    color:green; 
  6. }#id3{
  7.    color:yello; 
  8. }#id4{
  9.    color:black; 
  10. }

层次选择器

后代选择器

在某个标签后面 爷爷-爸爸-儿子

  1. body p{
  2.     background:red;
  3. }

子选择器

只有一代 

  1. body>p{
  2.     background:red;
  3. }