[HTML]CSS基础教程-1

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量138 收藏 1
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjz0713/article/details/128560897
版权
这篇教程介绍了CSS的基础知识，包括其作用、语法、选择器（Id与Class）、样式表的创建方法（外部、内部和内联），以及样式优先级和应用。读者将学习如何使用CSS来控制HTML元素的样式和布局，提升网页设计效率。
摘要由CSDN通过智能技术生成

在学习CSS之前，你需要对HTML有一定的了解。
点击这里学习HTML的基础。
此教程会分为4期，在CSDN与x64论坛同步发布。

简介

CSS
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过使用 CSS 可以大大提升网页开发的工作效率
在教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

正片开始

CSS 语法

CSS 实例

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来

p {color:red;text-align:center;}

为了让CSS可读性更强，你可以每行只描述一个属性

p
{
    color:red;
    text-align:center;
}

CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以*/结束, 实例如下

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

CSS 的Id 和 Class

id 和 class 的选择

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 “class”：<.....id="..." class="...">

id 的选择

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“para1”:

#para1
{
    text-align:center;
    color:red;
}

提示：ID属性尽量以字母开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 的选择

class 选择器用于描述一组元素的样式，class 选择有别于id选择，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中

p.center {text-align:center;}

多个 class 选择器可以使用空格分开.

.center { text-align:center; }
.color { color:#ff0000; }

CSS的 创建

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

如何插入样式表
插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

提示：不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。）（是20px不是20 px）

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

style.css 文件样式代码如下：

h3 {
    color:blue;
}

实例

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>显示绿色，是内部样式</h3>
</body>

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，实例如下

<head>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <h3>显示蓝色，是外部样式</h3>
</body>

背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

  • 十六进制 - 如：“#ff0000”
  • RGB - 如：“rgb(255,0,0)”
  • 颜色名称 - 如：“red”

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

页面背景图片设置实例:

body {background-image:url('paper.gif');}

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:


body
{
background-image:url('gradient2.png');
}

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

背景图像- 设置定位与不平铺

请添加图片描述让背景图像不影响文本的排版
如果你不想让图像平铺，你可以使用 background-repeat 属性:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.

背景属性一览

标签描述
background简写属性，作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。

CSS 文本格式

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

一个网页的背景颜色是指在主体内的选择：

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

请添加图片描述对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}

也可以这样装饰文字：

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;

请添加图片描述不建议强调指出不是链接的文本，因为这常常混淆用户。

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

所有CSS文本属性

属性描述
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。

serif和sans-serif字体之间的区别

请添加图片描述
请添加图片描述在计算机屏幕上，sans-serif字体比serif字体容易阅读

CSS字型

在CSS中，有两种类型的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
  • 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
Generic family字体系列说明
SerifTimes New Roman
Georgia		Serif字体中字符在行的末端拥有额外的装饰
Sans-serifArial
Verdana		"Sans"是指无 - 这些字体在末端没有额外的装饰
MonospaceCourier New
Lucida Console		所有的等宽字符具有相同的宽度

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小

font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小：

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小

请添加图片描述如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）

第一篇教程完结。

HJZ713
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础（新手入门教程）
m0_61225117的博客
10-26 3514
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
CSS基础教程 -- 媒体查询屏幕适配
Angel_andy的博客
08-24 3863
响应式布局 Media Query 的使用方法 在上例中， 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可
HTML中的CSS超详细使用（附代码图文示例）【干货】
Jin_Xiang123的博客
12-15 1万+
本篇文章主要介绍HTML中的CSS详细使用（附代码图片示例）以及部分理论知识 为什么使用CSS： CSS（层叠样式表）是一种用来描述网页上元素样式的技术。使用CSS的主要原因包括以下几点： ①有效的传递页面信息 ②使用CSS美化网页使网页漂亮、美观、吸引用户 ③可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 ④具有良好的用户体验
HTML+CSS超详细讲解+超详细思维导图 超浅显易懂 复习、学习小助手
qq_45625194的博客
11-03 7043
HTML（结构） 1.文档声明 格式： <!doctype html> 作用： 便于浏览器识别其网页版本 2.注释 格式： < !-- – > 作用： 在网页中显示出来 提高可读性，便于编程人员阅读 注意： 不能在注释中嵌套注释 3.标签（元素） 01 根标签 格式： < html > < /html > 作用： 网页中所有内容都写在根标签里面 02 子标签 head标签 格式： < head > < /head > 作用
初识HTML(四)---CSS(超详细)
代码哈士奇的博客
11-07 1836
CSS cssCSS简介基础用法高级用法---选择器id选择器什么是idid选择器如何使用类选择器属性选择器引用方式HTML内引入外部导入 简介 简单来说css就是来控制元素样式的 w3school 手册 为什么要用css呢 样式重复以及代码看着难受等问题 如下图对比 实现此代码 一 <html> <head> <meta charset="utf-8"> <title></title> </head> <body
css基础--边框
m0_54510474的博客
05-20 1831
css基础，关于边框的一些美化操作，包括边框宽度、样式、颜色和圆角边框的设置等
HTML+CSS系列教程
Akgadis的博客
10-18 1994
两种编程语言，一般需要配合使用，是网站开发的基础语言。浏览器把代码解析后的样子就是我们看到的网站。< dl>:定义列表< dt>:定义专业术语或名词< dd>:对名词进行解释和描述（列表项需要添加标题和对标题进行描述的内容）eva。
HTML+CSS系列教程（第1—20课）
lxq13308302836的博客
10-20 2051
HTML+CSS系列教程（第1—20课）
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
html+css基础入门学习教程之CSS line-height 属性
html前端基础入门教程
03-02 1516
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 CSS height 属性 height 属性用以设置元素的高度，单位可以使用px，em等，通常用使用PX（像素）为html单位。这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。 设置段落的高度和宽度： p{ height:100px; width:100p...
DIV CSS基础教程-15页word资料.pdf
11-26
【标题】：“DIV CSS基础教程-15页word资料.pdf” 【描述】：“这份文档是关于DIV CSS的基础教程，详细介绍了DIV元素和CSS的概念、作用以及它们在网页设计中的优势和潜在问题。” 【标签】：“cs” 【内容】： 1...
HTML5+CSS3 Web前端设计基础教程-PPT.rar
06-22
这篇教程——"HTML5+CSS3 Web前端设计基础教程-PPT"，显然是一个旨在帮助初学者和进阶者理解这两种语言基本概念和实践应用的资源。 HTML5（超文本标记语言第五版）是网页内容的结构化标准，它增强了对多媒体的支持...
html_css_material-master.zip
11-22
在"html_css_material-master"中，你可能找到JavaScript基础教程，包括变量、数据类型、函数、条件语句、循环等。同时，JavaScript也可以与HTML和CSS结合，实现事件处理、DOM操作、Ajax异步通信等功能，让你的网站更...
前端 js html css 基础教程
08-17
本书为电子版,任何终端下阅读, 欢迎大家下载阅读~~~~~~
HTML5+CSS3网站设计基础教程 源代码.7z
11-14
这个"HTML5+CSS3网站设计基础教程 源代码.7z"压缩包包含了学习这两项技术的全套源代码，对于初学者来说是一份极其宝贵的资源。 HTML5是超文本标记语言的第五个版本，它在HTML4的基础上做了大量改进和扩展，以适应...
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 1036
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 689
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 370
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 363
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值