初始css3

css3是干啥的:

  对html标签进行修饰

  进行相关的修饰:字体 图片 背景 大小,位置,定位等等。。

修饰的三种方式:

  1.行内标签修饰 行内标签添加style标签
  2.内部样式  在head中添加style进行处理
  3.外部样式

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>静夜思</title>
		
		<style>
			p{
				
				color:blue;
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		
		<p>窗前明月光,</p>
		
		<p>疑是地上霜。</p>
		<p>举头望明月,</p>
		<p>低头思故乡。</p>
	</body>
	
</html>
	

 

 

Vue3项目初始CSS样式设置可借助npm官方提供的常见CSS库和框架,来实现全局样式的快速引入,这些样式可统一界面风格、布局、字体等。以下列举一些流行的CSS库及其使用方式: ### Normalize.css Normalize.css 能让不同浏览器在默认样式上表现得更加一致。使用步骤如下: 1. 安装依赖:在项目根目录下打开终端,执行以下命令安装 normalize.css。 ```bash npm install normalize.css ``` 2. 引入样式:在项目的入口文件(通常是 `main.js` 或 `main.ts`)中引入 normalize.css。 ```javascript import &#39;normalize.css&#39;; ``` ### reset.css reset.css 会重置所有 HTML 元素的默认样式。使用步骤如下: 1. 下载 reset.css 文件,可以从网上找到合适的 reset.css 文件并将其放置在项目的 `src` 目录下,例如 `src/assets/css/reset.css`。 2. 引入样式:在项目的入口文件中引入 reset.css。 ```javascript import &#39;./assets/css/reset.css&#39;; ``` ### tailwindcss Tailwind CSS 是一个功能强大的实用类优先的 CSS 框架。使用步骤如下: 1. 安装依赖:在项目根目录下打开终端,执行以下命令安装 Tailwind CSS 及其依赖。 ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` 2. 配置 Tailwind CSS:在项目根目录下找到 `tailwind.config.js` 文件,配置需要扫描的文件路径。 ```javascript /** @type {import(&#39;tailwindcss&#39;).Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } ``` 3. 引入 Tailwind CSS 样式:在项目的全局 CSS 文件(例如 `src/index.css`)中引入 Tailwind CSS 的基础样式。 ```css @tailwind base; @tailwind components; @tailwind utilities; ``` 4. 引入全局 CSS 文件:在项目的入口文件中引入全局 CSS 文件。 ```javascript import &#39;./index.css&#39;; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值