CSS(Web)

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 伪类

选择器

例子

例子描述

:active

a:active

选择活动的链接。

:checked

input:checked

选择每个被选中的 <input> 元素。

:disabled

input:disabled

选择每个被禁用的 <input> 元素。

:empty

p:empty

选择没有子元素的每个 <p> 元素。

:enabled

input:enabled

选择每个已启用的 <input> 元素。

:first-child

p:first-child

选择作为其父的首个子元素的每个 <p> 元素。

:first-of-type

p:first-of-type

选择作为其父的首个 <p> 元素的每个 <p> 元素。

:focus

input:focus

选择获得焦点的 <input> 元素。

:hover

a:hover

选择鼠标悬停其上的链接。

:in-range

input:in-range

选择具有指定范围内的值的 <input> 元素。

:invalid

input:invalid

选择所有具有无效值的 <input> 元素。

:lang(language)

p:lang(it)

选择每个 lang 属性值以 "it" 开头的 <p> 元素。

:last-child

p:last-child

选择作为其父的最后一个子元素的每个 <p> 元素。

:last-of-type

p:last-of-type

选择作为其父的最后一个 <p> 元素的每个 <p> 元素。

:link

a:link

选择所有未被访问的链接。

:not(selector)

:not(p)

选择每个非 <p> 元素的元素。

:nth-child(n)

p:nth-child(2)

选择作为其父的第二个子元素的每个 <p> 元素。

:nth-last-child(n)

p:nth-last-child(2)

选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。

:nth-last-of-type(n)

p:nth-last-of-type(2)

选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数

:nth-of-type(n)

p:nth-of-type(2)

选择作为其父的第二个 <p> 元素的每个 <p> 元素。

:only-of-type

p:only-of-type

选择作为其父的唯一 <p> 元素的每个 <p> 元素。

:only-child

p:only-child

选择作为其父的唯一子元素的 <p> 元素。

:optional

input:optional

选择不带 "required" 属性的 <input> 元素。

:out-of-range

input:out-of-range

选择值在指定范围之外的 <input> 元素。

:read-only

input:read-only

选择指定了 "readonly" 属性的 <input> 元素。

:read-write

input:read-write

选择不带 "readonly" 属性的 <input> 元素。

:required

input:required

选择指定了 "required" 属性的 <input> 元素。

:root

root

选择元素的根元素。

:target

#news:target

选择当前活动的 #news 元素(单击包含该锚名称的 URL)。

:valid

input:valid

选择所有具有有效值的 <input> 元素。

:visited

a:visited

选择所有已访问的链接。

<!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 伪元素

选择器

例子

例子描述

::after

p::after

在每个 <p> 元素之后插入内容。

::before

p::before

在每个 <p> 元素之前插入内容。

::first-letter

p::first-letter

选择每个 <p> 元素的首字母。

::first-line

p::first-line

选择每个 <p> 元素的首行。

::selection

p::selection

选择用户选择的元素部分。

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

所有 CSS 属性选择器

选择器

例子

例子描述

[attribute]

[target]

选择带有 target 属性的所有元素。

​​​​​​[attribute=value]

[target=_blank]

选择带有 target="_blank" 属性的所有元素。

[attribute~=value]

[title~=flower]

选择带有包含 "flower" 一词的 title 属性的所有元素。

[attribute|=value]

[lang|=en]

选择带有以 "en" 开头的 lang 属性的所有元素。

[attribute^=value]

a[href^="https"]

选择其 href 属性值以 "https" 开头的每个 <a> 元素。

[attribute$=value]

a[href$=".pdf"]

选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。

[attribute*=value]

a[href*="w3school"]

选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

<!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;
			}
      /*选择值为jd或者以值中以jd为前缀的*/
			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="jd" href="http://www.jd.com">京东</a>
		<a class="jd baidu" 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: font-style font-variant font-weight fontsize/line-height font-family

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

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

                font-style 规定文本的字体样式。

                 font-variant 规定是否以小型大写字母的字体显示文本。

                font-weight 规定字体的粗细。

<!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 指定文本的方向 / 书写方向。

        etter-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;
 }
 img{
 vertical-align: middle;
 }
