前端基础CSS 入门
Posted ZSYL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础CSS 入门相关的知识，希望对你有一定的参考价值。
【前端基础】CSS 介绍
css 的介绍
学习目标
- 能够知道css的作用
1. css 的定义
css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。
没有使用css的效果图
使用css的效果图
2. css 的作用
- 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
- 控制页面布局, 比如: 设置浮动、定位等样式。
3. css 的基本语法
选择器
样式规则
样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
…
选择器: 是用来选择标签的，选出来以后给标签加样式。
代码示例:
div
width:100px;
height:100px;
background:gold;
说明：
css 是由两个主要的部分构成： 选择器和一条或多条样式规则
注意: 样式规则需要放到大括号里面。
4. 小结
- css 是层叠样式表，它是用来美化网页和控制页面布局的。
- 定义 css 的语法格式是: 选择器样式规则
css 的引入方式
学习目标
- 能够知道 css 的引入三种方式
css 的三种引入方式
- 行内式
- 内嵌式（内部样式）
- 外链式
1. 行内式
直接在标签的 style 属性中添加 css 样式
示例代码:
<div style="width:100px; height:100px; background:red ">hello</div>
- 优点：方便、直观。
- 缺点：缺乏可重用性。
2. 内嵌式（内部样式）
在
<head>标签内加入<style>标签，在<style>标签中编写css代码。
示例代码:
<head>
<style type="text/css">
h3
color:red;
</style>
</head>
- 优点：在同一个页面内部便于复用和维护。
- 缺点：在多个页面之间的可重用性不够高。
3. 外链式
将css代码写在一个单独的.css文件中，在
<head>标签中使用<link>标签直接引入该文件到页面中。
示例代码:
<link rel="stylesheet" type="text/css" href="css/main.css">
-
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
-
缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。
4. css引入方式选择
- 行内式几乎不用
- 内嵌式在学习css样式的阶段使用
- 外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。
5. 小结
- css 的引入有三种方式, 分别是行内式、内嵌式、外链式。
- 外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想， 也最易改版维护，代码看起来也是最美观的一种。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 内嵌式 -->
<style>
/* css里面的注释: mac :cmd + / windows： ctr + / */
/* 选择器 ， css样式表可以由很多选择器组成，选择器就是用来选择标签给标签添加样式*/
a
color: green;
div
width: 100px;
height: 100px;
background: blue;
</style>
<!-- 外链式 -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- 行内式 -->
<p style="color:red">我是一个段落标签</p>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">谷歌</a>
<div>哈哈</div>
<h1>我是一级标题</h1>
</body>
</html>
加油!
感谢!
努力!
以上是关于前端基础CSS 入门的主要内容，如果未能解决你的问题，请参考以下文章