CSS知识总结

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量237 收藏 1
点赞数
分类专栏： HTML 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46047285/article/details/108288161
版权

CSS知识总结

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

  1. CSS是什么？
  2. CSS怎么用？
  3. CSS选择器（重点+难点）
  4. 美化网页（文字、阴影、超链接、列表、渐变效果、）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效效果）

CSS语法

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS Id 和 Class

id 和 class 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id 选择器

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

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

class 选择器

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

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

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

CSS 创建

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

如何插入样式表

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

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

<head>
<style>
...
</style>
</head>
  • 内联样式(Inline style)
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
也叫行内样式
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

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

CSS背景

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

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

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

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

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

让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性

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

CSS 背景属性
Property	描述

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

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景</title>
    <!--页面的背景颜色使用在body的选择器中:-->
    <style>
        body{
            background-color: #b0c4de;
            background-image: url("https://img.alicdn.com/tfs/TB1qdRsv.Y1gK0jSZFCXXcwqXXa-2878-1590.png");

        }
        body{
            background-repeat: repeat-x;
            /*图像只在水平方向平铺 (repeat-x), 页面背景会更好些:*/
/*            如果你不想让图像平铺，你可以使用 background-repeat 属性:*/
            background-position: center;
        /*    可以利用 background-position 属性改变图像在背景中的位置:*/
        }

    </style>

</head>
<body>
<h1>CSS背景练习</h1>
<p>背景颜色</p>
<p>背景图像</p>
<p>背景图像-水平或垂直平铺</p>
<p>背景图像-设置定位与平铺</p>
<p>背景-简写属性</p>
<div> 在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

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

    背景颜色的简写属性为 "background":  </div>
</body>
</html>

CSS文本

所有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			设置字间距

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS文本</title>
    <style>
       /* body{
            color: antiquewhite;
        }*/
        h1{
            color: red;
            text-align: center;
        }
       h2{
           color: brown;
       }

       p.date{
           text-align: right;
       }
        p.main{
            text-align: justify;
            /*当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。*/
        }
        a{
            /*从设计的角度看 text-decoration属性主要是用来删除链接的下划线*/
            text-decoration: none;
        }
        p.lowercase{
            text-transform: lowercase;
        }
        p.uppercase{
            text-transform: uppercase;
        }
        p.capitalize{
            text-transform: capitalize;
        }
        p{
            text-indent: 40px;
        }
    </style>
</head>
<body>
<h1>CSS文本内容：</h1>
<h2>CSS文本练习：</h2>
    <p CLASS="lowercase">文本颜色RGB</p>
    <p class="uppercase">文本的对齐方式：当text-align设置为"justify"，每一行被展开为宽度相等,右外边距是对齐（如杂志和报纸）。</p>
    <p class="capitalize">文本修饰：hello world,text-decoration 属性用来设置或删除文本的装饰</p>
    <p>文本转换：可用于所有字句变成大写或小写字母，或每个单词的首字母大写。</p>

  <!-- 实例：
    p.uppercase {text-transform:uppercase;}
    p.lowercase {text-transform:lowercase;}
    p.capitalize {text-transform:capitalize;}-->

    <p>文本缩进</p>
<p class="date">2020 年 4 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p>点击链接到我的博客：<a href="https://blog.csdn.net/weixin_46047285">blog.csdn.net/weixin_46047285</a></p>
<!--    p {text-indent:50px;}-->

</body>
</html>

CSS字体

字体系列

ont-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 属性设置文本的大小。

设置字体大小像素：p {font-size:14px;}

用em来设置字体大小：1em的默认大小是16px。

使用百分比和em组合：设置 元素的默认字体大小的是百分比

body {font-size:100%;}
h1 {font-size:2.5em;}

所有CSS字体属性
Property			描述
font				在一个声明中设置所有的字体属性
font-family			指定文本的字体系列
font-size			指定文本的字体大小
font-style			指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight			指定字体的粗细。

CSS链接

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面
  • text-decoration 属性主要用于删除链接中的下划线
  • background-color 指定链接背景色

CSS列表样式

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>

所有的CSS列表属性

属性	描述
list-style	
简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type		设置列表项标志的类型。

菜鸟教程实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}

ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

</style>
</head>

<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

CSS表格

指定CSS表格边框，使用border属性。

为了显示一个表的单个边框，使用 border-collapse属性。

Width和height属性定义表格的宽度和高度

text-align属性设置水平对齐方式，向左，右，或中心

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性 padding

表格颜色：背景颜色background-color:green; 文本颜色 color:white;

设置表格标题位置：caption {caption-side:top;}

CSS 盒子模型(Box Model)

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

让我们自己算算：
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px

CSS表格边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

可以通过 border-width 属性为边框指定宽度

为边框指定宽度有两种方法：可以指定长度值;使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度

border-color属性用于设置边框的颜色，不设置默认黑色(还可以设置为透明的：border-color:transparent;)

**注意：** border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

