前端-CSS

1.CSS层叠样式表

CSS层叠样式表主要用来调节html标签的各种样式
"""
思考:页面都是由HTML构成的,并且页面上有很多相同的HTML标签,但是相同的HTML标签在不同的位置可能有不同的样式,我们如何区分标签

标签的量大重要属性:
	1.class属性:分门别类,类似于面向对象中的类,主要用于批量查找(一个标签可以有多个class属性)。
	2.id属性:主要用于点对点的精确查找(一个标签只能有一个属性,id不能重复,重复会飘红)。
	

学习css的流程
	1.先学习如何查找标签
	2.再学习如何调整样式
"""
1.css语法结构
	选择器 {
        样式名:样式值1;
        样式名:样式值2
    }
    
2.css注释语法:/*注释内容*/
    
3.引入css的多种方式:
	1.head内style标签内部编写(学习时使用)


	2.head内link标签引入(标准的方式)

'''link引入标签时不用在style里面写,直接在head里面写就可以'''

3.标签内部通过style属性直接编写(不推荐)

2.CSS选择器

1.CSS基本选择器:
	1.1标签选择器:直接按照标签名查找标签
	span {
            color: aquamarine;
        }
	1.2类选择器:按照标签的class值查找标签,用.class来进行查找
   .c1 {
            color: green;
        }

	1.3id选择器:根据标签的id值精准查找标签,用#id值的方式来进行查找

	1.4通用选择器:将所有的内容变成指定属性
	* {
    color: aqua;
}
2CSS组合选择器
"""
之前我们学习了块级标签(p标签,div标签)和行内标签(span标签,img标签,a标签),块级标签可以嵌套块级标签和行内标签,而行内标签只能嵌套行内标签。现在我们对标签嵌套又有一个新的分类:
<p>ppp</p>
<p>ppp</p>
   <div>div  #1
      <div>divdiv  #2
         <p>divdivp  # 5
             <span>divdivpspan</span>  # 6
          </p>
      </div>
      <p>divp</p>  # 3
      <span>divspan</span>  # 4
   </div>
   <p>ppp</p>
   <span>spanspan</span>
针对标签的上下级以及嵌套另外的说法:
父标签(1号标签是2、3、4号标签父标签)
子标签(2、3、4号标签父标签是1号标签的子标签)
弟弟标签(3、4号标签是2号标签的弟弟标签)
哥哥标签(2号标签是3、4号标签的哥哥标签)
爷爷标签(2号标签是6号标签的爷爷标签)
孙子标签(6号标签是2号标签的爷爷标签)
祖先标签(1,2,5号标签都是6号标签的祖先标签,用英文parents标签,如果是parent标签仅指5号标签)
"""
	2.1后代选择器(空格):用标签名空格标签名的方式来进行查找,只要后一个标签是前一个标签的后代(不管是儿子还是孙子)就可以找到。
div span {
    color: red;
}  
# 查找div标签下所有span标签并且修改属性

	2.2儿子选择器(大于号):两个标签之间用大于号连接,后面一个标签是前一个标签的子标签才可以找得到。
div>span{
    color: red;
}
# 查找div标签下的是span标签的子标签并且修改属性

	2.3毗邻选择器(加号):两个标签用加号连接,后面标签和前面标签同级并且紧挨着前面标签的 ,就会查找并且修改属性。
p+span {
    color: cornflowerblue;
}
# 查找和p标签紧挨着的span标签


	2.4弟弟选择器(小波浪号):两个标签用小波浪号连接,后面标签是前面标签的弟弟标签。
div~p {
    color: darkorange;
}
# 查找所有div标签的弟弟标签

3.分组与嵌套
	3.1多个选择器合并查找:各标签用逗号隔开
div,span {
    color: coral;
}  
# 查找div标签或span标签

	3.2选择器可以混合使用:标签选择器,类选择器,id选择器可以混合查找。
.c1,span,#d1 {
    color: cornflowerblue;
}
# 查找c1类,span标签,id为d1的标签并修改

	3.3查找选择器指定类的标签
span.c1 {
    color: green;
}
# 查找类为c1的span标签

	3.4查找选择器指定id的标签
span#d1 {
    color: red;
}  
# 查找id为d1的span标签