</style>
</head>
<body>
<div>
Abcd EFG文本内容文本内容文本内容文本内容文本内容文本内容
</div>
<p>
文本内容<img width="50px" src="img/2.jpg" alt="">文本内容
</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 规定表格标题的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				/* list-style-image:url(img/1.png) ; */
				/* list-style-position: outside; */
				list-style-type: none;
			}
			li{
				background: lavenderblush;
			}
			table,td{
				width: 200px;
				height: 30px;
				border: 1px solid #00ffff;
				border-collapse: collapse;
				/* empty-cells: hide; */
				
			}
			td{
				
			}
			/* tr:nth-child(odd){
				background-color: aliceblue;
			} */
			tr{
				border-bottom:1px solid #00ffff ;
			}
			tr:hover{
				color: #00ffff;
				background: lavenderblush;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
		</ul>
		<table>
			<tr>
				<td>列1</td>
				<td>列1</td>
				<td>列1</td>
			</tr>
			<tr>
				<td>列1</td>
				<td>列1</td>
				<td>列1</td>
			</tr>
			<tr>
				<td>列1</td>
				<td>列1</td>
				<td>列1</td>
			</tr>
		</table>
	</body>
</html>

CSS 布局1

display 属性

        display属性的值

        none          此元素不会被显示。

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

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

        inline-block         行内块元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* display:block,none,inline,inline-block; */
			div.mydiv{
				width: 150px;
				height: 100px;
				background-color: aquamarine;
				display :inline-block ;
				float: right;
			}
			span{
				width: 150px;
				height: 100px;
				background-color: antiquewhite;
				display:block;
				float: left;
			}
			.clearboth::after{
				/* 清除浮动 (固定写法)*/
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="clearboth">
		<div class="mydiv">
			asd
		</div>
		<span>
			asd
		</span>
		<span>
			asd
		</span>
		</div>
		<a href="">链接</a>
		<p>文本内容</p>
	</body>
</html>

CSS 布局 - 浮动和清除

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

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

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

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

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

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

        CSS clear 属性规定哪些元素可以在清除的元素旁边以及在 哪一侧浮动。

                 none - 允许两侧都有浮动元素。默认值

                left - 左侧不允许浮动元素

                 right- 右侧不允许浮动元素

                 both - 左侧或右侧均不允许浮动元素

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.mydiv{
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block;
float: right;
}
span{
width: 100px;
height: 100px;
background-color: red;
display: block;
float: left;
}
.clearboth::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="clearboth">
<div class="mydiv">
abc
</div>
<span>
abc
</span>
<span>
xyz
</span>
</div>
<a href="">链接标签</a>
<p>文本内容</p>
</boby>
</html>
<!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>
</boby>
</html>

CSS中隐藏元素属性

        display         指定应如何显示元素。

        none : 隐藏

        block :显示

        visibility 指定元素是否应该可见。

        visible : 显示

        hidden :隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				width: 150px;
				height: 120px;
				background-color: antiquewhite;
				/* 隐藏的两种方法 */
				/* display: none; */
				visibility: hidden;
			}
			.div2{
				width: 150px;
				height: 120px;
				background-color: lightblue;
			}
			.div2:hover~.div1{
				/* 控制隐藏 */
				visibility: visible;
			}
		</style>
	</head>
	<body>
		<div class="div2"></div>
		<div class="div1"></div>
		<p>文本</p>
	</body>
</html>

CSS盒子模

CSS 边框属

        CSS border 属性允许您指定元素边框的样式、宽度和颜色

        常用的属性:

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

                border-color         简写属性,设置四条边框的颜色。

                border-radius         简写属性,可设置圆角的所有四个 border-radius 属性。

                 border-style         简写属性,设置四条边框的样式。

                 border-width         简写属性,设置四条边框的宽度。

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

                 border-bottom-color         设置下边框的颜色。

                border-bottom-style         设置下边框的样式。

                 border-bottom-width         设置下边框的宽度。

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

                border-left-color         设置左边框的颜色。

                border-left-style         设置左边框的样式。

                border-left-width         设置左边框的宽度。

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

                 border-right-color         设置右边框的颜色。

                border-right-style         设置右边框的样式。

                border-right-width         设置右边框的宽度。

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

                border-top-color         设置上边框的颜色。         

                border-top-style         设置上边框的样式。         

                border-top-width         设置上边框的宽度。

CSS 外边距

        CSS margin 属性用于在任何定义的边框之外,为元素周围 创建空间。

         通过 CSS,您可以完全控制外边距。有一些属性可用于设置 元素每侧(上、右、下和左)的外边距。

                margin         简写属性。在一个声明中设置所有外边距属 性。

                margin-bottom         设置元素的下外边距。

                margin-left         设置元素的左外边距。

                margin-right         设置元素的右外边距。

                margin-top         设置元素的上外边距。

CSS 内边距

        CSS padding 属性用于在任何定义的边界内的元素内容周围生成 空间。

         通过 CSS,您可以完全控制内边距(填充)。有一些属性可以为 元素的每一侧(上、右、下和左侧)设置内边距。

                padding         用于在一条声明中设置所有内边距属性的简 写属性。

                padding-bottom         设置元素的下内边距。

                 padding-left         设置元素的左内边距。

                padding-right         设置元素的右内边距。

                padding-top         设置元素的上内边距。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 100px;
background-color: aquamarine;
border: 1px solid red;
/* border-top: 10px solid blue; */
/* border-bottom: 10px solid orange; */
/* border-radius: 100px; */
/* border-top-left-radius: 200px; */
/* border-top-right-radius: 200px; */
border-radius: 20px 40px;
border-radius: 20px 40px 60px;
border-radius: 20px 40px 60px 80px;
border-radius: 10px;
/* 外边距 */
/* margin: 30px; */
/* margin: 30px 60px; */
/* margin: 30px 60px 90px; */
/* margin: 30px 60px 90px 120px; */
/* margin-top: 50px;
margin-left: 30px; */
/* 通过margin让块居中 */
margin: 20px auto;
/* 内边距 */
/* 默认是将内边距大小算入块的整个大小的 */
padding: 50px;
padding: 50px 80px;
}
P{
    background-color:skyblue;
}</stylE>
</head>
<boby>
<div>
文本
</div>
<div>
问内容
</div>
<p>文本内容</p>
</boby>
</html>

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				float: left;
				width: 60px;
				height: 30px;
				/* background-color: orange; */
				margin: 5px;
				border-radius: 20px;
				text-align: center;
				/* 文本居中的居中 */
				line-height: 30px;
				color: aliceblue;
				font-size: 10px;
				
			}
			.div_color1{
				background-color: orangered;
				font-weight: bold;
			}
			.div_color2{
				background-color: orange;
				font-weight: bold;
			}
			.div_color3{
				background-color: aliceblue;
				color: red;
				border: 1px solid red;
				font-weight: bold;
			}
			
			
		</style>
	</head>
	<body>
		<div class="div_color1">登录</div>
		<div class="div_color2">注册</div>
		<div class="div_color3">开店</div>
		
	
	</body>