<style>
p.none {border-style:none;}
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.hidden {border-style:hidden;}
</style>

边框单独设置各边：

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

CSS 边框属性

属性									描述
border				简写属性，用于把针对四个边的属性设置在一个声明。
border-style		用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width		简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color		简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom		简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left			简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right		简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top			简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

属性说明值CSS
outline在一个声明中设置所有的轮廓属性outline-color
outline-style
outline-width
inherit		2
outline-color设置轮廓的颜色color-name
hex-number
rgb-number
invert inherit		2
outline-style设置轮廓的样式none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit		2
outline-width设置轮廓的宽度thin
medium
thick
length
inherit		2

CSS margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。

margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

所有的CSS边距属性

属性描述
[margin]简写属性。在一个声明中设置所有外边距属性。
[margin-bottom]设置元素的下外边距。
[margin-left]设置元素的左外边距。
[margin-right]设置元素的右外边距。
[margin-top]设置元素的上外边距。

CSS padding（填充）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

CSS 分组 和 嵌套 选择器

分组选择器

在样式表中有很多具有相同样式的元素。

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔。

h1,h2,p
{
    color:green;
}

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
  • .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

CSS尺寸

所有CSS 尺寸 (Dimension)属性

属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

程序员小郑1024
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS入门教程
打代码是一天，不打代码也是一天
04-04 2930
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
CSS知识点总结
weixin_48494427的博客
03-16 2051
CSS知识点总结
CSS入门 超详细
weixin_55816781的博客
04-12 7155
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
学习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零基础快速入门（详细教程）
小杨的博客
05-20 6256
CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS还能够对网页中元素位置的排版进行像素级精确控制。
CSS详细教程
m0_58851911的博客
01-17 7630
一.css3概述 1.什么是css cascading style sheets 层叠 样式 表 2.作用 html：搭建网页的结构，承载页面的数据 css:美化页面，修饰标签(亚洲4大邪术) 3.css和html属性的使用原则 html的属性只对当前标签有效，没有可重用性，导致没有可维护性 css 具备一定的代码重用性，提高了可维护性 但是css没有把重用性做到极致。使用scss可以做到极致 ...
HTML.css知识总结.md
06-19
对于小白新手入手可借鉴，都是HTML+CSS基础 打好基础才会让代码写的轻松像云上游走，不费吹灰之力学好HTML+CSS
HTML+css知识总结(建议收藏）
05-09
一个页面的主要组成由结构（html5）表现（css）行为（JavaScript）组成， 今天学习的是以标签和路径为主的html5的内容。 lang语言：作用于提示浏览器编译 charset字符：用UTF-8为全球通用准没错。 骨架标签：html...
html+css知识点总结
06-24
html+css知识点总结
css知识总结
11-10
css知识总结，好辛苦才搞出来
CSS injection 知识总结
01-21
现代浏览器都已不允许在CSS中执行JavaScript了，以前的CSS注入可以利用JavaScript协议在 url() 、 [removed]) 中执行Javascript代码从而实现XSS。但是目前CSS注入在窃取数据方面仍然是非常有用的，下面分别来分析...
超详细的学习笔记：CSS基础（附代码示例）
lbcbjtlhmjq的博客
06-30 2712
CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查宝典就有一大推。所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。但是要提醒大家的是，不要完全依赖于在线文档。最基本的一些属性（比如字体样式、文本样式等）还是需要掌握并且熟练使用，我写这篇博客就是为了让大家更好地熟悉并运用CSS的常见属性。
css入门
Vincent_Dr_W的博客
04-10 331
什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 样式解决了一个很大的问题 HTML 标签原本被设计为用于定义文档内容，如下实例： &...
【Web开发】CSS教学(超详细,满满的干货)
smile_sundays的博客
03-17 3308
CSS(Cascading Style Sheet)，层叠样式表,用于控制页面的样式.CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果.能够做到页面的样式和结构分离.CSS可以理解为化妆术.对页面的展进行"化妆"CSS前->CSS修饰后。
css布局教程 — 这一篇足够了
qq_60754128的博客
11-11 3930
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
保姆级教程 CSS 知识点梳理大全，超详细！！！
2401_83916283的博客
03-29 743
相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相。所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型。使用display：inline；伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态。
CSS学习笔记
weixin_33858249的博客
05-11 402
CSS学习笔记 一、CSS基础 1、CSS简介 层叠：一层一层的； 样式表：很多的属性和样式 CSS语法： <style> 选择器 { 属性名:属性值; 属性名:属性值; …… } </style> 2、CSS和HTML的结合方式 在HTML标签中的style属性...
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1334
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
HTML/CSS基础与进阶知识总结
创建多级下拉菜单可以通过`<ul>`、`<li>`和CSS的伪类实现，如`:hover`来控制菜单项的展开与关闭。`<banner>`虽然不是标准的HTML5标签，但常用来表示网站的头部大图。 Photoshop在网页设计中用于切图和图像处理，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值