CSS完整笔记

最新推荐文章于 2024-04-21 14:30:45 发布

九巷_

最新推荐文章于 2024-04-21 14:30:45 发布

阅读量1.3k

点赞数 3

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_24584471/article/details/109245594

版权

1、什么是CSS

学习的路线

1、css是什么

2、css怎么用

3、css选择器（重点+难点）

4、美化网页（文字，阴影，超链接，列表，渐变…）

5、盒子模型

6、浮动

7、定位

8、网页动画（特效效果）

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

1.2 发展史

CSS 1.0

CSS 2.0 DIV() + CSS, HTML与CSS结构分离的思想，网页变得简单，SEO

CSS 2.1 浮动，定位

CSS 3.0 圆角，阴影，动画… 浏览器兼容性

1.3 快速入门

style

基本入门

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dfJO8d4K-1603442721766)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20201017195842599.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZRKHJDG-1603442721768)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20201017195852681.png)]

CSS的优势：

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录！

1.4 CSS的3种导入方式

优先级顺序：就近原则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i9mwpwwf-1603442721769)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20201017201234793.png)]

拓展：外部样式俩种写法

链接式：

html

<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">

导入式

@import是CSS2.1特有的

<!-- 导入式 -->
	<style>
		@import url("css/ne.css");
	</style>

2、选择器

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

2.1 基本选择器

1、标签选择器：选择一类标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<style>
		h1{
    
			color: rgb(2,65,867);
			background-color: gray;
			border-radius: 18px;
		}
	</style>
	
	<body>
		<h1>	学Java</h1>
		<p >	study python</p>
	</body>
</html>

2、类选择器 class：选择所有class属性一致的标签，跨标签，.类名{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		/* 类选择器的格式  .class的名称{}
		 好处，可以多个标签归类，是同一个class，可以复用
		 */
		.qinjiang{
    
			color: coral;
		}
		.ceshi{
    
			color: cornflowerblue;
		}
	</style>
	<body>
		<h1 class="ceshi">标题1</h1> 
		<h1 class="qinjiang">标题2</h1> 
		<h1>标题3</h1> 
	</body>
</html>

3、id选择器:全局唯一！ #id名{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		/* id选择器	:	id必须保证全局唯一
			#id名称{}
			不遵循就近原则，固定的
			id选择器 > class选择器 > 标签选择器
		 */
		#qinjiang{
    
			color: #808080;
		}
		.style1{
    
			color: green;
		}
		h1{
    
			color: blue;
		}
	</style>
	
	<body>
		
		<h1  class="style1" id="qinjiang">标题1</h1>
		<h1 class="style1">标题1</h1>
		<h1>标题1</h1>
		<h1>标题1</h1>
		<h1>标题1</h1>
	</body>
</html>

优先级：id>class>标签选择器

2.2 层次选择器

1、后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

	/* 后代选择器 */
		body p{
   
			background-color: red;
		}

2、子选择器，一代，儿子

body>p{
   
			background-color: aqua;
		}

3、相邻兄弟选择器：同辈

	/* 相邻兄弟选择器：只有一个，相邻（向下）
		 */
		.active + p{
   
			background-color: cornflowerblue;
			}

4、通用选择器

/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */
		.active~p{
   
			background-color: chartreuse;
		}

2.3 结构伪类选择器

伪类：

/* ul的第一个子元素 */
	ul li:first-child{
   
		background-color: red;
	}
	
	/* ul的最后一个子元素 */
	ul li:last-child{
   
		background-color: aqua;
	}
	/* 选中p1 ：定位到父元素，选中当前的第一个元素 
		选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
	*/
	p:nth-child(1){
   
		background-color: brown;
	}
	/* 选中父元素，下的p元素的第二个，类型 */
	p:nth-of-type(2){
   
		background-color: yellow;
	}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wa4u5Wm-1603442721771)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20201018200832875.png)]

2.4 属性选择器 (常用)

id+class 结合~

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

	<style>
		.demo a{
    
			float: left;
			display: block;
			height: 50px;
			width: 50px;
			border-radius: 10px;
			background-color: bisque;
			text-align: center;
			color: goldenrod;
			text-decoration: none;
			margin-right: 20px;
			font:bold 20px/50px Arial
		}
		/* 属性名，属性名 = 属性值 （正则） */
		/* = 绝对等于
		   *= 包含
		   ^= 以这个开头
		   $= 以这个结尾
		 */
		/* 存在id属性的元素  	a[]{}*/
	 /*  a[id]{
		   background-color: yellow;
	   } */
		/* id=first的元素 */
		/* a[id=first]{
			background-color: green;
		} */
		
		/* class 中有links的元素
		 */
		/* a[class*="links"]{
			background-color: red;
		} */
		
		/* 选中href种以http开头的元素 */
	/* 	a[href^=http]{
			background-color: black;
			
		} */
		
		/* 以pdf结尾的 */
		a[href$=pdf]{
    
			background-color: cornflowerblue;
		}
	</style>
	
	<body>
	
	<p class="demo">
		<a href="http://www.baidu.com" class="links item first" id="first">1</a>
		<a href="" class="links item active" target="_blank" title="test"> 2</a>
		<a href="img/123.html" class="links item">3</a>
		<a href="img/123.png" class="links item">4</a>
		<a href="img/123.jpg">5</a>
		<a href="abc" class="links item">6</a>
		<a

最低0.47元/天解锁文章

九巷_

关注

3
点赞
踩
36

收藏

觉得还不错? 一键收藏
1
评论
CSS完整笔记

1、什么是CSS学习的路线1、css是什么2、css怎么用3、css选择器（重点+难点）4、美化网页（文字，阴影，超链接，列表，渐变…）5、盒子模型6、浮动7、定位8、网页动画（特效效果）1.1 什么是CSSCascading Style Sheet 层叠级联样式表CSS：表现（网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…1.2 发展史CSS 1.0CSS 2.0 DIV() + CSS, HTML与CSS结构分离的思想，网页变得简单，SEOCSS
复制链接

扫一扫