CSS基础学习教程（一）

已于 2023-03-16 14:10:57 修改
阅读量193 收藏 1
点赞数 1
分类专栏： html css 文章标签： css 学习 css3
于 2023-02-25 11:38:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54015136/article/details/129193819
版权
html 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
css
6 篇文章 0 订阅
订阅专栏

一、CSS基础教程

1.1 CSS介绍

CSS1 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。

定义：

  • CSS 指的是层叠样式表* (Cascading Style Sheets)；
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素；
  • CSS 节省了大量工作。它可以同时控制多张网页的布局；
  • 外部样式表存储在 CSS 文件中。

1.2 CSS语法

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

/* h1是选择器，color是属性，white是值，属性+值表示声明 */
h1 {color:white;}
  • 选择器指向您需要设置样式的 HTML 元素。
  • 声明块包含一条或多条用分号分隔的声明。
  • 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
  • 多条 CSS 声明用分号分隔，声明块用花括号括起来。

1.3 CSS选择器

  1. 元素选择器:根据元素名称来选择 HTML 元素。
p {
  text-align: center;
  color: red;
}
  1. id选择器:使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
#para1 {
  text-align: center;
  color: red;
}

在html中，id属性，这样运作：

<!--实例： -->
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>

注意：id 名称不能以数字开头。

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

在此例中，所有带有 class=“center” 的 HTML 元素将为红色且居中对齐：

/* 所有带有 class="center" 的 HTML 元素将为红色且居中对齐：*/
.center {
  text-align: center;
  color: red;
}

/* 只有具有 class="center" 的 <p> 元素会居中对齐：*/
p.center {
  text-align: center;
  color: red;
}
  1. CSS 通用选择器:通用选择器（*）选择页面上的所有的 HTML 元素。
* {
  text-align: center;
  color: blue;
}

5.分组选择器

h1, h2, p {
  text-align: center;
  color: red;
}

6.总结：

选择器例子例子描述
.class.intro选取所有 class=“intro” 的元素。
#id#firstname选取 id=“firstname” 的那个元素。
**选取所有元素。
elementp选取所有 < p> 元素。
element,element,…div, p选取所有 < div> 元素和所有 < p> 元素。

7.其他选择器
组合选择器 伪类选择器 伪元素选择器 属性选择器等知识的学习，请点击： 伪类（转载自w3school）

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

1.4 三种插入CSS样式表的方法

  1. 外部方式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  1. 外部 .css 文件不应包含任何 HTML 标签。
  2. 请勿在属性值和单位之间添加空格（例如 margin-left: 20 px ;）。正确的写法是：margin-left: 20px ;
  1. 内部样式:内部样式是在 head 部分的 < style> 元素中进行定义。
  2. 行内 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>
  • 如果内部样式是在链接到外部样式表之后定义的，显示内部样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
  • 不过，如果在链接到外部样式表之前定义了内部样式，显示外部样式表。
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  1. 层叠顺序
    页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
  • 行内样式（在 HTML 元素中）
  • 外部和内部样式表（在 head 部分）
  • 浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

1.5 CSS位置

position是css为某些元素提供定位的属性，它有五种常规取值。
其中：
width：表示元素的宽度。
height：表示元素的高度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

top：表示元素相对于顶部的距离。
left：表示元素相对于左边的距离。

  • 相对定位：当position取值为relative时，该元素为相对定位，相对自身位置定位，不会脱离文档流，可以使用z-index进行分层。它可以根据文档正常流动偏移相对于它本身top、bottom、right和left的值，偏移量不会影响其他元素的位置。
  • 绝对定位：当position取值为absolute元素是绝对定位，脱离文档流的布局，后面的元素会填补它空下来的位置，它的起始位置为最近的position值不是static的父元素，若没有则是以HTML为准，由top、bottom、left、right确定最终位置，可以使用z-index 进行分层。
  • 固定定位（笃定定位）：当position的取值为fixed时，该元素为固定定位，脱离文档流，它的起始起始位置相对于视口且是固定位置不随滚动条的滑动而滚动。一般像导航栏大多数会使用固定定位。
  • 粘性定位：当position取值为sticky时该元素为粘性定位，它也会脱离文档流，会在文档流中预留该元素的物理空间；它的相对偏移是相对于父标签而言，设置top等值只会在父标签中sticky。

1.6 CSS颜色

  1. 背景颜色 background - color
  2. 文本颜色 color
  3. 边框颜色
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>

4.其他设置颜色的方法，包括透明度

<!-- rgb(red, green, blue)，参数的范围在0-255-->
<!-- 
要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。
要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。
-->
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<!--
hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
-->
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<!--
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
-->
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

1.7 CSS背景

body{
/*背景颜色，背景图像（也可以单独添加到类选择器里面）*/
background-color: 
background-image: 

/*背景重复，参数有 repeat-x【水平重复】,repeat-y，no-repeat【只显示一次】*
background-repeat: 
/*背景是否固定：fixed（固定），scroll（滚动）*/
background-attachment:
/*背景位置，属性值示例：center top/top center */
background-position:
/*
opacity 属性指定元素的不透明度/透明度。
如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。
*/
}
  • 属性background-orign：当attachment不为fixed的时候有用。
