CSS(网页样式语言)基础,网页CSS设计样式基础知识点小白教程

深碍√TFBOYSˉ_ 2022-09-02 14:55 358阅读 0赞

什么是CSS？

CSS由哈坤·利在1994年提出，到1996年正式完成了CSS语言，并且在1998年收录到W3C组织。

CSS(Cascading Style sheet)，用于控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言，它可以把网站的样式单独分离出来，单独进行设置。CSS以HTML语言为基础，提供了丰富的格式化功能，比如：字体、颜色、背景、排版等等，这样可以更好的适应页面美工设计。可以理解为CSS就是网页网站美丽的外衣，可以根据需要修改想要的风格。

![3b4576525b406ec9fe3f9bb11bc4d6ec.png][]

CSS有哪些优势？

实现了把网页的结构和样式分离，避免使用一些不必要的标签和属性；结构变得简洁、合理、语义性准确；更有效的定义对象样式，控制页面版式，抛弃了传统的表格布局陋习。提高了开发效率和维护效率，后期维护更经济简单。什么是CSS样式？

我们准备接触的CSS就是下面的样式：

body \{ font-size:12px; color:red;\}\#选择器 \{ 属性1: 属性值2; 属性2: 属性值2; .... \}

在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，大括号内是对该对象设置的具体样式。其中，属性和属性值以“”的形式出现，属性是对指定的对象设置的样式属性，如字体大小、文本颜色等，后面我们会学习更多的属性和属性值。属性和属性值之间用英文“”连接，多个键值对之间用英文“”进行区分。

1.css样式中的选择器严格区分大小写，属性和属性值不区分大小写，但是按照规范一般“选择器、属性和属性值”采用小写的方式。

2.多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了方便阅读和添加新样式，最好保留，养成良好的书写习惯！

3.如果属性的值由多个英文单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

4.在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，这个后面会提到。

5.在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。

在网页中引入css样式分为三种方式：

1.行内式

行内式也称为内联样式，是通过标记的syle属性来设置元素的样式。基本语法格式：< 标记名 style="属性1:属性值1; 属性2:属性值2;" > 内容 标记名>

2.内嵌式

内嵌式是将CSS代码几种写在HTML文档的<head>头部标记中，并且用

3.链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中，其基本语法格式为：

对于链入式link标记中三个属性的解释：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接文档的类型，在这里需要指定为"text/css"，表示链接的外部文件为CSS样式表。rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。

有关选择器的更多介绍参考不在这里说明了，我们可以先学习一些基本的选择器，参考

举报/反馈

[3b4576525b406ec9fe3f9bb11bc4d6ec.png]: /images/20220829/1a5b302e1e1141688fc84ded6948a6eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，358人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 基础样式

目录字体文本背景边框

逃离我推掉我的手/ 2023年03月13日 11:53/ 0 赞/ 85 阅读

相关 CSS之为网页添加样式

文章目录为网页添加样式术语解释选择器声明块 CSS代码书写位置为网页添加样式

Dear 丶/ 2023年02月14日 02:24/ 0 赞/ 46 阅读

相关好看样式网页图标的设计（html+css）

html: <!doctype html> <html> <head> <meta charset="utf-8">

港控/mmm°/ 2023年01月08日 02:21/ 0 赞/ 265 阅读

相关 CSS(网页样式语言)基础,网页CSS设计样式基础知识点小白教程

什么是CSS？ CSS由哈坤·利在1994年提出，到1996年正式完成了CSS语言，并且在1998年收录到W3C组织。 CSS(Cascading Style sheet)

深碍√TFBOYSˉ_/ 2022年09月02日 14:55/ 0 赞/ 359 阅读

相关 CSS控制网页样式

CSS（Cascading Style Sheets）层叠样式表示一种用来表示HTML或XML等的文件样式的计算机语言，能够对网页中的对象的位置排版进行像素级的精

亦凉/ 2022年08月19日 04:49/ 0 赞/ 339 阅读

相关 CSS+DIV网页样式与布局

一、什么是CSS? CSS(Cascading Style Sheets),中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标

傷城~/ 2022年08月05日 02:19/ 0 赞/ 309 阅读

相关 CSS (为网页添加样式)

1 认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体

ゝ一世哀愁。/ 2022年06月14日 00:36/ 0 赞/ 331 阅读

相关前端基础2——CSS基本样式修饰、网页布局

目录一、CSS基本样式修饰 1，字体常用样式 2，文本常用样式 3，超链接样式 4，背景类样式 5，列表样式 6，表格样式 7，轮廓样式二、网页布局 1

r囧r小猫/ 2022年05月08日 09:48/ 0 赞/ 493 阅读

相关 CSS样式小知识点

1、hover样式 hover除了在a:hover,li:focus,li:hover之外，还可以写成页内js <a href="http://www.divcss

朴灿烈づ我的快乐病毒、/ 2022年01月10日 04:25/ 0 赞/ 421 阅读

相关 CSS知识点（样式）

1.字体样式 font-family: “楷体”; font-size: 50px; font-style: italic; font-weight: 900

客官°小女子只卖身不卖艺/ 2021年11月17日 21:42/ 0 赞/ 612 阅读