文章目录

前言

一、CSS是什么？

二、引入CSS样式

1.行内样式

2.内嵌样式

 3.链接样式（外链式）

 4.使用导入样式

三、CSS语法规则

四、CSS选择器

总结

• 总结

前言

  网页有三个层：
  html   用来搭建网页基本骨架    结构层
  css    用来修饰网页            表现层
  javascript    脚本            行为层

前面学完了html的一些基本标签，现在来看css，能够更方便快捷的构建渲染好看的网页界面

一、CSS是什么？

CSS  (层叠样式表)（Cascading Style Sheets)，描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素,CSS 节省了大量工作。它可以同时控制多张网页的布局

二、引入CSS样式

1.行内样式

代码如下（示例）：

		<p style="color:black;"></p>

2.内嵌样式

代码如下（示例）：

<style type="text/css">
		p{
			font-size: 24px;
            width: 200px;
			color: pink;
		}
		
	</style>

 3.链接样式（外链式）

代码如下（示例）：

<link rel="stylesheet" type="text/css" href="css/01.css"/>

 4.使用导入样式

代码如下（示例）：

@import url(“css文件”);
@import “.css文件”;

5.优先级

三、CSS语法规则

四、CSS选择器

    1.标签选择器

hr {
				border: 0px;
				border-bottom: 1px solid #89c5e8;
			}

 2.id选择器
      

	#content {
				color: mediumpurple;
				font-size: 24px;
				font-family: "arial black";
			}

   3.类（class）选择器
  

			.num1 {
				font-size: 24px;
				color: pink;
			}

 4.包含选择器（后代选择器）
      

p a{
			font-size: 24px;
            width: 200px;
			color: pink;
		}

  5.优先级（权重）
      

五、CSS注释

<style type="text/css">
	/* 	p {
			font-size: 24px;
            width: 200px;
			color: pink;
		} */
		
	</style>

六、长度单位

七、颜色表达     RGB颜色

1.直接使用颜色英文单词    不推荐

（有点浏览器不兼容）

2.使用三色的数值，如rgb(120,222,100)

例：red rgb(255,0,0)    

       blue  rgb(0,0,255) 
       black rgb(0,0,0)
       green  rgb(0,255,0)

      white  rgb(255,255,255)

 3.使用三色数值的十六进制，如#0000ff
     

例： rgb   red #ff0000   #f00  

      blue   #0000ff  #00f

      black #000000  #000
     green   #00ff00  #0f0  

     white #ffffff  #fff
        

总结

以上就是今天的内容，简单介绍了CSS的基本语法和选择器的使用，还有一些零碎的使用方法，下一篇具体讲解字体文本样式