</html>

CSS 尺寸属性

        height         设置元素的高度。

        max-height         设置元素的最大高度。

         max-width         设置元素的最大宽度。

        min-height         设置元素的最小高度。

        min-width         设置元素的最小宽度。 width 设置元素的宽度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
min-height: 200px;
background-color: aquamarine;
}
p{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>

CSS 轮廓

        轮廓是在元素周围绘制的一条线,在边框之外,以凸显元 素。

                outline         简写属性,在一条声明中设置 outline-width、outline-style 以及 outline-color。

                outline-color         设置轮廓的颜色。

                 outline-offset         指定轮廓与元素的边缘或边框之间的空 间。

                 outline-style         设置轮廓的样式。

                outline-width         设置轮廓的宽度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 50px;
background-color: skyblue;
border: 2px solid red;
outline: 5px solid blue;
/* outline-offset: 10px; */
margin-bottom: 20px;
}
input{
outline: none;
/* border: none; */
}
</style>
</head>
<body>
<div></div>
<input type="text">
</body>
</html>

练习搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				/* box-sizing: border-box; */
				width:600px;
				height: 40px;
				border: 2px solid orangered;
				padding: 2px;
				border-radius: 40px;
			}
			p{
				float: left;
				height: 40px;
				margin-left: 20px;
				line-height: 40px;
				margin-top: 0;
				margin-bottom: 0;
			}
			
			.div2{
				float: left;
				margin: 20px 6px 0;
				width: 0;
				height: 0;
				border-width: 5px;
				/* 边框样式:直线 */
				border-style: solid;
				/* 边框透明:transperent */
				border-color:#bababa transparent transparent transparent;
			}
			input{
				border: none;
				outline: none;
				height: 25px;
				width: 400px;
				border-left:1px solid #dfdfdf ;
				padding-left: 10px;
				margin-top: 7px;
			}
			button{
				float: right;
				height: 40px;
				width: 80px;
				border-radius: 40px;
				border: none;
				background-color: orange;
				color: #fff;
				font-size: 20px;
				font-weight: 800;
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		
		<div class="div1">
			<p>宝贝</p>
			<div class="div2"></div>
			<input type="text" placeholder="行李箱">
			<button>搜索</button>
		</div>
		
	</body>
</html>

CSS Box Sizing 标准盒子模型

        box-sizing属性,用来设置盒子模型计算宽高的实际方式

        值:

                content-box 根据设置宽高值 + 内边距 + 边框 ,完成最 终的宽高的显示

                 这是由 CSS2.1 规定的宽度高度行为。

                宽度和高度分别应用到元素的内容框。

                在宽度和高度之外绘制元素的内边距和边框。

         border-box         根据实际设置的宽高,显示宽高

                为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定 的宽度和高度内进行绘制。

                通过从已设定的宽度和高度分别减去边框和内边距才能 得到内容的宽度和高度。

         inherit         规定应从父元素继承 box-sizing 属性的值。

CSS 布局2 - position 属性

        css中的布局方式 :

                1,文档流 : 默认情况,从上到下依次布局,块级 元素独占一行,行内并排显示,直到遇到边界自动换 行,如果有浮动,满足浮动后,其他的代码仍然见缝插 针

                 2,定位 :按照用户自己的需要,给元素定位到指 定位置

position 属性常用的值

        static

                HTML 元素默认情况下的定位方式为 static(静 态)。

                静态定位的元素不受 top、bottom、left 和 right 属性的影响。

         relative

                元素相对于其正常位置进行定位。

                设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。

           fixed

                元素是相对于视口定位的,这意味着即使滚动页 面,它也始终位于同一位置。 top、right、bottom和 left 属性用于定位此元素。

        absolute

                 元素相对于最近的定位祖先元素进行定位(而不是 相对于视口定位,如 fixed)。然而,如果绝对定位的 元素没有祖先,它将使用文档主体(body),并随页 面滚动一起移动

        sticky

                元素根据用户的滚动位置进行定位。 粘性元素根据滚动位置在相对(relative)和固定 (fixed)之间切换。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 2000px;
padding-top: 100px;
background-color: aquamarine;
/* position: relative; */
/* top: 50px; */
/* left: 50px; */
}
p{
width: 100px;
height: 100px;
background-color: red;
/* position: relative; */
/* position: fixed; */
/* position: absolute; */
/* top: 50px; */
/* left: 50px; */
position: sticky;
top: 20px;
z-index: 10;
}
h1{
width: 100px;
height: 100px;
background-color: blue;
/* position: relative; */
position: absolute;
top: 50px;
left: 50px;
z-index:100;
}
</style>
</head>
<boby>
<div>
<p></p>
<h1></h1>
</div>
</boby>
</html>

        z-index 属性指定定位元素的显示顺序