4.属性选择器:根据标签的属性来查找标签
	4.1按照属性名查找:属性名用中括号括起来,带有属性名的标签会被查找到并且更改属性
<style>
    [username] {
        color:red
    }
</style>

	4.2按属性名查找可以增加更多的限制条件:在中括号前面添加标签名,中括号内指定属性名等于某个属性值。
    <style>
        h1[username='max'] {
            color: deeppink;
        }
    </style>


5.伪类选择器:当我们看到某些网页上有的链接(通过昨天的a标签来实现)就光标悬浮在上面之后会变颜色,通过伪类选择器我们也可以实现这样的效果。修改本身的颜色用 a {}在中括号内修改属性,光标悬浮状态用 a:hover{}来修改。
"""
a标签对应的链接在浏览器上没有被点过时,颜色是蓝色;点过时以后都变成紫色。
"""
<head>
    <style>
    
        a {
            color: black;
        }  # 链接没有被点时呈现的颜色
        a:hover {
            color: deeppink;
        }  # 链接在鼠标悬浮在上面时呈现的颜色
        a:visited {
            color: saddlebrown;
        }  # 链接被点击过后呈现的颜色
    </style>
<head>
    
<body>
    <a href="https://www.cnblogs.com/zkz0206/p/16939836.html" target="_blank">HTML相关知识</a>
</body>

当我们获取用户输入时,可以给文本框内背景添加指定的颜色:
<style>
	input:focus {
       background-color: red;
     }
</style>

6.伪元素选择器:修改一个标签之后所有该标签产生的内容都会改变
<style>
	p:first-letter {
     font-size: 48px;
     color: blue;
	}
</style>

还可以在某些字段前后加一些指定字符:
<style>
   p:before {
   		content: '前面添加指定的内容';
       color: blue;
    }
   p:after {
      content: '后面指定的内容';
      color: deeppink;
   }
</style>

3.选择器优先级

1.选择器相同,导入方式不同:就近原则。
"""
代码从上往下执行,执行到离body标签最近的选择器才可以修改成功,否则修改成功之后又会被其他选择器修改
"""

2.选择器不同,导入方式相同:
内联样式>id选择器>类选择器>标签选择器
"""
内联样式:直接在标签内部修改。
<body>
    <p class="c1" id="d1" style="color: aqua">选择器的优先级</p>
</body>
由于类与标签的查找范围较大,指向性没有内联以及id选择器强,所以优先级较弱。我们可以利用他们优先级不同对特别的标签做特别的修改。
"""

4.CSS样式调节(都在style标签中调节)

1.字体样式:
	font-size:字体大小; 14px 24px 36px
	font-weight:字体粗细: lighter(变细);border(变粗)
	color:有三种模式
		1.直接用颜色的单词:color: aqua;
      2.颜色编码:color: #9F9F5F;(颜色代码链接:https://blog.csdn.net/qq_39162838/article/details/116989378)
		3.rgb三基色:color: rgb(24,145,32);(每个颜色都有一个固定的三基色,适用于在页面上看到某种颜色,用取色器取到该颜色然后使用)
	rgba():用来调节饱和度:color: rgba(24,145,32,0.6);
	text-align:文本调整:center:居中;end:右对齐;justify:左对齐
	text-decoration:字体样式:unbderline:下划线;上划线;
"""
text-decoration还有一个更重要的功能室取消a标签的下划线,a标签在网页中默认有一条下划线,我们只需要在<style>中加入a {text-decoration:none;}即可
"""
	text-indent:首行缩进

5.背景属性

div {
    width: 400px;  /*背景大小*/
    height: 400px;
    background-color: aqua;  /*背景颜色*/
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1113%252Fbdefb078j00r2i20e002ac000hs00m8c.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672490651&t=a7db1a1cb89036319ce702664fd7a5a3");/*图片地址*/
    color: deeppink;  /*背景字体颜色*/
    background-repeat: no-repeat;   /*背景颜色*/
    background-position: center;    
}

标签：span,color,标签,前端,查找,选择器,CSS,属性
From： https://www.cnblogs.com/zkz0206/p/16942802.html

1.CSS层叠样式表

2.CSS选择器

3.选择器优先级

4.CSS样式调节(都在style标签中调节)

5.背景属性

相关文章

赞助商

阅读排行