html中css样式怎么写-html+css 收藏 0

我们应该如何写好HTML&CSS

这应该是最容易让人忽略的一个问题，容易到很多工作几年的前端开发工程师都不太注意如何写好html及css

相比于JavaScript,HTML&CSS确实凸显不出它的重要性,因为HTML&CSS不承载业务逻辑,具体来说他们不能称之为编程语言,那HTML&CSS真的就那么简单到不起眼吗？

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

当我们拿到项目ui图后,建议大家不要一行一行的去画页面，这样不经效率低而且写出来的页面代码比较臃肿,下面是Element-ui的栅格布局及布局容器图：

一旦有了项目的大体架构，我们就可以做到手里有粮心中不慌了我们以京东首页为例，来说明下良好的布局应该是什么样子的

可以看到，我在首页任意调换两个div,页面的布局也跟着调换过来而且没有乱,这就是一个良好的布局。你也可以在自己的项目这样试一试

说到CSS我们是势必要说到两个概念：重绘&重排

• 重绘 重绘是指当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知render 重新描绘相应的元素, 此过程称为重绘。
• 重排 重排是指某些元素变化涉及元素布局 (如width), 浏览器则抛弃原有属性, 重新计算，此过程称为重排。（重排一定会重绘，重绘不一定重排）。

页面渲染的一般过程为JS > CSS > 计算样式 > 布局 > 绘制 > 渲染层合并而在这个过程中其中,重排和重绘是整个环节中最为耗时的两环,从重绘和重排的概念上看，重排比重绘更加的消耗性能,所以我们尽量避免着这两个环节。从性能方面考虑,最理想的渲染流水线是没有布局和绘制环节的,只需要做渲染层的合并即可。

说了这么多,那在项目中应该怎么规划我们的布局及样式呢,一下是我个人的总结,和大家分享

• 首先定义项目的基准样式：如重置样式,公用样式变量,兼容性处理等,且最好用less/sass/stylus等来写我们的css
• 把项目的公共布局及样式抽离出来：如公用的头部，公用的尾部，公用的tab等
• 避免样式重复赋值,避免样式重叠:如避免在业务或者组件里面写全局样式,样式层级不要过深
• 用好z-index,position

作者：刘小灰链接：https://juejin.im/post/6854573211548549127

前端入门——css 样式表简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

那css网页HTML有什么关系?

通俗的讲你可以把HTML比作是组成网页的框架，而css则是装饰美化网页的工具。一个没有任何css的网页是排版混乱，杂乱无章的，没有美感的。

本文下来主要介绍下如何在网页中使用css，以及css包括哪些知识点，具体的css知识点会在以后逐一介绍，一篇文章很难讲完。

css是作用于HTML标签上的，如果你还不是很熟悉HTML，请先学习HTML的知识，再来学习css。

一个HTML标签如下结构：

• 标签（Tag）—— 元素名称，如a, div
• 属性（Attribute）—— 元素属性，如href
• 值（Value）—— 属性值
• 元素（Element）—— HTML标记中所有的东西：属性、值和内容。

网页中使用css一般有三种，行内样式，内部样式表及外部样式表。

1、行内样式

在html标签的style属性中写css代码，这样的方式就是行内样式。行内样式有个缺点就是对于页面中相同的元素必须每个元素都写一遍css代码，很不方便，所以这时需要使用内部样式表或外部样式表。

如下示例：

2、内部样式表

使用<style></style> 标签之间写css代码，就是内部样式表。内部样式表缺点就是当页面复杂的时候，不利于组织代码，把不同模块功能的css代码组织成不同的css文件，这样更加清晰，便于组织维护代码。

如下示例：

3、外部样式表

使用<link href=\”css文件路径\”> 的方式引入外部css 文件，这就是外部样式表，除此之外，在一个css 文件中还可以使用 @import \”css文件路径\” 引入另外一个css文件。

示例1：

style.css

示例2：

如下代码，在style.css 中使用@import引入一个home.css文件，

style.css

home.css

这里特别注意下，home.css 里面的css 选择器如果和style.css 的一样，那么style.css 的样式效果会覆盖home.css 的效果，比如这里p标签最终显示为蓝色，而不是红色。

css有三个部分组成：选择器、属性和值。

• 选择器 —— 用来查询选择HTML标签的
• 属性 —— 设置HTML元素的各种样式
• 值 —— 应用的样式值

例子：

如上#id,p,.head 就是选择器，大括号里面冒号前面是属性，冒号后面是值，每行以分号结束。

css 注释

cs样式表中注释语句以“/*”开始，以“*/”结束，如下所示：