值描述
padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。
  • 属性background-clip：
值描述
border-box背景被裁剪到边框盒。
padding-box背景被裁剪到内边距框。
content-box背景被裁剪到内容框。

1.8 CSS边框

border-style

<!DOCTYPE html>
<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>

border的其他属性，例如color，他的属性可以设置一到四个值（用于上边框、右边框、下边框和左边框），也就是顺时针方向。

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}

1.9 CSS的边距、盒模型和轮廓

  1. 外边距margin

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
具体请看：w3school

  1. 内边距padding

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。
若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

  1. 盒模型
  • 外边距margin
  • 边框border
  • 内边距padding
  • 元素element

提示：背景应用于由内容和内边距、边框组成的区域。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示 ：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
重要提示：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

  1. 轮廓outline
    轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

outline-offset属性：可以让轮廓偏移，也就是在边框和轮廓之间留出空白。

1.10 CSS文本格式

有以下主要属性：
color
bakcground-color
text-algin：文本对齐属性：左右或者居中

当 text-align 属性设置为 justify 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

text-decoration: none:通常用于从链接上删除下划线。

/*删除下划线*/
a {
  text-decoration: none;
}

/*新增上划线，删除线，下划线*/
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

white-space: nowrap用于阻止文本换行。
text-shadow：添加文字阴影。

h1 {
text-shadow: 2px 2px 5px red;
}

其他字符属性或者字符间距属性请点击此按钮跳转

属性描述
color设置文本颜色。
direction指定文本的方向 / 书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align指定文本的水平对齐方式。
text-decoration指定添加到文本的装饰效果。
text-indent指定文本块中首行的缩进。
text-shadow指定添加到文本的阴影效果。
text-transform控制文本的大小写。
text-overflow指定应如何向用户示意未显示的溢出内容。
unicode-bidi 与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align指定文本的垂直对齐方式。
white-space指定如何处理元素内的空白。
word-spacing设置单词间距。

1.11 CSS字体

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

提示：在计算机屏幕上，无衬线字体被认为比衬线字体更易于阅读。

font-family 属性用来设置文本的字体。
font-style属性设置字体的倾斜。
font-size属性设置字体的大小。

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

如果您不想使用 HTML 中的任何标准字体，则可以使用 Google Fonts API 向页面添加数百种其他字体。只需添加一个样式表链接并引用您选择的字体系列：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

所有 CSS 字体属性:

属性描述
font简写属性。在一条声明中设置所有字体属性。
font-family规定文本的字体系列（字体族）。
font-size规定文本的字体大小。
font-style规定文本的字体样式。
font-variant规定是否以小型大写字母的字体显示文本。
font-weight规定字体的粗细。

1.12 CSS的图标

向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。将指定的图标类的名称添加到任何行内 HTML 元素（如 < i> 或 < span>）。使用方法如下：

  • 如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 部分：
<!-- 添加到头部head-->
<script src="https://kit.fontawesome.com/yourcode.js"></script>
  • 如需使用 Bootstrap glyphicons，请在 HTML 页面的 部分内添加这行：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  • 如需使用 Google 图标，请在HTML页面的 部分中添加以下行：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

1.13 CSS的链接

链接可以使用任何 CSS 属性（例如·color、font-family、background 等）来设置样式。

四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时
/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

如果为多个链接状态设置样式，请遵循如下顺序规则：
(1) a:hover 必须 a:link 和 a:visited 之后
(2) a:active 必须在 a:hover 之后

好看的链接样式：

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

1.14 CSS的列表和表格

  1. 列表

在 HTML 中，列表主要有两种类型：

无序列表（< ul>）

  • 列表项用的是项目符号标记

有序列表（< ol>）

  • 列表项用的是数字或字母标记

而CSS的作用：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色

主要的属性：
list-style-type
list-style-image
list-style-position，用于定位列表标记的位置，有两个参数：

/* outside,让标记位于文本框的外面；inside位于文本框里面，占据文本位置*/
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

添加到 < ol> 或 < ul> 标记的任何样式都会影响整个列表，而添加到 < li> 标记的属性将影响各个列表项，列表的实际应用如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
  list-style-position: inside;
}

ul {
  background: #3399ff;
  padding: 20px;
  list-style-position: inside;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}
</style>
</head>
<body>

<h1>设置列表的颜色样式：</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>
  1. 表格

html里面，表格的标签有<table>、<tr>、<th>、<td>，具体请看
html中table标签、tr标签、th标签、td标签的基础知识(转载)

重点知道：HTML表格由table标签以及一个或多个tr、th或td标签组成：

  • table标签：定义一个表格
  • caption标签：定义表格标题，嵌套在<table>中
  • tr标签：定义表格中的一行，嵌套在<table>中
  • th标签：定义表格中的表头单元格，嵌套在<tr>中
  • td标签：定义表格中的数据单元格，嵌套在<tr>中

