企业官网建设流程全解析

目录

2.CSS

2.1 CSS 介绍

2.1.1 什么是 CSS？

2.1.2 基本语法规范

2.1.3 引入方式

2.1.4 规范

2.2 CSS 选择器

2.3 常用 CSS

2.3.1 color

2.3.2 font-size

2.3.3 border

2.3.4 width/height

改变显示模式

2.3.5 内边距

2.3.6 外边距

更多实操样例和更为详细的内容参考下面这篇博客👇

前端基础——CSS保姆级课堂笔记

2.CSS

2.1 CSS 介绍

2.1.1 什么是 CSS？

CSS（Cascading Style Sheet），层叠样式表，用于控制页面的样式

CSS 能够对网页面中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离

CSS 可以理解为“东方四大邪术”之化妆术

对页面的展示进行“化妆”

CSS 前→CSS 修饰后

2.1.2 基本语法规范

选择器+{一条/N条声明}

选择器决定针对谁修改（找谁）

声明决定修改啥（干啥）

声明的属性是键值对，使用；

区分键值对，使用：区分键和值

<style> p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } </style> <p>hello</p>

注意：

CSS 要写到 style 标签中（后面还会介绍其他写法）

style 标签可以放到页面任意位置，一般放到 head 标签内

CSS 使用 /* */ 作为注释（使用 ctrl + / 快速切换）

2.1.3 引入方式

CSS 有 3 种引入方式，语法如下表所示：

引入方式	语法描述	示例
行内样式	在标签内使用 style属性，属性是 css 属性键值对	<div style="color:green">绿色</div>
内部样式	定义<style>标签，在标签内部定义 css 样式	<style>h1{…}</style>
外部样式	定义<link>标签，通过href属性引入外部 css 文件	<link rel="stylesheet" href="[CSS 文件路径]">

3 种引入方式对比：

1.内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用（课堂上为了方便讲解，使用该方式）

2.行内样式，只适合于写简单样式，只针对某个标签生效，缺点是不能写太复杂的样式

3.外部样式，html 和 css 实现了完全的分离，企业开发常用方式

2.1.4 规范

样式大小写

虽然 CSS 不区分大小写，我们开发时统一使用小写字母

空格规范

冒号后面带空格

选择器和 { 之间也有一个空格

2.2 CSS 选择器

CSS 选择器的主要功能就是选中页面指定的标签元素，选中了元素，才可以设置元素的属性

就好比 SC2,War3 这样的游戏，需要先选中单位，再指挥该单位行动

CSS 选择器主要分以下几种：

1.标签选择器

2.class 选择器

3.id 选择器

4.复合选择器

5.通配符选择器

我们通过代码来学习 CSS 选择器的使用

<div class="font32">我是一个div，class为font32</div> <div class="font32">我是一个div，class为font32</div> <div><a href="#">我是一个div</a></div> <ul> <li>aaa</li> <li>bbb</li> <li><a href="#">ccc</a></li> </ul> <ol> <li>1111</li> <li>2222</li> <li>3333</li> </ol> <button id="submit">提交</button>

1.标签选择器

/* 选择所有的a标签，设置颜色为红色 */ a { color: red; } /* 选择所有的div标签，设置颜色为绿色 */ div { color: green; }

2.类选择器

/* 选择class为font32的元素，设置字体大小为32px */ .font32 { font-size: 32px; }

一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要使用空格分割，这种做法可以让代码更好复用）

3.ID 选择器

/* 选择id为submit的元素，设置颜色为红色 */ #submit { color: red; }

id 是唯一的，不能被多个标签使用（是和 类选择器 最大的区别）

4.通配符选择器

/* 设置页面所有元素，颜色为红色*/ * { color: red; }

5.复合选择器

/*只设置 ul标签下的 li标签下的 a标签，颜色为红色*/ ul li a { color: blue; }

1.以上三个标签选择器 ullia 中的任意，都可以替换成类选择器，或者 id 选择器，可以是任意选择器的组合，也可以是任意数量选择器的组合

2.不一定是相邻的标签，也可以是“孙子”标签

3.如果需要选择多种标签，可以使用，分割，如 p，div{ }表示同时选中 p 标签和 div 标签

逗号前后可以是以上任意选择器，也可以是选择器的组合

2.3 常用 CSS

更多样式可以参考 文档👇

或者 w3school 也挺不错的👇

在这里也可以亲自运行尝试👇

接下来学习一些常见的 CSS 样式

准备如下 html

<div class="text1">我是文本1</div>

2.3.1 color

color：设置字体颜色

.text1{ color: red; }

颜色有如下几种表达方式：

英文单词，如 red,blue

rgb代码的颜色，如 rgb(255,0,0)

十六进制的颜色，如 #ff00ff

2.3.2 font-size

font-size：设置字体大小

.text1{ font-size: 32px; }

2.3.3 border

border：边框

边框是一个复合属性，可以同时设置多个样式，不分前后顺序，浏览器会根据设置的值自动判断

.text1{ border: 1px solid purple; }

以上 border 属性的对应设置的维度分别为边框粗细，边框样式，边框颜色

也可以拆开来设置

样式	说明	取值
border-width	设置边框粗细	数值
border-style	设置边框样式	①dotted：点状 ②solid：实线 ③double：双线 ④dashed：虚线
border-color	设置边框颜色	同 color

border：1px solid purple，就等同于以下代码：

.text1 { /* border: 1px purple solid; */ border-width: 1px; border-style: solid; border-color: purple; }

2.3.4 width/height

width：设置宽度

height：设置高度

只有块级元素可以设置宽高

块级元素是 HTML 标签的一种显示模式，对应的还有行内元素

常见块级元素：h1-h6，p，div 等

常见行内元素：a span

块级元素独占一行，可以设置宽高

比如同样是宽500px，高200px，div 作为行内元素就正常生效，而 span 作为块级元素就无法生效👇

改变显示模式

使用 display 属性可以修改元素的显示模式

display：block 改成块级元素[常用]

display：inline 改成行内元素[很少用]

.text1 { width: 500px; height: 200px; }

2.3.5 内边距

注意：内边距和外边距都是相对的概念~~

padding：内边距，设置内容和边框之间的距离

内容默认是顶着边框来放置的，用 padding 来控制这个距离

.text1 { padding: 20px; }

padding 也是一个复合样式，可以对四个方向分开设置

padding-yop

padding-bottom

padding-left

padding-right

2.3.6 外边距

margin：外边距，设置元素和元素之间的距离

.text1 { margin: 20px; }

margin 也是一个复合样式，可以给四个方向都加上外边距

margin-top

margin-bottom

margin-left

margin-right