CSS 布局 - 溢出overflow

        overflow 属性控制子元素太大而父元素无法容纳的内容的 处理方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
overflow: auto; 
/* overflow: hidden; */
/* overflow: scroll; */
/* overflow: visible; */
}
</style>
</head>
<body>
<div>
文本内容
文本内容
文本内容
文本内容
文本内容
文本内容
文本内容
文本内容
</div>
</body>
</html>

Flex布局

        参考网址

                https://www.cnblogs.com/dreamperson/p/9367008.html

容器和项目的概念

        采用Flex布局的元素,称为Flex容器(flex container),简 称“容器”。它的所有子元素自动成为容器成员,成为flex 项目(flex item),简称“项目”。

容器常用的属性

        flex-direction         属性决定主轴的方向(即项目的排列方 向)

                取值:flex-direction:row | row-reverse | column | column-reverse;

                它可能有四个值

                row(默认值):主轴为水平方向,起点在左端

                row-reverse:主轴为水平方向,起点在右端

                column:主轴为垂直方向,起点在上沿

                column-reverse:主轴为垂直方向,起点在下沿

                lex-wrap 属性定义,如果一条轴线 排不下,如何换行

                它可能去三个值。 (

                        1)nowrap(默认):不换行

                        (2)wrap:换行,第一行在上方

                        (3)wrap-reverse:换行,在第一行的下方

                 flex-flow

                         flex-direction属性和flex-wrap属性的简写形式, 默认 row nowrap

                justify-content 属性定义了项目在主轴上的对齐方式

                 它可能取5个值,具体对齐方式与轴的方向有关。

                        flex-start(默认值):左对齐

                        flex-end:右对齐 center:居中

                         space-between:两端对齐,项目之间的间隔都相 等

                        space-around:每个项目两侧的间隔相等。所 以,项目之间的间隔比项目与边框的间隔大一倍。

                         align-items 属性定义项目在交叉轴上如何对齐

                        它可能取5个值。具体的对齐方式与交叉轴的方向 有关,下面假设交叉轴从上之下。

                        flex-start:交叉轴的起点对齐

                        flex-end:交叉轴的终点对齐

                        center:交叉轴的中点对齐

                        baseline:项目的第一行文字的基线对齐。

                         stretch(默认值):如果项目未设置高度或设为 

                 align-content 属性定义了多根轴线的对齐方式。如果项 目只有一根轴线,该属性不起作用

                        flex-start:与交叉轴的起点对齐。

                        flex-end:与交叉轴的终点对齐。

                        center:与交叉轴的中点对齐。

                        space-between:与交叉轴两端对齐,轴线之间的间隔 平均分布。

                        space-around:每根轴线两侧的间隔都相等。所以, 轴线之间的间隔比轴线与边框的间隔大一倍。

                         stretch(默认值):轴线占满整个交叉轴。