表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。

全宽表格
在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为<table>元素添加 width: 100%：

合并表格边框
请注意设置多标签的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。如需删除双边框，border-collapse 属性设置是否将表格边框折叠为单一边框。

表格内边距
如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：

th, td {
  padding: 15px;
  text-align: left;
}

水平分割线
向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线

th, td {
  border-bottom: 1px solid #ddd;
}

可悬停表格
在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

tr:hover {background-color: #f5f5f5;}

响应式表格
如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条；在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

总结

CSS表格属性
属性描述
{text-position:left}border简写属性。在一条声明中设置所有边框属性。
border-collapse规定是否应折叠表格边框。
border-spacing规定相邻单元格之间的边框的距离。
caption-side规定表格标题的位置。
empty-cells规定是否在表格中的空白单元格上显示边框和背景。
table-layout设置用于表格的布局算法。

二、未解决的问题

引号的作用2

  1. 也称级联样式表。 ↩︎

  2. 如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。 ↩︎

ʚ 王也 ɞ
关注
专栏目录
DIVCSS基础培训教程.ppt
05-13
【CSS核心基础】 在网页设计领域，CSS（Cascading Style Sheets）是不可或...通过学习和实践这些CSS基础知识，开发者能够构建符合WEB标准的、结构清晰、样式统一、加载快速的网站，同时提升网站的可访问性和可维护性。
CSS零基础快速入门（详细教程）
小杨的博客
05-20 7994
CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS还能够对网页中元素位置的排版进行像素级精确控制。
【CSS】入门级教学（超级细致版本）
懒羊羊的博客
03-20 2927
html+css CSS是用来修饰HTML内容的打个比方 HTML相当于你买了一间房子而CSS就相当于装修这间房子。HTML定义网页的结构,主要让页面的内容结构化、块状化 CSS控制 HTML的标签,定义所需要的样式，美化网页。 p{}是用来修改段落间距参数的，针对于换行的元素之间 CLASS .****意思是名为****的类这样的标签
css基础教程【学习笔记】，微信web开发者工具
最新发布
2401_84092360的博客
04-03 895
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span。网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。​ 在 CSS 中，可以根据选择器的类型把选择器分为***基础选择器***和***复合选择器***，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）后代选择器、子选择器、并集选择器、伪类选择器。
保姆级教程 CSS 知识点梳理大全，超详细！！！
2401_83916283的博客
03-29 896
相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相。所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型。使用display：inline；伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态。
网页制作css基础学习教程
06-09
这套Java基础视频教程详细讲解了什么是css 。层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅...
css 入门基础教程
09-25
【CSS入门基础】是针对初学者的一门教程，旨在帮助那些有一定HTML编写经验的人开始学习CSS。CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。通过...
css基础入门学习笔记详细教程
04-15
css入门学习笔记详细教程
HTML+css基础入门学习教程之CSS 相对定位
01-20
在HTML和CSS的世界里，定位是布局设计的关键要素之一，特别是对于创建...如果你是初学者，可以加入前端学习群，与志同道合的朋友一起交流，共同进步，那里有丰富的学习资源和互助解答，为你的HTML+CSS之旅提供支持。
CSS 零基础入门教程
qq_67140973的博客
03-18 927
CSS（Cascading Style Sheets）是一种用于描述网页表现的样式表语言。CSS可以静态地修饰网页，也可以与JavaScript等脚本语言结合，动态地修改网页中元素的样式。CSS能够精确控制网页中元素的位置和排版，支持各种字体和字号样式，并允许编辑网页对象和模型的样式。它使得网页内容与表现相分离，提高了网页的可读性和可维护性，同时也加快了网页的下载和加载速度。CSS可以应用于多种媒体，如屏幕、打印和移动设备等。
CSS入门 超详细
weixin_55816781的博客
04-12 7801
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
自学CSS基础教程（day5）
qq_59779414的博客
11-22 123
自学CSS基础教程第五天
CSS入门教程
打代码是一天，不打代码也是一天
04-04 3257
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
学习CSS3这一篇就够了
热门推荐
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
CSS学习笔记
weixin_33858249的博客
05-11 409
CSS学习笔记 一、CSS基础 1、CSS简介 层叠：一层一层的； 样式表：很多的属性和样式 CSS语法： <style> 选择器 { 属性名:属性值; 属性名:属性值; …… } </style> 2、CSS和HTML的结合方式 在HTML标签中的style属性...
【教程】CSS快速学习
风舞雪凌月的博客
06-10 599
【教程】css快速学习备注一、 备注 2021/6/6 时隔好久终于抽空写好了html的快速学习，那么接下来就是css了 一、
css基础学习1
weixin_47775987的博客
02-14 710
css介绍 层叠样式表用来美化页面的，讲表现与样式相分离，减少代码写作，提高浏览器加载速度 语法 1.行内样式(不建议使用) （把属性定义到标签里面） <h1 style="color:red></h1> 2.内嵌样式 <style> h1{c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值