css 的继承和冲突

css 的继承规则是一个html元素的子元素会继承它的所有上级元素样式，有时会把很多外层的的样式叠加在一起，如下示例：

如上示例中，p段落包含在body中的div元素里，所以p段落继承了body 和 div 的样式，它将显示蓝色背景和红色字体。

如果在上面的示例代码中，再加上 p{color: #ffffff;} ,这个时候，p元素中的文字显示什么颜色？答案是白色，为什么，这就是css 产生冲突了。

在同一个元素上使用了同一个css属性但不同值的时候，就会产生冲突，浏览器会按照最后定义的样式为准。

1、css 选择器

2 、css优先级

3、css 间距 —— margin、padding

4、css 盒子模型

5、css字体和文本 —— font

6、css链接样式

7、css颜色和背景 —— color 、background

8、css边框和圆角 —— border

9、css显示 —— display

10、css定位 —— position

11、css浮动 —— float

12、css布局：flex弹性盒子

13、css响应式：媒体查询

14、css 过渡和动画

15、css渐变和阴影

16、css网格

css （层叠样式表）它有很多属性，但是平时只会用到一小部分，学习css不能死记硬背一大堆属性语法，这样没有多大用处，只需要掌握基本的概念和常用语法，基本上就够用了，对于其它的属性在用的时候再查询文档就可以了。

关于css详细内容，后面会按知识点介绍，感谢关注。

下一篇：

CSS 字体样式

本节我们来讲字体样式，之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签，但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。

接下来我们会给大家介绍下面这几个属性的使用：

通过学习上述这几个 CSS 属性，我们可以实现给 HTML 中的文字设置字体、大小、风格、倾斜、加粗等。

font-family 属性用于设置一个元素的字体，字体就是像宋体、楷体等。

通过 font-family 属性，可以同时声明多种字体，字体之间使用逗号分隔。根据字体的调用原则，会优先调用第一种字体，如果没有找到，则会尝试调用下一个字体，如果都找不到则调用默认字体。

示例：

例如为下面这个 <p> 标签中的文本设置字体：

可以使用标签选择器，然后在 font-family 属性中设置：

在声明字体时，我们应该分别声明英文字体和中文字体，且英文字体的声明应该在中文字体之前。因为绝大部分中文字体里包含英文字母，但是不是很好看，而英文字体里不包含中文字符。所以如果我们不希望用中文字体来显示英文，就一定要记得先声明英文字体。先声明的会先调用。

常用英文字体：Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。

常用中文字体：宋体 SimSun、黑体 SimHei、微软雅黑 Microsoft YaHei、仿宋 FangSong、楷体 KaiTi 等。

font-size 属性用于设置字体的大小，常用的单位为 px，即像素。

px 是 Pixel 的缩写，是可以在数字显示设备上显示和表示的数字图像或图形的最小单位。像素是数字图形中的基本逻辑单元，像素也称为图像元素。

示例：

例如我们来看下面这段代码（其他HTML结构代码没有展示出来）：

在浏览器中的演示效果为：

然后此时，我们通过 font-size 来将其中的 <h1> 标签中的字体设置为 14px，<p> 标签中的字体设置为 20px：

在浏览器中演示效果就变为了下图所示：

很明显，通过 CSS 中的 font-size 属性可以设置任意标签中的字体大小。

font-style 设置字体的风格，可以将字体设置成斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。

此属的常用属性值如下所示：

示例：

将下面三个 <p> 中的内容设置为不同的字体风格，可以使用类选择器：

CSS 样式代码：

在浏览器中演示效果如下所示：

font-weight 属性用于设置显示元素的文本中所用的字体加粗。

此属性的常用属性值如下所示：

示例：

将下面的 <p> 标签的粗细分别设置为 normal、bold、700、900：

CSS 样式代码：

在浏览器中演示效果：

font 属性用于在一个声明中设置所有的字体属性，各个属性之间使用空格隔开。也就是上述几个属性的综合简写属性。

如果我们使用 font 属性来设置字体样式，设置顺序分别是：font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不设置其中的某个值，未设置的属性会使用其默认值。

示例：

CSS 样式代码：

在浏览器中演示效果：

注意，在使用 font 属性时，font-size 和 font-family 的值是必需的，如果没有设置这两个属性值，则不会生效。

本节学习的几个属性值都是 CSS 中最基本的属性，特别是 font-size 属性，我们会经常用到。一般浏览器会有一个默认的字体大小，例如 16px，而编写页面时如果我们希望大部分页面内容正文字体大小为 12px 或 14px，就会在 <body> 标签上设置，这样就不用一个个标签去设置。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com