项目的属性

        6个属性设置在项目上。

                 order 属性定义项目的排列顺序。数值越小,排列越靠前, 默认为0

                flex-grow 属性定义项目的放大比例,默认值为0,即如果 存在剩余空间,也不放大

                flex-shrink 属性定义了项目的缩小比例,默认为1,即如果 空间不足,改项目将缩小。                 flex-basis 属性定义了在分配多余空间之前,项目占据的主 轴空间

                flex         属性是flex-grow,flex-shrink和flex-basis的简 写,默认值为0 1 auto

                 align-self 属性允许单个项目有与其他项目不一样的对齐方 式,可覆盖align-items属性。默认值为auto,表示继承父 元素的align-items属性,如果没有父元素,等同于 stretch。                        

                 align-self: auto | flex-start | flex-end | center | baseline | stretch

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mydiv{
				width: 800px;
				height: 500px;
				background-color: bisque;
				border: 1px solid red;
				/* 浮动 */
				display: flex;
				/* 平均分布 (space-around)  (space-between)*/
				/* justify-content: space-between; */
				
				
				/* 调整方向 */
				/* flex-direction: row; */
				/* flex-direction: row-reverse;/* 反转 */ */
				/* flex-direction: column; /* 列 */ */
				/* flex-direction: column-reverse; /* 列反转 */ */
				
				/* 换行 */
				/* flex-wrap:wrap; */
				/* flex-wrap: wrap-reverse; */
				/* flex-wrap: nowrap; */
				
				/* flex-wrap:row-reverse wrap; */
				
				/* justify-content:flex-start;  /* 左边 */ */
				/* justify-content: flex-end;  /* 右边 */ */
				/* justify-content:center;     /* 中间 */ */
				/* justify-content:space-around;  /* 平分 */ */
				/* justify-content:space-between; */
				
				/* align-items:flex-start;   /* 上边 */ */
				/* align-items:flex-end;     /* 下边 */ */
				/* align-items:center;       /* 中间 */ */
				/* align-items:baseline;     /* 上边 */ */
				/* align-items:stretch; */
				
				/* align-content:flex-start; */
				/* align-content: flex-end; */
				/* align-content: center; */
				/* align-content: space-around; */
				/* align-content: space-between; */
				/* align-content: stretch; */

			}
			
			div{
				width: 100px;
				height: 100px;
			}
			.div1{
					/* order: 1; */
					/* flex-grow: 1; */
					/* flex-shrink: 2; */
			      }
			.div2{
				/* order: 3; */
				/* flex-grow: 2; */
				/* flex-shrink: 5; */
			}
			.div3{
				/* order: 5; */
				/* flex-grow: 3; */
				flex-basis: 300px;
				/* align-self: flex-start; */
			}
			.div4{
				/* order: 4; */
			}
			.div5{
				/* order: 2; */
			}
			
		</style>
	</head>
	<body>
		<div class="mydiv">
			<div style="background: red;" class="div1">1</div>
			<div style="background: orange;" class="div2">2</div>
			<div style="background: blueviolet;" class="div3">3</div>
			<div style="background: darkcyan;" class="duv4">4</div>
			<div style="background: salmon;" class="div5">5</div>
			
		</div>
	</body>
