学习web前端之css第二天

最新推荐文章于 2023-03-27 07:45:00 发布

ysn121101

最新推荐文章于 2023-03-27 07:45:00 发布

阅读量248

点赞数

分类专栏： css 文章标签： css选择器

本文链接：https://blog.csdn.net/ysn121101/article/details/98039173

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS具有以下特点：

丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

在html中如何应用css

在元素中添加style属性，style属性值为css样式规则
```
<div style="width:100px;height:100px;"></div>
```
缺点： 样式与结构与杂糅
优点： 简单直接，优先级高

将样式添加到head标签中的style标签里

<head>
<meta charset="UTF-8">
<title>css使用方式2</title>
      <style>
      </style>
</head>

将样式定义在css文件中，通过link导入进来
```
<link rel="stylesheet" href="a.css">
```

语法

选择器 {
样式名:样式值;
样式名:样式值;
…
}

  div{
    	width: 200px;
    	height: 200px;
       text-align: center;
    }

选择器

1.核心选择器

标签选择器

什么是标签选择器?
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式:
标签名称{
属性:值;
}

注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)

  div{}

id选择器

1.什么是id选择器?
作用: 根据指定的id名称找到对应的标签, 然后设置属性

格式:
#id名称{
属性:值;
}

注意点:

每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
在同一个界面中id的名称是不可以重复的
在编写id选择器时一定要在id名称前面加上#
id的名称是有一定的规范的
4.1 id的名称只能由字母/数字/下划线
4.2 id名称不能以数字开头
4.3 id名称不能是HTML标签的名称(不能是a h1 img input …)
在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的

     #one{}

class选择器
什么是类选择器?
作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:
.类名{
属性:值;
}

注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
格式:

<标签名称 class=“类名1 类名2 …”>

错误的写法:

  <p class="para1" class="para2">

逗号选择器
什么是逗号选择器?
作用: 给所有选择器选中的标签设置属性

格式:
选择器1,选择器2{
属性:值;
}

注意点:
1.并集选择器必须使用逗号来连接
2.选择器可以使用 标签名称 / id名称 / class名称
```
 div,#one {}
 ul,ol {}
```

组合选择器
什么是交集选择器?
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

格式:
选择器1 选择器2{
属性: 值;
}

注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/ id名称 / class名称
3.交集选择器仅仅作为了解, 企业开发中用的并不多
```
 div#one {}
```

普遍选择器
什么是通配符选择器?
作用: 给当前界面上所有的标签设置属性

格式:
*{
属性:值;
}

注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
```
* {}    
```

2.层次选择器

子元素选择器

什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

格式:
标签名称1>标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去

.nav > ul > li {}

后代选择器

什么是后代选择器?
作用: 找到指定标签的所有特定的后代标签, 设置属性

格式:
标签名称1 标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性

注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去

    .nav li {}

下一个兄弟选择器
什么是下一个兄弟选择器
作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式:
选择器1+选择器2{
属性:值;
}

注意点:
1.相邻兄弟选择器必须通过 + 连接
2.相邻兄弟选择器只能选中紧跟其后的那个兄弟标签, 不能选中被隔开的标签

   .products > li.ios + *{}

之后所有兄弟选择器
什么是之后所有兄弟选择器
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

格式:
选择器1~选择器2{
属性:值;
}

注意点:
1.之后所有兄弟选择器必须用 ~ 连接
2.之后所有兄弟选择器选中的是指定选择器后面所有的兄弟标签。

.products > li.ios ~ *{}

3. 属性选择器

表单过滤器

input[placeholder] 选择input中属性为placeholder的所有元素

input[type=text] 选择input中属性type的值为text的所有元素

input[type^=t] 选择input中属性type的值是以‘t’开头的所有元素

input[type$=t] 选择input中属性type的值以‘t’结尾的所有元素

input[type*=t] 选择input中属性type的值中含有‘t’的所有元素

4.伪类选择器

与状态相关

:link a标签还未被访问

:hover 光标悬浮在元素上

:active a标签被点击

:visited a标签访问过

与子元素相关

:first-child 匹配父元素的第一个子元素的元素

:last-child 匹配父元素的最后一个子元素的元素

