Web Day2

2023-12-15 17:26:57

Web

day2_2023.9.7

Css

概念:层叠样式单

作用:主要用来美化页面,完成网页的布局设置,完成字体,颜色等标签样式的设置。

块元素和行内元素

块元素 : 单独成一行的标签,将来可以设置宽和高,h1-h6 , p , div, 列表,表格

行内元素 : 标签中的内容,并排显示,不能设置宽和高, a , b, i, span

行内块元素:既有块元素的特点,又有行内元素的特点,并排显示,可以调整宽高,img,input

Css的使用

1,行内使用

2,文档内部使用

3,外部引用

h2{
	color: #ff00ff;
	font-size: 50px;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 在head中,加上一对style标签,将样式写在标签中 */
			/* 通过选择器可以找到标签,找到标签后,可以添加样式 */
			div{
				color: blue;
				font-size: 40px;
			}
			h1{
				color: #81efff;
			}
		</style>
		<!-- 通过link标签完成css文件的引入 -->
		<link rel="stylesheet" href="css/test.css">
	</head>
	<body>
		<!-- css行内的用法,直接在开始标签中,添加style属性 -->
		<p style="color: red;font-size: 30px;">这是一段文本内容</p>
		
		<!-- css文档内部使用方式,配合选择器来使用 -->
		<div>这是一段文本内容</div>
		<h1>这是一个标题</h1>
		
		<!-- css外部引入的使用方式 -->
		<h2>这是外部引用改变样式的标签</h2>
	</body>
</html>

Css的特性

1,层叠

1个html标签可能会有很多个样式,生效的只有一个,可以通过权重值,觉得到低生效的是哪一个

权重值 : 从0开始计算,

? 行内样式 + 1000 ,

? id选择器 +100,

? 属性选择器、class选择器、伪类选择器 + 10

? 标签选择器、伪元素选择器 + 1

? !important +1000

2,继承

有些样式,父标签设置之后,内部嵌套的子标签,也能获得样式效果

Css选择器

选择器的作用 : 就是用来找到html中某个具体的标签,并通过样式属性给这个标签加上指定的样式

写法 : 选择器 { 样式属性 : 样式的值 }

简单选择器(根据名称、id、类来选取元素)
CSS 元素选择器

直接以标签名来选择

CSS id 选择器

通过标签指定的id属性值来选择

写法: #id值{ }

CSS 类选择器

通过标签指定的class属性来选择

写法 : .class值{ }

CSS 通用选择器

**

写法:*{ }

CSS 分组选择器

多个选择器写在一起的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{ /*标签选择器*/
				color: red;
			}
			#mydiv{ /*id选择器,选择指定id值的*/
				color: blue;
			}
			.myclass{ /*class选择器*/
				color: coral;
			}
			*{ /*选择全部的标签*/
				font-size: 50px;
			}
			#mydiv,.myclass,p{ /*选择多个选择器,并设置样式*/
				background-color: darkgray;
			}
		</style>
	</head>
	<body>
		<div>这是普通的div标签中的内容</div>
		<div id="mydiv">这个是div中包含id属性的内容展示</div>
		<div class="myclass">这个是div中包含class属性的内容展示</div>
		<p>这是p标签的内容</p>
		<span>这是span标签内容</span>
	</body>
</html>
组合器选择器(根据它们之间的特定关系来选取元素)

后代选择器 (空格):选择某个标签的后代标签

写法 : 父标签 后代标签{}

子选择器 (>) : 选择某个标签的子代标签

写法 : 父标签>子标签

相邻兄弟选择器 (+) : 选择相邻的标签

写法: 标签a+标签b

兄弟选择器 (~) : 选择同一个层级的标签

写法 : 标签a~标签b

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*后代选择器   空格*/
			div span{
				color: red;
			}
			/* 子代选择器 */
			div>span{
				font-size: 30px;
			}
			/* 相邻兄弟 选择器 + ,找某个标签下面相邻的标签*/
			p+span{
				background-color: aquamarine;
			}
			/* 兄弟选择器 ~  */
			p.myclass~#mydiv{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>这是父级div标签1
			<p class="myclass">这是div的子标签p2
				<span>这是p标签的子类span,div的后代3</span>
			</p>
			<span>
				这个span是div的子标签span4
			</span>
			<div id="mydiv">
				这是外层div的子标签div5
			</div>
		</div>
	</body>