</html>

CSS box-shadow 属性

        Zbox-shadow: h-shadow v-shadow blur spread color inset;

CSS渐变

        CSS 定义了两种渐变类型:

        线性渐变(向下/向上/向左/向右/对角线)

        径向渐变(由其中心定义)

线性渐变

        语法

        background-image: linear-gradient(direction, colorstop1, color-stop2, ...);

        线性渐变 - 从上到下(默认)background-image: lineargradient(red, yellow);

        线性渐变 - 从左到右 background-image: lineargradient(to right, red , yellow);

        线性渐变 - 对角线 background-image: linear-gradient(to bottom right, red, yellow);

        使用角度 background-image: linear-gradient(angle, color-stop1, color-stop2); background-image: linear-gradient(-90deg, red, yellow);

        使用多个色标 background-image: lineargradient(red, yellow, green);

        使用透明度 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 

        重复线性渐变 background-image: repeating-lineargradient(red, yellow 10%, green 20%);

CSS 径向渐变

        径向渐变由其中心定义。

                语法

                         background-image: radial-gradient(shape size at position, start-color, ..., last-color);

                默认地,shape 为椭圆形,size 为最远角,position 为中 心。

                径向渐变-均匀间隔的色标(默认)

                        background-image: radial-gradient(red, yellow, green);

                        径向渐变-不同间距的色标

                                background-image: radial-gradient(red 5%, yellow 15%, green 60%);

                         设置形状

                                shape 参数定义形状。它可接受 circle 或 ellipse 值。 默认值为 ellipse(椭圆)

                                background-image: radial-gradient(circle, red, yellow, green)

Css变形动画

CSS 2D、3D 转换

        CSS 转换(transforms)允许您移动、旋转、缩放和倾斜 元素。

         常见的值

                none         定义不进行转换。 测试

                translate(x,y)         定义 2D 转换。测试

                 translate3d(x,y,z)         定义 3D 转换。

                 translateX(x)         定义转换,只是用 X 轴的值。 测试

                translateY(y)         定义转换,只是用 Y 轴的值。

                translateZ(z)         定义 3D 转换,只是用 Z 轴的值。

                scale(x,y)         定义 2D 缩放转换。 测试

                 scale3d(x,y,z)         定义 3D 缩放转换。

                 scaleX(x)         通过设置 X 轴的值来定义缩放转换。 测试

                 scaleY(y)         通过设置 Y 轴的值来定义缩放转换。 测试

                scaleZ(z)         通过设置 Z 轴的值来定义 3D 缩放转换。

                rotate(angle)         定义 2D 旋转,在参数中规定角度。 测试

                rotate3d(x,y,z,angle)         定义 3D 旋转。

                 rotateX(angle)         定义沿着 X 轴的 3D 旋转。 测试

                rotateY(angle)         定义沿着 Y 轴的 3D 旋转。 测试

                rotateZ(angle)         定义沿着 Z 轴的 3D 旋转。 测试

                skew(x-angle,y-angle)         定义沿着 X 和 Y 轴的 2D 倾斜转 换。

                skewX(angle)         定义沿着 X 轴的 2D 倾斜转换。

                skewY(angle)         定义沿着 Y 轴的 2D 倾斜转换。

                perspective(n)         为 3D 转换元素定义透视视图。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: antiquewhite;
				
				/* 2D */
				/* transform: translate(10px,20px); */
				/* transform: translateX(30px); */
				/* transform: translateY(40px); */
				
				/* 	3D */
				/* transform: translate3d(30px,40px,50px); */
				
				/* 缩放 */
				/* transform: scale(1.0,0.5); */
				/* transform: scaleX(1.8); */
				/* transform: scaleY(1.2); */
				
				/* 旋转 */
				/* transform: rotate(45deg); */
				/* transform: rotateX(45deg); */
				transform: rotateY(45deg);
				transform: rotateZ(45deg);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

