CSS 教程

最新推荐文章于 2024-07-15 15:13:08 发布
最新推荐文章于 2024-07-15 15:13:08 发布
阅读量251 收藏 1
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75396444/article/details/130205941
版权

什么是 CSS？

  • CSS 指的是层叠样式表* (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素

CSS 语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

CSS 选择器

CSS 元素选择器

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

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

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

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

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

CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
  text-align: center;
  color: blue;
}

CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

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

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

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

如何添加 CSS

若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。外部 CSS

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

内部 CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

多个样式表

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式

CSS 注释

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束：

/* 这是一条单行注释 */
p {
  color: red;
}

从 HTML 教程中，您学习到可以使用 <!--...--> 语法在 HTML 源代码中添加注释。

CSS 颜色

<html>
<body>

<h1 style="background-color:Tomato;">番茄色</h1>
<h1 style="background-color:Orange;">橙色</h1>
<h1 style="background-color:DodgerBlue;">道奇蓝</h1>
<h1 style="background-color:MediumSeaGreen;">中海绿色</h1>
<h1 style="background-color:Gray;">灰色</h1>
<h1 style="background-color:SlateBlue;">板岩蓝</h1>
<h1 style="background-color:Violet;">紫色</h1>
<h1 style="background-color:LightGray;">浅灰</h1>

</body>
</html>

CSS 文本颜色

<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

</body>
</html>

CSS 边框颜色

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS 颜色值

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSS RGB 颜色

RGB 值

在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：

rgb(red, green, blue)

<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>您可通过使用 RGBA 颜色值来生成透明色。</p>

</body>
</html>

CSS HEX 颜色

<html>
<body>

<h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1>

<p>通过对红色，绿色和蓝色使用相等的值，您将获得不同的灰阶。</p>

</body>
</html>

CSS HSL 颜色

<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

<p>您可使用 HSLA 颜色值生成透明色。</p>

</body>
</html>

CSS 背景

CSS background-color：属性指定元素的背景色

body {
  background-color: lightblue;
}

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

div {
  background-color: green;
  opacity: 0.3;
}

 使用 RGBA 的透明度

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

 background-image 属性指定用作元素背景的图像。

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

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

body {
  background-image: url("gradient_bg.png");
}

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

如需垂直重复图像，请设置 background-repeat: repeat-y;

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

CSS background-position

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

CSS 背景附着

CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

CSS background - 简写属性

CSS 边框

CSS 边框样式

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h1>border-style 属性</h1>

<p>此属性规定要显示的边框类型：</p>

<p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>

</body>
</html>

CSS 边框宽度

border-width 属性指定四个边框的宽度。

<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}
</style>
</head>
<body>

<h1>border-width 属性</h1>

<p>此属性规定四条边框的宽度：</p>

<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p class="four">一些文本。</p>
<p class="five">一些文本。</p>
<p class="six">一些文本。</p>

<p><b>注释：</b>border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。</p>

</body>
</html>

特定边的宽度

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上、下边框 5 像素，左、右边框 20 像素 */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上、下边框 20 像素，左、右边框 5 像素 */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上 25 像素、右 10 像素、下 4 像素、左 35 像素 */
}
</style>
</head>
<body>

<h1>border-width 属性</h1>

<p>border-width 属性可接受一到四个值（依次对应上、右、下、左边框）：</p>

<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>

</body>
</html>

CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

特定边框的颜色

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
</style>
</head>
<body>

<h1>border-color 属性</h1>

<p>border-color 属性可接受一到四个值（依次对应上、右、下、左边框）：</p>

<p class="one">多色的实线边框</p>

</body>
</html>

HEX 值

边框的颜色也可以使用十六进制值（HEX）来指定：

p.one {
  border-style: solid;
  border-color: #ff0000; /* 红色 */
}

RGB 值

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* 红色 */
}

HSL 值

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* 红色 */
}

CSS 边框各边

CSS 边框 - 单独的边

