好看的css样式,css好看的背景色 收藏 0

CSS的三种样式

CSS全称为 Cascading Style Sheets,译为层叠样式表。CSS有三种样式：内联样式，内嵌样式，外联样式。

内联样式

内联样式通过HTML元素的style属性来设置CSS样式，语法如下：

示例代码：

* 内联样式的缺点: 只对当前元素有效, 导致CSS代码可能出现冗余

内嵌样式表

通过HTML元素的style属性来设置CSS样式，语法如下：

示例代码：

优点: 相对于内联样式

*通过CSS选择器定位HTML页面中一个或一类元素

缺点:相对于内联样式

* 将CSS代码嵌入到HTML页面中,只能对当前HTML页面有效

* 编码的风格不符合编码原则中的低耦合

* 导致CSS代码可能出现冗余

外联样式

通过HTML元素的<link>元素来设置CSS样式表

1.创建一个CSS文件,用来存储CSS样式内容

2.在HTML页面中通过<link>元素引入外部指定的CSS文件

<link>元素:

* 作用: 用来引入HTML页面外部的资源

属性:

* rel属性: 用来设置外部资源与当前HTML页面的关系

* href属性: 用来设置引入外部资源的路径(相对路径和绝对路径)

语法结构如下：

示例代码：

优点: 相对于内嵌样式表和内联样式

* 将CSS样式与HTML页面进行分离(低耦合)

* 不会出现内嵌样式表或内联样式产生的代码冗余

缺点: 可能对HTML页面的加载造成负担,导致性能下降

下一节更新CSS选择器

Web前端入门到精通必会的CSS样式和属性大全

Web前端入门到精通必会的CSS样式和属性，昨天更新了，得到了很多同学的认可，有同学想要看接下来CSS以及JS的相关基础内容，今天他来了！

抽时间为大家总结了实际开发中必会的CSS、CSS3样式和属性（常用和不常用的内容都有标注），做成了网页版，以便于查询使用，对于初学者来说可以少走弯路，明确重点，时间诚可贵呀️！

盒模型：width，height，padding，margin，box-sizing，display，visibility

常用文本样式属性：color，font-size，font-weight，font-style，text-decoration

字体属性：font-family，@font-face

段落和行相关属性：text-indent，line-height，text-align，font

css的书写位置：style，link，@import

层叠性和选择权重：!important

伪元素：::before，::after，::selection，::first-letter，::first-line

伪类：:link，:visited，:active，:hover

css3新增伪类：:empty，:focus，:enabled，:disabled，:checked，:root （不常用，了解即可）

标签选择器和id选择器 ：element、#id

class 选择器：.class

复合选择器：后代，交集，并集

元素关系选择器：子选择器，相邻兄弟，通用兄弟选择器

序号选择器：:first-child，:last-child，:nth相关

属性选择器：[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 、[attribute~=value] 、[attribute|=value] （不常用，了解即可）

浮动：float，BFC，overflow，clear

定位：position，relative，top，bottom，left，right，absolute，z-index，fixed

鼠标样式：cursor

边框：border相关，属性（solid，dashed，dotted）

圆角：border-radius

盒子阴影：box-shadow

背景：background相关

浏览器前缀：-webkit-，-moz-，-ms-，-o-

2D/3D转换：transform，transform

还需要总结什么 ？需要的同学留言，做我的粉丝我会宠你 接下来我会抽时间把这15年的Web全栈相关的经验和知识从入门到精通逐一总结出来

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