CSS入门（1）——什么是CSS以及简单的运用！！！-优快云博客

本文链接：https://blog.youkuaiyun.com/yh_niubi/article/details/131744813

CSS

HTML 结构 CSS 表现 Javascript 交互

1、什么是CSS？

CSS是什么？
CSS怎么用？
CSS选择器（重点
美化网页（文字，阴影，超链接，列表，渐变，，，）
盒子模型
浮动
定位
网页动画
学习网站：菜鸟教程

1.1、什么是CSS？

Cascading style sheet 层叠样式表

CSS 表现，美化网页

1.2、CSS发展史

CSS1.0

CSS2.0 DIV(块)+CSS HTML与CSS 结构分离，网页变得简单

CSS2.1 浮动，定位

CSS3.0 圆角边框，阴影，动画…浏览器兼容性~

1.3、CSS快速入门

基础入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			<!- 写CSS代码--
			语法:
				选择器{
					声明1 : ;
					声明2 : ;
				}
			每一个声明最好使用分号结尾!
			->
			h1{ 
				color: red;
			} 
		</style>		
	</head>
	<body>
		<h1>标题</h1>
	</body>
</html>

CSS的优势

内容和表现分离
网页结构和表现统一，实现复用
样式十分的丰富
使用独立于HTML的CSS文件
利用SEO，容易被搜索引擎收录！

1.4、CSS的四种导入方式

CSS代码优先级，行内样式>外部样式表>内部样式表，就近原则

idea快捷键：Ctrl+/ 生成注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--内部样式表-->
		<style>
			h1{
				color: aqua;
			}
		</style>
		<link rel="stylesheet" href="css/new_Demo.css"/>
		<!--行内样式>外部样式表>内部样式表，就近原则-->
	</head>
	<body>
		<!--行内样式，在标签元素中百年写一个style属性，-->
		<h1 style="color: red;">我是标题</h1>
	</body>
</html>

外部样式拓展：

链接式：HTML

<link rel="stylesheet" href="css/new_Demo.css"/>

导入式：属于CSS2.1版本

<style>
	@import url("css/new_Demo.css");
</style>

2、选择器

作用：选择页面上的某一个元素或者某一类元素

2.1、基本选择器

标签选择器

选择当前页面上所有该名称的标签

		<style>
			/*标签选择器会选择页面上所有的*/
			h1{
				color: darkblue;
			}
			P{
				font-size: 30px;
			}
		</style>

类选择器 class

<html>
	<head>
		<meta charset="utf-8" />
		<style>
			/*
			类选择器，  .class
			可以多个标签归类，是同一个class，可以复用
			*/
		   .ID_01{
			   color: aqua;
		   }
		</style>
	</head>
	<body>
		<h1 class="ID_01">我是标题1</h1>
		<h1 class="ID_01">我是标题2</h1>
		<h1>我是标题3</h1>
	</body>
</html>

ID选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			/*ID 选择器格式，ID全局唯一
			不遵循就近原则
			ID选择器>类选择器>标签选择器
			#ID名称{
				
			}*/
			#ID_01{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<h1 id="ID_01">我是标题</h1>
		<h2 id="ID_02">我是标题的弟弟</h2>
		<h1 id="ID_03">我说真的</h1>
	</body>
</html>

优先级：ID>Class>标签

2.2、层次选择器

后代选择器（在某个元素的后面的所有）

		<style>
			/*后代选择器*/
			body p{
				background-color: aqua;
			}
		</style>

子选择器(某个元素后面的一代元素)

/*子选择器*/	
body>p{
			background-color: beige;
		}

相邻选择器(同级的元素，对下不对上)

	/* 同级（兄弟）选择器 ,对下不对上*/
			.ID_01 + p{
				background-color: aqua;
}

通用选择器

			/* 通用选择器,对同级,当前选中元素的向下同级标签*/
			.ID_01~p{
				background-color: blue;
			}

2.3、结构伪类选择器

hover：悬停