<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-sty
最低0.47元/天 解锁文章
2201_75396444
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端Html5（21）
weixin_64909133的博客
01-13 395
1.表格table </head> <body> <!-- 表格标签自带的非css属性 --> <!-- width="500" 表格的宽 --> <!-- height="400" 表格的高 --> <!-- border="1" 表格的边框 --> <!-- bgcolor="pink" 表格的背景色 --> <!-- bordercolor="red" 表格的边框颜色 --> <!-
使用jQuery点击DIV，修改第二个p元素的背景色为"orange"
weixin_43424506的博客
10-27 959
点击DIV，修改第二个p元素的背景色为"orange" 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ ...
三种选择器改变元素的颜色
wangsong97的博客
10-27 997
我这里写了三种最简单的选择器 分别是 id选择器 元素选择器 类选择器 更多的选择器可以去api 上找 当然 想要api的可以私信我呦 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery.js"></script> &l...
使用ID选择器来声明样式
qq_37499398的博客
05-03 2256
Use an ID Attribute to Style an Element和类选择器一样，你也可以使用ID选择器来声明样式。声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。：#cat-photo-element {  background-color: green;}注意：在你的 style 元素内部，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 #...
CSS 基础教程：CSS 教程:什么是 CSS？
王建的博客
07-11 3719
CSS 教程 CSS 是一种描述 HTML 文档样式的语言。 CSS 描述应该如何显示 HTML 元素。 本教程将从零起点的基础教程开始，一直到 CSS3 高级教程，为您提供全面系统地讲解。 每一章中的实例 CSS 实例 body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } 什么是
CSS详细教程
m0_58851911的博客
01-17 7618
一.css3概述 1.什么是css cascading style sheets 层叠 样式 表 2.作用 html：搭建网页的结构，承载页面的数据 css:美化页面，修饰标签(亚洲4大邪术) 3.css和html属性的使用原则 html的属性只对当前标签有效，没有可重用性，导致没有可维护性 css 具备一定的代码重用性，提高了可维护性 但是css没有把重用性做到极致。使用scss可以做到极致 ...
CSS教程--动画
小马哥的博客
02-25 2309
CSS
CSS教程详解
泰斗贤若如的博客
05-11 4204
CSS学习笔记 一、CSS基础 1、CSS简介 层叠：一层一层的； 样式表：很多的属性和样式 CSS语法： <style> 选择器 { 属性名:属性值; 属性名:属性值; …… } </style>...
怎样给div加css,div加css教程
weixin_36410516的博客
08-03 1290
div加css教程[2021-02-17 12:20:02]简介:php去除nbsp的方法：首先创建一个PHP代码示例文件；然后通过“preg_replace("/(\s|\&nbsp\;|　|\xc2\xa0)/", " ", strip_tags($val));”方法去除所有nbsp即可。推荐：《PHP视频教可以添加表格特性。(推荐教程：CSS教程)父级元素添加属性 displa...
tailwindcss使用教程
weixin_52020362的博客
09-20 1505
Tailwind使用
css.rar_css 教程
09-14
CSS教程是初学者掌握网页设计和前端开发的重要步骤。本“css.rar”压缩包提供了一个基础的CSS教程，适合对网络编程感兴趣的人群学习。 首先，我们从“css.pdf”这个文件名推测，这可能是一个详细的CSS指南或教程...
css教程
09-15
CSS基础教程 （css教程.pdf）
css教程2016
12-17
css学习资料 Css3 教程前端开发必备
CSS2.0_CSS教程_
10-03
CSS样式表中文手册　本手册针对的是已有一定网页设计制作经验的读者。其目的是提供完整清晰的样式表内容的快速索引及进阶帮助。所以对于网页制作和样式表的基础知识，仅简单介绍，恕不赘述。 手册提供了完整的 CSS...
css教程 css和document
10-30
CSS教程和Document页面之间的联系 CSS（Cascading Style Sheets）是一种用于描述HTML文档样式的语言，它可以控制网页的布局、颜色、字体、背景图片等视觉效果。CSS能够将HTML文档的内容和样式分离，使得网页的维护...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2829
title>充电效果
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 310
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 534
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
最新发布
艾恩小灰灰的博客
07-15 148
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
CSS教程
11-03
本教程是关于CSS的完全教程，提供了下载链接以及交流讨论链接。在本教程中，你将学习如何使用Dreamweaver4这一网页编辑工具来添加CSS样式表，使得网页制作变得更加简单和便捷。这个教程分为两个部分：前四章是关于...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值