css基础

什么是CSS

CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。

添加样式表的形式

内联式：直接在元素中加入style属性，只能用于网页中的一个元素

《div style="border: 1px solid #000;width: 300px;height: 200px">《/div>

嵌入式：书写style标签，在标签中指明样式，可以用于网页中的不同元素。 《style> div{ width: 300px; height: 200px; background-color: yellow; border: 2px solid #000; } 《/style>

外联式：将样式规则书写到文件中，可以用于不停的网页，重用度最好。

《link rel="stylesheet" href="abc.css">

层叠样式表的含义是：如果有多个规则来描述同一个元素，那么会根据样式表的优先级，来决定最终显示什么样式。

对于导入css方式的优先级：内联式>嵌入式>外联式

CSS选择器

元素选择器：利用元素的标签名称作用选择范围，div{}表示所有div元素均采用该样式。h1，h2{}表示所有的h1标签和h2标签均采用该样式。

类选择器：利用元素的class属性来引入类选择器的样式。 .mm{} 《div class="mm">《/div> 该div采用mm类选择器定义的样式

id选择器 #：让用于该id属性的元素采用该样式《p id="p1">《/p> #p1{}id号为p1的元素采用该样式。

包含选择器：标记元素类的子元素采用该方式。《div id="mydiv">《/div> #mydiv span{} id 号我mydiv元素中所有的span标签采用该样式。div.aa{}表示所有的div中，calss属性为aa的元素采用该样式。

通配符 #：所有的元素均采用该样式。#oneDiv *{}表示id我oneDiv中，所有的元素均采用该样式。

伪类选择器 #：执行完某个动作的元素采用该样式。#data tr:hover{} 表示鼠标悬停在id为data下的tr元素时，采用该样式。

颜色单位：

• 使用0-255之间的整数值来设置，如color:rgb(128,0,128);
• 使用十六进制数组定义颜色，如#fcOeab;
• 为颜色取名：aqua,black,blue,fuchsia,gray,green等

CSS优先级：选择器优先级：！important>id>class>element>伪类>*

!important可以改变css选择器的优先级，加上！important就优先于正常的css规则