:nth-child(v) v为数字、公式、关键字，（even偶数，odd奇数）
当v为整数时，v的起始值为1；当v为表达式时，起始值为0。
匹配某个父元素的一个或多个子元素的元素

:first-of-type 选择在父元素中的一组兄弟元素中其类型的第一个元素>

:last-of-type 选择在父元素的子元素列表中，最后一个给定类型的元素。
包括父元素的所有子元素的最后一个选定元素，
也包括子元素的最后一个子元素并以此类推。

:nth-of-type 选择那些在相同兄弟节点中的位置与模式v匹配的相同元素。
v可以是整数、表达式、关键字

5.伪元素选择器

::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。
通常会配合content属性来为该元素添加装饰内容。
这个伪元素默认是行内元素。

::before 用来创建一个伪元素，作为已选中元素的第一个子元素。
通常会配合content属性来为该元素添加装饰内容。
这个伪元素默认是行内元素。

副作用：

在dom节点中产生一个新的节点
由::before和::after生成的伪元素包含在格式框内，因此不能应用在替换元素上，比如<img>或<br>元素

了解

::first-letter 会选中块级元素的第一行的第一个字母，
并且文字所处的行之前没有其他内容（如图片、表格）

::first-line 在块级元素的第一行应用样式
允许的属性值：
所有和字体有关的属性
所有和背景有关的属性

::selection 用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分）

思维导图

css思维导图

牛刀小试

导航栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	<style>
	/*重置*/
	body,ul,p{
		margin:0;
	}
	ul{
		padding: 0;
		list-style: none;
	}
	/*导航栏样式*/
	.nav{	
		background-color: #333;
		color:#ededed;
	}
	/*给ul添加伪元素*/
	.nav > ul::after {
		content: "";
		display: block;
		clear: both;
	}
	.nav li {
		line-height: 3em;
	}
	/*一级导航栏样式*/
	.nav >ul >li{
		float: left;
		width: 100px;
		text-align: center;
		position: relative;
	}
	/*一级导航栏悬停后的效果*/
	.nav > ul > li:hover {
	    background-color: #ededed;
	    color: #333;
	    /*鼠标悬停时的光标样式*/
	    cursor: pointer;
	}
	/* 二级导航容器样式 */
	.nav > ul > li > ul {
		/*隐藏二级菜单*/
		 display: none; 
		position: absolute;
		background-color: #ededed;
		color: #333;
		width: 100%;
	}
    /*悬停一级菜单后，二级菜单出现*/
	.nav > ul > li:hover > ul  {
		display: block;
	}
	/*悬停二级菜单某一项出现的效果*/
	.nav > ul > li > ul > li:hover{
		background-color: #333;
		color:#ededed; 
	}
</style>
</head>
<body>
	<div class="nav">
		<ul>
			<!-- 一级导航 -->
			<li>
				<p>one</p>
				<ul>
					<li>ss</li>
					<li>dd</li>
					<li>ff</li>
				</ul>
			</li>
			<!-- 一级导航 -->
			<li>
				<p>two</p>
			</li>
			<!-- 一级导航 -->
			<li>
				<p>three</p>
				<!-- 二级导航 -->
				<ul>
					<li>1</li>
					<li>2</li>	
				</ul>
			</li>
		</ul>
	</div>	
</body>
</html>

页面隐藏与显示

在这里插入图片描述

   <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>页面切换</title>
    	<style>
    	*{
    		margin: 0;
    		padding: 0;
    		list-style: none;
    	}
    	.boxOne,.boxTwo{
    		width: 100px;
    		height: 100px;
    	}
         .boxOne{
         	background-color: red;
         	float: left;
         	display: none;
         }
         .boxTwo{
         	background-color: blue;
         	display: none;
         }
         .showRed,.showBlue:hover{
         	cursor: pointer;
         }
         .showRed:hover ~ .boxOne{
         	display: block;
         }
          .showBlue:hover ~ .boxTwo{
         	display: block;
         }
      </style>
    </head>
    <body>
    	<!-- 标题 -->
    	<div class="showRed">显示红色</div>
    	<div class="showBlue">显示蓝色</div>
    	 <div class="boxOne">盒子一</div>
    	 <div class="boxTwo">盒子二</div>
    </body>
    </html>