前端编程之css

Posted 2021-12-11 tuanzibuku

前端CSS 

　　　层叠样式表(穿衣服，化妆)，通俗的理解就是让我们写的标签更加好看，加颜色，改字体，加背景等等

 

语法结构        

　　　选择器 {属性:属性值;属性:属性值;属性:属性值;}

三种引入css样式的方式       

1，head内style标签内部直接书写css代码

 

2，link标签引入外部css文件

3，直接在标签内通过style属性书写css样式

 

如何查找标签

css选择器

基本选择器

标签选择器，选择所有相同的标签，例如，，这个选择器会选择所有的dt标签，并将其字条改为48px

通用选择器，*  就是选择所有的标签

类选择器：定义类选择器时要在前面加一个点，例如，使用时，只需要在标签里写class=red就行了，一个标签可以同时继承多个类。效果图

id选择器：所有标签都应该有一个id，id名是不能重复的。先在标签里加上标签值，id选择器就一这个id命名，要在前面加#

 

选择器的优先级：

相同选择器 不同的引入方式：     就进原则 谁越靠近标签谁说了算,代码时从上而下运行的
不同选择器 相同的引入方式：　行内样式 > id选择器> 类选择器 > 标签选择器

css继承：依赖后辈关系，比如在dl标签里面设置了红色，那么里面的dt，dd都会变成红色，但是继承权重最低，很容易就能覆盖掉

组合选择器

 声明，对于标签的嵌套，把第一级被嵌套的称谓子标签，第二级被嵌套的称为孙子标签，之后的都称为后代标签

后代选择器：div span{color:blue;} 将div后代标签里的所有span标签变成蓝色

儿子选择器：div>span{color:red;} 将div的儿子里面的span标签变成红色

毗邻选择器：div+span{color:red} 将div的相邻的span标签变成红色，注意对下不对上，不能改变div上面的标签

弟弟选择器：div~span{color:red} 将div下面的同辈的span标签全部变为红色，也是对下不对上

属性选择器

对于所有的标签，我们都可以自己给它加上属性

   

我们也可以指定属性的值和标签

[xxx=1]{coler:red}

p[xxx=1]{coler:red}

分组和嵌套

分组：当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如      div,p{color:red;},div和p标签都会红

嵌套：多种选择器可以混合起来使用

例如      div p,span{color:red}  div的后代标签中，所有的p和span标签会变红

伪类选择器：
    
a:link（没有接触过的链接）
 
a:hover（鼠标放在链接上的状态）
 
a:visited（访问过的链接）
 
a:active（在链接上按下鼠标时的状态）
伪元素选择器：

css属性的修改

字体属性

待续