示例代码：

	<html>
	<head>
		<meta charset="utf-8" />
		<style>
			ul的第一个子元素
			ul li:first-child{
				color: aqua;
			}
			/* ul的最后一个子元素 */
			ul li:last-child{
				color: red;
			}
			/* 定位到父元素，选择父元素下的第一个元素 
			选中父元素的哪第一个，并且是当前元素才会生效，按顺序选择*/
			p:nth-child(2){
				background-color: burlywood;
			}
			/* 选中父元素下的p元素的第二个，按类型选择 */
			p:nth-of-type(1){
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<h1>我是标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
	<li>li1<li>
	<li>li2</li>
</ul>
	</body>
</html>

2.4、属性选择器（常用）

id+class结合起来

<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.demo a{
				float: left;
				display: block;
				height: 50px;
				width: 50px;
				border-radius: 10px;
				background-color: aqua;
				text-align: center;
				color: gray;
				text-decoration: none;
				margin-right: 5px;
				font: bold 20px/50px large;
			}
			/* 存在ID的元素 
			a[]{}
			*/
		   /* 属性名  属性名=属性值[正则] */
			a[id="first"]{
				background-color: yellow;
			}
			 
		</style>
	</head>
	<body>
		<p class="demo">
			<a href="http://www.baidu.com" class="test" id="first">1</a>
			<a href="" class="test active" target="_blank" title="我是标题">2</a>
			<a href="img/123.html" class="test active">3</a>
			<a href="" class="test active">4</a>
			<a href="" class="test active">5</a>
			<a href="" class="test active">6</a>
			<a href="" class="test active">7</a>
		</p>
	</body>
</html>

=  绝对等于
*=  包含等于
^=  以...结尾
&=

3、网页美化

3.1、为什么要美化网页

有效传递页面信息
美化网页，吸引用户
凸显页面主题
提高用户体验

span标签：重点要突出的字，使用span标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#title1{
				font-size: 20px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<span id="title1">
			我是标题
		</span>
	</body>
</html>

3.2、字体样式

<style>
			/* font-family: 楷体;    字体样式
			 font-size: 29px;   字体大小
			 font-weight: bold;   字体粗细
			 */
		body{
			font-family: 楷体;
			color: bisque;
		}
		h1{
			font-size: 29px;
		}
		.p1{
			font-weight: bold;
		}
		</style>

3.3、文版样式

颜色
文本对齐方式 text-align: center; 文本居中
首行缩进
行高
装饰
超链接去下划线

		<style>
		/* RGB  0~F
		 RGBA  0~1  透明度
		 text-align: center;  文本居中
		 text-indent: 2em;  首行缩进
		 line-height: 30px;   行高和块高度相同则上下居中
		 text-decoration: underline;   下划线
		 text-decoration: line-through;   中划线
		 text-decoration: overline;    上划线
		 */
		body{
			color: #0000ff;}
		h1{
			text-align: center;
		}
		.p1{
			text-indent: 2em;
		}
		.p3{
			background-color: aquamarine;
			height: 200px;
			width: 400px;
			line-height: 30px;
			text-align: center;
			text-decoration: underline;
			text-decoration: overline;
		}
		</style>

3.4、超链接伪类

鼠标悬浮，阴影，鼠标点击等状态

		<style>
			a{
				text-decoration: none;
				color: black;
			}
			/* 鼠标悬浮的颜状态 */
			a:hover{
				color: aquamarine;
			}
			/* 鼠标按住未释放的状态 */
			a:active{
				color: bisque;
			}
			/* 点击之后的样式 */
			a:visited{
				color: rebeccapurple;
			}
			#price{
				/* 阴影效果   水平，垂直，半径，颜色*/
				text-shadow: 2px 2px 2px #222FFF;
			}
		</style>

3.5、列表表单

列表表单模拟实现，嵌套CSS文件，实例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/new_Demo.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div id="nav">
			<h1 class="title">全部商品分类</h1>
			<ul>
				<li><a href="#">京东数码</a>&nbsp;&nbsp;<a href="#"><span>家电</span>
					</a></li>
				<li><a href="#">京东数码</a>&nbsp;&nbsp;<a href="#"><span>家电</span>
					</a></li>
				<li><a href="#">京东数码</a>&nbsp;&nbsp;<a href="#"><span>家电</span>
					</a></li>
				<li><a href="#">京东数码</a>&nbsp;&nbsp;<a href="#"><span>家电</span>

					</a></li>
				<li><a href="#">京东数码</a>&nbsp;&nbsp;<a href="#"><span>家电</span>

					</a></li>
			</ul>
		</div>

	</body>
</html>

#nav{
	width: 300px;
	background-color: bisque;
}
.title {
	font-size: 30px;
	font-weight: bold;
	text-indent: 1em;
	line-height: 40px;
	background-color: red;
}

/* ul {
	background-color: bisque;
} */

ul li {
	/* list-style: none;  没有初始样式 
	list-style: circle;   空心圆
	decimal  数字
	square  正方形*/
	height: 30px;
	list-style: none;
	text-indent: 1em;

}

a {
	text-decoration: none;
	size: 15px;
	color: black;
}

a:hover {
	color: gold;
	text-decoration: underline;
}

表单应用注意顺序以及对于hover 的运用

3.6、背景

平铺方式以及背景图

<style>
			div{
				height: 1000px;
				width: 1000px;
				border: 1px solid red;
				/* 默认是全部平铺 */
				background-image:url("img/img2.jpg");
				/* 背景颜色  图片  图片位置  平铺 */
				background:white url("img/1.jpg") 100px 10px no-repeat;
			}
			.div1{
				/* 水平平铺 */
				background-repeat:repeat-x;
			}
			.div2{
				/* 垂直平铺 */
				background-repeat:repat-y ;
			}
			.div3{
				/* 不平铺 */
				background-repeat:no-repeat;
			}
		</style>

background-image:url(“img/img2.jpg”);
背景颜色图片图片位置平铺
background:white url(“img/1.jpg”) 100px 10px no-repeat

3.7、渐变

渐变开元项目网站：https://www.grabient.com/

		<style>
			/* 经向渐变，圆形渐变 */
			body{
				background-color: #0093E9;
				background-image: linear-gradient(136deg, #0093E9 0%, #80D0C7 100%);
			}
		</style>