E002Web学习笔记-CSS

你的名字 2024-04-17 05:53 15阅读 0赞

**目录**

一、CSS概述

1、CSS的作用

2、什么是CSS

3、CSS控制样式的好处

4、CSS的使用方式

①内联样式（不推荐使用）——作用于当前标签

②内部样式——作用于当前html文件

③外部样式——作用于多个html文件

二、CSS选择器

1、语法格式

2、选择器

基本选择器：

扩展选择器：

三、CSS常用属性

1、文本、字体

2、背景

3、边框

4、尺寸

代码演示：

5、盒子模型

代码示例：

--------------------

# 一、CSS概述 #

## 1、CSS的作用 ##

界面美化和布局控制；

## 2、什么是CSS ##

Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html标签上，同时生效；

## 3、CSS控制样式的好处 ##

①功能强大；

②将内容展示与样式分离：降低耦合度（解耦），让分工协作更容易，提高开发效率；

## 4、CSS的使用方式 ##

### ①内联样式（不推荐使用）——作用于当前标签 ###

**代码示例：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>CSS演示</title>
    	</head>
    	<body>
    		
    		<div style="color: aqua;">
    			Hello World!
    		</div>
    	</body>
    </html>

### ②内部样式——作用于当前html文件 ###

**代码演示：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>CSS演示</title>
    		
    		<style type="text/css">
    			div{
    				color: aqua;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			Hello World!
    		</div>
    	</body>
    </html>

### ③外部样式——作用于多个html文件 ###

**css.css：**

div{
    	color: aqua;
    }

**css.html：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>CSS演示</title>
    		
    		<link rel="stylesheet" type="text/css" href="css/css.css"/>
    	</head>
    	<body>
    		<div>
    			Hello World!
    		</div>
    	</body>
    </html>

# 二、CSS选择器 #

## 1、语法格式 ##

选择器{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
        ...
    }

**选择器：**筛选具有相似特征的元素；

**属性：**每一条属性用分号隔开，最后一条可以省略；

## 2、选择器 ##

### 基本选择器： ###

①id选择器；

②元素选择器；

③类选择器；

**代码演示：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>基本选择器演示</title>
    		<style type="text/css">
    			/* id选择器，id原则上唯一 */
    			#d1{
    				color: aqua;
    			}
    			/* 类选择器 */
    			.d2{
    				color: red;
    			}
    			/* 标签（元素）选择器 */
    			div{
    				font-size: 30px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="d1">
    			Hello ID;
    		</div>
    		<div class="d2">
    			Hello CLASS;
    		</div>
    		<div>
    			Hello DIV;
    		</div>
    	</body>
    </html>

### 扩展选择器： ###

①\*所有选择器，选择全部元素——语法：\*\{\}

②并集选择器——语法：选择器1,选择器2\{\}

③子选择器——语法：选择器1.选择器2

④父选择器——语法：选择器1>选择器2

⑤属性选择器——语法：元素名称\[属性名="属性值"\]\{\}

⑥伪类选择器——语法：元素:状态

如<a>，状态：link：初始化状态；visited：被访问过的状态；active：正在访问状态；hover：鼠标悬浮状态；

**代码演示：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>扩展选择器演示</title>
    		<style type="text/css">
    			/* 子选择器 */
    			.c1 #son{
    				font-size: 30px;
    			}
    			/* 属性选择器 */
    			div[align="center"]{
    				color: #FF0000;
    				font-size: 50px;
    			}
    			/* 伪类选择器 */
    			a:link{
    				color: #FF0000;
    			}
    			a:visited{
    				color: #00FFFF;
    			}
    			a:active{
    				color: black;
    				font-style: inherit;
    				font-size: 30px;
    			}
    			a:hover{
    				color: green;
    				font-style: oblique;
    				font-size: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="div1">
    			Hello!
    		</div>
    		<div class="c1" align="center">
    			<div id="son">
    				儿子！
    			</div>
    			Hello!
    		</div>
    		<div id="div3" align="center">
    			Hello!
    		</div>
    		<a href="#">这是连接</a>
    	</body>
    </html>

# 三、CSS常用属性 #

## 1、文本、字体 ##

## 2、背景 ##

## 3、边框 ##

## 4、尺寸 ##

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>CSS属性演示</title>
    		<style type="text/css">
    			#test{
    				/* 字体大小 */
    				font-size: 30px;
    				/* 字体颜色 */
    				color: #FF0000;
    				/* 文本对齐方式 */
    				text-align: center;
    				/* 行高 */
    				line-height: 50px;
    				/* 边框 */
    				border: 5px solid #00FFFF;
    				/* 背景-颜色-图片 */
    				background: #000000;
    				/* background: url(图片地址); */
    				/* 宽度 */
    				width: 300px;
    				/* 高度 */
    				height: 300px;
    				
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test">
    			Hello!
    		</div>
    	</body>
    </html>

## 5、盒子模型 ##

外边距：margin；

内边距：padding；

浮动：float；

### 代码示例： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>盒子模型演示</title>
    		<style type="text/css">
    			#zibo{
    				color: #ffffff;
    				width: 200px;
    				height: 200px;
    				background-color: #FF0000;
    				margin: 20px;
    				/* padding会影响盒子的大小 */
    				padding: 20px;
    				/* 使所设置的宽和高就是盒子最终的大小 */
    				box-sizing: border-box;
    			}
    			#zb{
    				width: 300px;
    				height: 300px;
    				background-color: #00FFFF;
    				box-sizing: border-box;
    			}
    			.c1{
    				/* 浮动 */
    				float: left;
    			}
    			.c2{
    				/* 浮动 */
    				float: left;
    			}
    			.c3{
    				/* 浮动 */
    				float: right;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="zb">
    			<div id="zibo">
    				Hello!
    			</div>
    		</div>
    		<div class="c1">
    			哈哈
    		</div>
    		<div class="c2">
    			呵呵
    		</div>
    		<div class="c3">
    			嘿嘿
    		</div>
    	</body>
    </html>