CSS相关_css dam-CSDN博客

本文链接：https://blog.csdn.net/X_dam/article/details/102651955

CSS叫做层叠样式表，其英文全称是Cascading Style Sheets，是一种用来表现HTML文件样式的计算机语言，更直白的来说就是用来美化、修饰页面的，如果说HTML用来实现网页的结构的话CSS就是网页的元素样式，是一种相辅相成相互依赖的关系。不过当HTML的属性和CSS的属性有重合的话就尽量使用CSS样式取代（除非无法用CSS取代如表格）。

既然叫层叠样式表那其特性肯定会有层叠性：就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。除此之外还有继承性：子元素可以直接使用父元声明好的样式，大部分css样式属性是可以被继承

那么CSS如何使用呢？

内联样式：在标签的style属性中声明样式，但一般不推荐，因为复用性差，可维护性和可拓展性不佳，但好在比较灵活。
内部样式表：将样式声明写在<style></style>中（必须加在head中），适用于写小案例，只在一个页面复用如：<style type="text/css">
外部样式：①创建一个单独的样式表文件保存样式的声明xxx.CSS ②引入需要的HTML页面

CSS的选择器又有哪些分类呢？

1.通用选择器

*{
/这当中的属性是匹配页面中的所有元素/
}

2.标签选择器

h1{
/引用的页面中，所有的指定标签（如h1）设定统一样式，同一个页面相同的标签有相同的样式/
}

3.id选择器

#first{
/标签的唯一标识 ,独一无二的样式设计,id后面的名字/
}

4.class选择器

.header{
/不同的标签均可以设定相同的class属性值,不同的标签有相同的样式设计.只要设置了一样的class值就可以有相同的样式/
}

5.群组选择器

#first,.txt{
/不同的属性值可以放在一起声明，要用逗号隔开/
}

6.后代选择器

.list li{
/具备层级关系的元素，被嵌套的都可以被称为后代元素，就是list里的li/
}

7.并且选择器

ul.list{
/ul标签的class是list/
}

8.子代选择器

div>p{
/父子关系/
}
div+p{
/兄弟关系/
}

9.属性选择器

input[type='submit']{}

10.伪类选择器

.nav a:link{}
.nav a:visited{}
input[type='submit']:active{}
input[type='text']:focus{}
div:hover{}

如果有属性设置冲突了那会选择哪个呢？让我们来看看选择器的权重也就是优先级

id选择器（#XX）的权重值是100 class选择器（.XX）的权重值是10 后代选择器的权重值是1，权重可以叠加，值越大就越有优先权