css的基本概念

css并不是一门语言，而是用来描述html元素如何显示的层叠样式表，就像我们女孩子为了更好展现自己的美，画上美美的妆，穿上漂亮的衣服。

用css的几种方式

1.内联

在html标签内部直接用，看例子，设置文本颜色和背景

复制代码

这种方式的优点直观，方便，快捷，据说效率还高，还可以作为调试bug一种简单手段，缺点也是有的：其他标签想用这种样式。不能够重用样式，得再写一遍，而且有好多好多样式直接写到这个标签里，让代码看着特别拥堵，不美观，这时候就不建议采用。

2.嵌入式

解决第一种方式的缺点，我们可以集中把这些样式提取出来，放置在head标签里的style标签里，还是直接看例子

		<meta charset="utf-8">
		<title></title>
		<style>
			p {
				color:pink; 
				background-color:gray;
				font-size: large;
				font-family: "arial narrow";}
		</style>
	</head>
复制代码

你看这么多属性，所有的p都能用，放置在head里不是强制的，我放置在其他地方也是可以生效的，放在head里是建议
但这样也是有缺点的：这只是解决了一个html文件中标签复用问题，但如果有多个html文件都用一样的样式，则需要在每个html文件里写一遍，如果样式发生了改变，则需要去每个html文件里改一遍，大家都知道，我们程序员都很懒的，所以第三种方式解决了这个问题

3.外部引用css

上接第二种方式，将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。

然后通过html标签在HTML页面的部分将CSS文件引入，上例子
我们创建一个css文件，在文件里写入p标签的样式

然后创建两个html文件引用它

注：我这里href地址用的是相对地址，绝对和相对都可以，只要找到

css基础语法

基础语法很简单，呐。。。

样式规则有三个部分：选择器，属性和值。

例如，标题颜色可以定义为：

h1 { color: orange; }
复制代码

详解：

选择器要指向需要设置样式的HTML元素。

在CSS样式规则中：

各个属性与属性值间以“键值对”形式出现

所有的属性设置都用花括号括起来

属性名与属性值间用冒号连接

多个键值对之间用分号分开

例如：

h2{
  color: red;
  background: #ccc;
  font-size: 16px;
}
复制代码

选择器分类（下次详解）

selector是标签名，本文的例子都是标签名
selector是class属性
selector是id属性
selector是其他type属性

等等

css注释

我们都知道注释是要干嘛的

css注释跟c/c++多行注释一样 /* 注释内容 */
html里的是<!– 注释内容 –>
python 是 #注释内容

css样式的级联和继承

1.级联

级联的顺序，首先要根据起源（origin）将规则分类。\

网页的最终外观是不同的样式结合的结果。

通过样式的三个主要来源形成一个级联：

由页面的作者创建的CSS样式\
浏览器的默认CSS样式\
浏览页面的用户自定义CSS样式

具体优先顺序如下：

页面作者（author）设置的规则 > 用户（user）规则 > 浏览器（browser）规则

2.继承

继承是指属性在页面中流动的方式。除非另有定义，子元素通常会采用父元素的特征。

例子：

<html>
   <head>
      <style>
      .father {

	color: red;


	font-size: 24px;


      }

     </style>
   </head>
   <body>       
      <div class="father">

            <div class="son">子元素</div>
      </div>

   </body>

</html>
复制代码

结果：

QQ截图20200714134932 \