CSS 过渡

        CSS 过渡允许您在给定的时间内平滑地改变属性值。 transition 简写属性,用于将四个过渡属性设置为单一属 性。

        transition-delay         规定过渡效果的延迟(以秒计)。

         transition-delay:         time;

         transition-duration         规定过渡效果要持续多少秒。

         transition-duration:         time;

         transition-property         规定过渡效果所针对的 CSS 属性的名 称。

        none         没有属性会获得过渡效果。

        all         所有属性都将获得过渡效果。

        property         定义应用过渡效果的 CSS 属性名称列表,列 表以逗号分隔。

        transition-timing-function         规定过渡效果的速度曲线。

  • linear         规定以相同速度开始至结束的过渡效果(等 于 cubic-bezier(0,0,1,1))。
  • ease         规定慢速开始,然后变快,然后慢速结束的过渡 效果(cubic-bezier(0.25,0.1,0.25,1))。
  •  ease-in         规定以慢速开始的过渡效果(等于 cubicbezier(0.42,0,1,1))。
  • ease-out         规定以慢速结束的过渡效果(等于 cubicbezier(0,0,0.58,1))。
  • ease-in-out         规定以慢速开始和结束的过渡效果(等 于 cubic-bezier(0.42,0,0.58,1))。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aqua;
				
			}
			div:hover{
				transition-property:all;
				transform: translate(50px,60px) rotate(45deg) scale(1.5);
				background: aquamarine;
				transition-delay: 1s;
				transition-duration: 4s;
				
				/* 慢-->快 */
				transition-timing-function: ease;
				
				/* 均速 */
				/* transition-timing-function: linear; */
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

CSS 动画

        CSS 可实现 HTML 元素的动画效果

        如需使用 CSS 动画,您必须首先为动画指定一些关键帧。

        关键帧包含元素在特定时间所拥有的样式。

        关键帧:

                @keyframes 规则

                如果您在 @keyframes 规则中指定了 CSS 样式,动画将在 特定时间逐渐从当前样式更改为新样式。

                要使动画生效,必须将动画绑定到某个元素。

                语法1:

                @keyframes 动画名称 {

                from {background-color: red;}

                 to {background-color: yellow;} }

                语法2:

                /* 动画代码 */

                @keyframes 动画名 {

                 0% {background-color: red;}

                25% {background-color: yellow;}

                50% {background-color: blue;}

                100% {background-color: green;} }

        动画属性:

                animation         设置所有动画属性的简写属性。

                animation-delay         规定动画开始的延迟。

                animation-direction         定动画是向前播放、向后播放还 是交替播放。

                animation-duration         规定动画完成一个周期应花费的 时间。

                animation-fill-mode         规定元素在不播放动画时的样式 (在开始前、结束后,或两者同时)。

                animation-iteration-count         规定动画应播放的次数。

                animation-name         规定 @keyframes 动画的名称。

                 animation-play-state         规定动画是运行还是暂停。

                 animation-timing-function         规定动画的速度曲线。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 先定义关键帧 */
@keyframes animatetest{
0%{background: #93daff; transform:translate(0px,0px) rotateZ(0deg);}
/*25%{background: #ee8eff; transform: rotateZ(360deg); left: 200px;top:0;}
50%{background: #a4ff79; transform: rotateZ(720deg); top: 200px;left:200px;}
75%{background: #ffd1aa; transform: rotateZ(360deg);left: 0;top:200px;} 
100%{background: #93daff; transform: rotateZ(0deg); top: 0;left: 0;}*/
25%{background: #ee8eff; transform:translate(200px,0px) rotateZ(360deg);}
50%{background: #a4ff79; transform:translate(200px,200px) rotateZ(720deg);}
75%{background: #ffd1aa; transform:translate(0px,200px) rotateZ(360deg);}
100%{background: #93daff; transform:translate(0px,0px) rotateZ(0deg);}
}
div{
width: 100px;
height: 100px;
background: #93daff;
animation-name: animatetest;
animation-delay:1s;
animation-duration:5s;
animation-iteration-count:infinite;
animation-timing-function: ease;
animation-direction:alternate;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值