css基础用法一_.css文件外面用加标签吗-CSDN博客

本文链接：https://blog.csdn.net/qq_38023612/article/details/117575797

css规则主要由两个主要的部分构成：选择器，以及一条或者多条声明

一·书写的位置不同分为四种方式：内联式，内嵌式，外联式，导入式

1.内联样式表

内联式也称行业内式，写在html标签之上的style属性中的css样式。所有的样式组成style属性的内容。<p style="font-size 30px"></p>。缺点是1.代码重复2.没有完全脱离html3.不利于代码阅读

2. 内嵌式

书写在<head>标签中中<style>标签中。sytle标签中有一个属性，type 属性值是text/css<style type="text/css"></style>。有点，结构和样式的初步分离，多个标签可以重复利用一段代码。缺点：结构样式没有完全分离。，css样式不能被其他文件使用，css代码太多头重脚轻，不利于阅读。

3.外联式，写在扩展名为.css的文件中，包含了选择器和需要添加的样式。.css文件中直接书写选择器和样式，不需要添加标签。需要在html中引用文件。<link>标签，属性rel，属性值：stylesheet。href属性添加路径。type属性text/css。实现了样式和css完全分离。多个html文件可以共用一个文件。减少代码量。一个html文件可以引用多个css文件。

4.导入式在内嵌式表<style>标签内部，或者在外联式表内部，导入其他外部.css文件

代码量少的时候可以使用内嵌式，大型的使用外联式

二·css的规则

主要部分选择器以及一条或者多条声明。分号必须。css是不区分大小写的。推荐使用小写风格。书写代码的时候选择器和大括号之间保留一个空格，属性的属性值之间加个空格。

三·常用的属性

color:给文字设置颜色，可以颜色名的编写red，black，orange，yellow，pink，blue，god等等。也可以使用颜色值，包括rgb模式，和十六进制颜色。rgb(红，绿，蓝)，十六进制写法FF FF FF,F00

font-family:显示文字字体。font-family:"Arial","宋体"常用字体，宋体SimSun,微软雅黑 Microsoft Yahei。应为字体：Arial，consolas。可以设置多个，会根据书写顺序加载，如果支持则加载。浏览器中加载的字体是用户机器自带的，如果用户的电脑中没有设置字体，则加载失败。因此在最后的字体设置一个备用的字体。中文字体中一般带有英文字体。

font-size:单位px，em倍数继承祖先元素的倍数，%继承祖先元素的倍数。浏览器由默认最低的显示字号，如果低于字号，则加载最小字号。谷歌浏览器最低八像素。ie最低1像素。网页中设置最小字号的时候必须是12像素，如果低于12像素会有兼容问题。设置字号的时候最好设置偶数字号，ie6等版本中基数字号会有问题。一般12，14，16.14居多。

四·盒子

width，height，background-color

五·css选择器

1.基础选择器;标签选择器，id选择器，类选择器，通配符选择器

标签选择器：标签名。无论嵌套由多复杂，都会选中。会忽视嵌套关系。可以给同名标签设置公共样式。不能对局部标签加样式。p{color:red}

id选择器：给标签设置id属性值，书写方式#id{color:red},只能选中一个标签，每个id必须唯一。

class选择器。.class{color:red} class可以和其他相同，多个标签不区分标签类型。一个标签可以有多个class，每个属性值用空格分开。每个类名都可以设置样式。类选择器的特殊使用，原子类，一个类对应一个属性。在实际的工作中类表示样式，id用来表示行为。

通配符选择器：*{color:red;margin:0px;pandding:0px}通配符可以实现全选。缺点，选择效率低。设置的样式不是所有的标签都需要的。如果使用通配符不需要的标签也加载一次样式，导致浏览器做无用的工作。

2 .高级选择器

后代选择器，也可以叫包含选择器。空格表示后代，基础选择器中间使用空格分开，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。在原有的选择器上缩小范围。最后由最后一个选择器选中元素。.box1 ul li p{color red},后代选择器必须满足后代关系。减少class属性的定义使用。

交集选择器：通过标签之上满足所有的基础选择器的需求去选择标签，书写方式，基础选择器进行连续书写，如果由标签选择器参与交集，必须书写在开头，选择的是满足所有基础选择器的标签，如果一个条件不满足不能被选中。p.demo,可以进行多个类名的选择。ie6不支持连续类名的写法。只认最后一个类名。可以单独使用也可以作为其他高级选择器的一部分。

并集选择器：相当于化简写法，多次书写样式会导致代码重复。多个选择器中间逗号分隔开。多个标签具有公共样式的时候。

六·层叠式

层叠式是贯穿整个css的样式。继承性：如果一个标签没有设置过一些样式，但是他的祖先曾经设置过，这是从祖先级继承而来。能够继承的是文字样式，盒模型样式和背景属性不能继承。

相同属性加载多次只有一个会被成功加载，他会层叠覆盖掉其他的属性。根据判断优先级

被多个选择器选中：

1.选中目标标签时比较选择器的权重：根据选择器范围大小判断，越大权重越低。通配符选择器<标签选择器<类选择器<id选择器。高级选择器的权重比较方法，会基于基础选择器，会比较id选择器的个数，类选择器的个数，标签选择器的个数。id选择器就能比较出来，则无需后面比较

并集选择器比较权重的时候应该拆分开来进行比较。如果选择器权重一样，书写靠后的会合并掉靠前的。

选中目标标签的祖先级：是否是文字样式，文字样式被继承，

第一步：就近原则，比较选择器中的祖先及在html中离目标元素的远近，近的替代远的。如果选中的祖先级距离目标一样则比较选择器的权重。若权重一致则比较书写顺序。

!important关键字，书写方式，在属性值后面空格加!important 。在判断权重的过程中会将某条属性的权重提升到最大。只能提升属性权重

行内式：

行内式的权重，权重最高，但是低于!important