</html>
伪类选择器(根据特定状态选取元素)
伪元素选择器(选取元素的一部分并设置其样式)
所有 CSS 伪类

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:link{ /*没访问过的*/
				color: red;
			}
			a:visited{ /*已访问过的*/
				color: aqua;
			}
			a:hover{  /*鼠标滑过内容*/
				background-color: orange;
			}
			a:active{ /*选中某个链接(鼠标按住)*/
				color: blue;
			}
      div:hover+p{
				display: none;
			}

      p::before{
				content: "abc";
				color: blue;
			}
			p::selection{
				background-color: green;
			}
		</style>
	</head>
	<body>
		
		<a id="taobao" href="http://www.taobao.com">淘宝</a>
		<a id="jd" href="http://www.jd.com">京东</a>
		<a id="baidu" href="http://www.baidu.com">百度</a>
		<a id="qq" href="http://www.tecent.com">腾讯</a>

    <div>这是div块的内容</div>
		<p>这是p标签的内容</p>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul :first-child{
				color: red;
			}
			ul li:last-child{
				color: blue;
			}
			ul li:nth-child(3){
				color: orange;
			}
			
			ul li:first-of-type{
				font-size: 30px;
			}
			ul li:last-of-type{
				font-size: 40px;
			}
			ul li:nth-of-type(4){
				font-size: 30px;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<p>这是ul子代p</p>
			<li>li标签的第1行内容</li>
			<li>li标签的第2行内容</li>
			<li>li标签的第3行内容</li>
			<li>li标签的第4行内容</li>
			<li>li标签的第5行内容</li>
			<li>li标签的第6行内容</li>
			<li>li标签的第7行内容</li>
			<li>li标签的第8行内容</li>
		</ul>
	</body>
</html>
所有 CSS 伪元素

在这里插入图片描述

属性选择器(根据属性或属性值来选取元素)
所有 CSS 属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a[name]{
				color: red;
			}
			a[class='baidu']{
				color: aqua;
			}
			a[class~=jd]{
				color: orange;
			}
			a[class|=jd]{
				background-color: darkgray;
			}
			a[href^=www]{
				color: red;
			}
			a[href$=cn]{
				color: cornflowerblue;
			}
			a[href*=jd]{
				color: salmon;
			}
		</style>
	</head>
	<body>
		<a name="hello" class="taobao" href="http://www.taobao.com">淘宝</a>
		<a class="jingdong jd" href="http://www.jd.com">京东</a>
		<a class="baidu jd" href="www.baidu.com">百度</a>
		<a class="jd qq baidu" href="http://www.tecent.cn">腾讯</a>
	</body>
</html>

CSS样式

CSS背景

CSS 背景属性用于定义元素的背景效果

background-color 属性指定元素的背景色

background-image 指定用作元素背景的图像
在这里插入图片描述
background-repeat 指定背景图片后,可以设置背景图片是否重复
在这里插入图片描述
background-attachment 指定背景图像是应该滚动还是固定的
在这里插入图片描述
background-position 设置背景图像的起始位置。
在这里插入图片描述
background-size 规定背景图像的尺寸。

background 在一条声明中设置所有背景属性的简写属性。

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inher

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*
			background-color  			属性指定元素的背景色
			background-image			指定用作元素背景的图像
			background-repeat 		指定背景图片后,可以设置背景图片是否重复
			background-attachment	指定背景图像是应该滚动还是固定的
			background-position		设置背景图像的起始位置。
			background-size			规定背景图像的尺寸。
			background				在一条声明中设置所有背景属性的简写属性。
			*/
		   div.div1{
			   width: 200px;
			   height: 200px;
			   /* background-color: rgba(100, 100, 100,0.5); */
			   /* background-image: url(img/2.jpg); */
			   /* background-size: 100px 100px; */
			   /* background-repeat: no-repeat; */
			   /* background-attachment: scroll; */
			   /* background-position: center; */
			   background: red;
		   }
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
	</body>
</html>

CSS 字体属性

font 简写属性。在一条声明中设置所有字体属性。

font-family 规定文本的字体系列(字体族)。

font-size 规定文本的字体大小。

font-style 规定文本的字体样式。
在这里插入图片描述
font-variant 规定是否以小型大写字母的字体显示文本。
在这里插入图片描述
font-hweight 规定字体的粗细。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 字体 */
			div{
				color: red;
				font-size: 30px;
				font-weight: 900;
				font-family: "宋体";
				font-style: italic;
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
			<div>内容wenben</div>
	</body>
</html>

CSS 文本属性

direction 指定文本的方向 / 书写方向。
在这里插入图片描述
letter-spacing 设置字符间距。

line-height 设置行高。

text-align 指定文本的水平对齐方式。
在这里插入图片描述
text-decoration 指定添加到文本的装饰效果。
在这里插入图片描述
text-indent 指定文本块中首行的缩进。

text-shadow 指定添加到文本的阴影效果。
在这里插入图片描述
text-transform 控制文本的大小写。
在这里插入图片描述
text-overflow 指定应如何向用户示意未显示的溢出内容。
在这里插入图片描述
vertical-align 指定文本的垂直对齐方式。

white-space 指定如何处理元素内的空白。

word-spacing 设置单词间距。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*
			direction			指定文本的方向 / 书写方向。
			letter-spacing		设置字符间距。
			line-height		设置行高。
			text-align			指定文本的水平对齐方式。
			text-decoration	指定添加到文本的装饰效果。
			text-indent		指定文本块中首行的缩进。
			text-shadow		指定添加到文本的阴影效果。
			text-transform		控制文本的大小写。
			text-overflow		指定应如何向用户示意未显示的溢出内容。
			vertical-align		指定文本的垂直对齐方式。
			white-space		指定如何处理元素内的空白。
			word-spacing		设置单词间距。
			
			*/
		   div{
			   width: 200px;
			   height: 200px;
			   background: #b0ccff;
			   /* direction: rtl; */
			   /* letter-spacing: 5px; */
			   /* line-height: 60px; */
			   /* text-align: center; */
			   /* text-decoration: none; */
			   text-indent: 30px;
			   /* text-shadow: 5px 5px 5px rgba(10, 20, 30, 0.5); */
				text-transform: uppercase;
				/* 这是文本超出的省略号效果,三个一起用 */
				text-overflow: ellipsis;/*设置文本超出范围省略号效果*/
				overflow: hidden;  /*块内容溢出的处理*/
				white-space: nowrap; /*设置内容是否换行*/
		   }
		   p{
			   width: 200px;
			   height: 50px;
			   background: orange;
			   text-align: center;
			   /*line-height: 50px; /*单行文本上下居中*/
			   vertical-align: middle;
		   }
		   a{
			   text-decoration: none;
			   color: black;
		   }
		   a:hover{
			   color: blue;
			   text-decoration: underline;
		   }
		</style>
	</head>
	<body>
		<div>
			Abcd EFG文本内容文本内容文本内容文本内容文本内容文本内容
		</div>
		<p>
			文本内容
		</p>
		<a href="">链接到指定地址</a>
	</body>
</html>

CSS 列表属性

list-style 简写属性。在一条声明中设置列表的所有属性。

list-style-image 指定图像作为列表项标记。

list-style-position 规定列表项标记(项目符号)的位置。

list-style-type 规定列表项标记的类型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				/* list-style-image:url(img/123.png); */
				/* list-style-position: outside; */
				/* list-style-type: none; */
				list-style: none;
			}
			li{
				background-color: aquamarine;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>
	</body>
</html>

CSS 表格属性

border 简写属性。在一条声明中设置所有边框属性。

border-collapse 规定是否应折叠表格边框。

border-spacing 规定相邻单元格之间的边框的距离。

caption-side 规定表格标题的位置。

empty-cells 规定是否在表格中的空白单元格上显示边框和背景。

table-layout 设置用于表格的布局算法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

			table,td{
				width: 400px;
				border: 1px solid #000;
				border-collapse : collapse;
				/* border-spacing: 5px; */
				/* caption-side: bottom; */
				empty-cells: hide;
				/* table-layout: fixed; */
			}
			tr{
				background-color: darkgray;
			}
			td{
				background-color: aquamarine;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		
		<table>
			<caption>标题</caption>
			<tr>
				<td>列1</td>
				<td>列2</td>
				<td>列3</td>
			</tr>
			<tr>
				<td>列1</td>
				<td>列2</td>
				<td>列3</td>
			</tr>
		</table>
	</body>
</html>

CSS 布局 - display 属性

display属性的值

none 此元素不会被显示。

block 此元素将显示为块级元素,此元素前后会带有换行符。

inline 默认。此元素会被显示为行内元素,元素前后没有换行符。

inline-block 行内块元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aqua;
				display: inline-block;
			}
			span{
				width: 100px;
				height: 100px;
				background-color: red;
				display: block;
			}
		</style>
	</head>
	<body>
		<div>
			abc
		</div>
		<span>
			abc
		</span>
		<span>
			xyz
		</span>
	</body>
</html>

CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。

float 属性可以设置以下值之一:

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。

inherit - 元素继承其父级的 float 值

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				width: 90%;
				height:50px;
				background-color: orange;
			}
			li{
				list-style: none;
				float: left;
				height: 50px;
				line-height: 50px;
				width: 147px;
				text-align: center;
				/* background-color: orangered; */
				color: #fff;
				font-weight: 900;
				font-size: 16px;
			}
			li:hover{
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>主体导航</li>
			<li>9.9包邮</li>
			<li>好货让利榜</li>
			<li>大额优惠券</li>
			<li>母婴榜</li>
			<li>品牌尖货</li>
			<li>特惠宝贝</li>
			<li>潮流范</li>
			<li>有好货</li>
		</ul>
	</body>
</html>

文章来源:https://blog.csdn.net/qq_51944132/article/details/132747759
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。