CSS学习总结

最新推荐文章于 2024-04-26 16:34:13 发布
最新推荐文章于 2024-04-26 16:34:13 发布
阅读量162 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ii231/article/details/117328926
版权

CSS学习总结

本文通过学习 qige.io 教学网完成

一.CSS简介

CSS（Cascading Style Sheets）,意思为级联样式表，适用于在网页中对HTML编写的页面内容进行设计呈现。

例如，整个页面的布局，元素的位置，距离，颜色，大小，是否显示，是否浮动等等。

CSS的出现解决了我们之前HTML中网页样式的问题，并且现在内容HTML与样式CSS代码是相分离的。

二.CSS如何在HTML中运行

其原理方法就是在html的头部代码中，增加所编写的CSS文件的位置：

<head>
    <meta charset="utf-8">
    <title>HTML5</title>
    <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
    <link rel="stylesheet" href="./css/CSS的文件名.css">
</head>

其中上方的herf后面就是跟的CSS相对于html的路径

最好放在一个大的文件夹中，方便寻找

还有内联样式和内部样式表的方法使页面生效

其中，内部样式表只有页面的样式规则较少时可采用这种方式

内联样式不够灵活，完全将内容和样式合在一起

如果某元素在外部、内部和内联样式中都被设置了，他们的优先级从高到低是：

1.内联样式
2.内部样式表或外部样式表
3.浏览器缺省样式

总的来说，就是谁更近，就谁优先

在2.中，内部样式和外部样式被排在了一起，内部样式和外部样式是具有相同的优先级的，就看谁出现的位置靠后，谁优先。

如下面的代码，文字肯定要显示成黄色，而不是绿色。因为css文件在style样式定义后面引入的。如果放到前边，则会显示成内部样式定义的绿色。

CSS:

p{
font-size: 20px;
color:yellow;
background: black;

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
   <style>
p{
color:green;
background:black;
}
</style>
<link rel="stylesheet" href="./css/123.css">
</head>

<body>
<p>test text!</p>
</body>

</html>

显示效果如下：
在这里插入图片描述

二.CSS语法

一条CSS样式规则由两个主要部分构成：
1.选择器
2.以{ }构成的声明集合

h1 {color :blue; font-size: 12px;}

上文中，h1为选择器，后面冒号前的color和font-size为属性，冒号后的blue和12px为属性的值

整条规则表明，页面中所有一级标题都显示为蓝色，字体大小为12像数

选择器

选择器用于在一个有众多元素的页面上，找到需要应用这个样式的对象

有 id 和 class 以及前面提到的元素选择器等

id选择器

在css文件中：

/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}
#forest {
    color: green;
}

该句的意思为在sky这个元素中，颜色呈现为蓝色,forest这个元素呈现为绿色

html文件中：

/* 注意：id选择器前有 # 号。 */
<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>

效果如下：

在这里插入图片描述
class选择器

CSS：

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

HTML:

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

显示效果如下：

在这里插入图片描述可以看到，元素的class值可以定义多个,也可以重复

四.颜色与尺寸的设定

1.颜色

我们可以在代码中，使用颜色名称，也可以使用颜色RGB16进制，来设置前景或者背景颜色

使用颜色名称的方式：

<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>

显示效果：
在这里插入图片描述使用RGB颜色值名称的方式：

<!-- 颜色名称 -->
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>

效果如下：
在这里插入图片描述文本附上颜色后：

<!-- 颜色名称 -->
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>

效果如下：
在这里插入图片描述

2.尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等

HTML:

    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>

CSS:

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

效果图如下：

在这里插入图片描述

五.盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由如下元素构成的

1.内容 content
2.内边距 padding
3.边框 border
4.外边距 margin

方位图如下图所示：
在这里插入图片描述其中：

· Content 盒子的内容，如文本、图片等
· Padding 填充，也叫内边距，即内容和边框之间的区域
· Border 边框，默认不显示
· Margin 外边距，边框以外与其它元素的区域

HTML:

<div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>

CSS:

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
.box2 {
  height: 300px;
  width: 300px;
  background-color:#004d61;
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;
  margin: 25px;
}

效果图如下：
在这里插入图片描述可以看到，在CSS中border，padding，margin的设置不影响内部文本的位置

在图片位置选择检查，查看样式的设置
在这里插入图片描述
框图高度的计算则为内容长度+边框高度+内边距长度+外边距长度

六.边框与边距

边框

HTML:

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>

CSS:

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

效果如下：
在这里插入图片描述在CSS中通过

border（全框）
border-bottom(下边框)
border-radius(圆角全框)
border-left(左边界)

实现了如图所示的效果

边距

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

如上所示，内边距有如上设置方式，同理，外边距与此类似

简写时的顺序为上，右，下，左，或记为顺时针方向

七.定位position

position属性用于对元素进行定位。

该属性有以下一些值：

· static 静态
· relative 相对
· fixed 固定
· absolute 绝对

1.static

设置为静态定位position: static;

这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。

即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

2.relative

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移

HTML:

<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>

CSS:

.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

效果如下：
在这里插入图片描述图中的文本距离左边60px,据上边40px的相对位置

3.fixed

设置为固定定位position: fixed;，

上下左右拖动浏览器的滚动条这将使得元素固定不动。

此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

如下的代码将会在浏览器右下角固定放置一个按钮元素：

HTML:

<div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
<div class="example-fixed">这个按钮是固定的</div>

CSS：

.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

在这里插入图片描述出现了如图样式，并且右下角的按钮会一直在那个位置，不管怎么滚动鼠标滑轮

4.absolute

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。

如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。

其定位相较于上述的fixd，仍是相对的，不过是相对最近的父元素

HTML:

<div class="example-relative">这是父元素，有 relative 定位属性
  <div class="example-absolute">
    这是子元素，有 absolute 定位属性
  </div>
</div>

CSS：

.example-relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
  position: absolute;
  top: 80px;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);
}

效果如下：
在这里插入图片描述可以看到relative是相对于整个页面的，而absolute是相对于它的父元素来定位的

八.溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。

溢出属性有一下几个值：

· visible 默认值，溢出部分不被裁剪，在区域外面显示
· hidden 裁剪溢出部分且不可见
· scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
· auto 裁剪溢出部分，视情况提供滚动条

使用以下代码来验证：
HTML:

<div class="example-overflow-scroll-y">You can use the overflow property when you want to have better control of the
    layout. The overflow property specifies what happens if content overflows an element's box.
</div>

CSS:

.example-overflow-scroll-y {
  width: 200px;
  height: 100px;
  background-color: #eee;
  overflow-y: scroll;
}

效果如下
在这里插入图片描述多余的文字需要通过scorll 滚动的方式才能够看完

hidden模式如下：
在这里插入图片描述被遮挡的部分无法看到

九.浮动

在一个区域，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。

我们常用这种样式来使图像和文本进行合理布局，例如左边是图像，右边是介绍图像的文字

<html>
<head>
  <style>
    .example-float-left {
      float: left;
    }
  </style>
</head>
<body>
  <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
  corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
  modi nam vero!</p>
</body>
</html>

得到如下形式
在这里插入图片描述实现了左边是图，右边是文字的形式

而一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

运用同样的设置方式，图片也可以水平依次显示
在这里插入图片描述

十.不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。

值在[0.0～1.0]之间，值越低，透明度越高。

<html>
<head>
<style>
    img {
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    .opacity-2 {
      opacity: 0.2;
    }
    .opacity-5 {
      opacity: 0.5;
    }
    .opacity-10 {
      opacity: 1;
    }
  </style>
</head>
<body>
    <img class="opacity-2" src="./img/123.jpg">
    <img class="opacity-5" src="./img/123.jpg">
    <img class="opacity-10" src="./img/123.jpg">
</body>
</html>

效果图如下：
在这里插入图片描述

十一.组合选择器

CSS有三种选择器：元素、id 和 class ，他们可以进行相互组合

下面我们介绍两种组合选择器

1.后代选择器

以空格作为分隔，如：.xixi p 代表在div元素内有**.xixi**这种类的所有元素。

<html>
<head>
  <style>
    .xixi p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="xixi">
    <p>Paragraph 1 in the div .xixi.</p>
    <p>Paragraph 2 in the div .xixi>.</p>
    <span>
        <p>Paragraph 3 in the div .xixi.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .xixi.</p>
  <p>Paragraph 5. Not in a div .xixi.</p>
</body>
</html>

效果如下：
在这里插入图片描述段落1、2、3都将有黄色的背景，而段落4、5没有

2.子选择器

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接 p 元素。

<html>
<head>
  <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

在这里插入图片描述虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

当两个选择器用**，**分隔时，第三行也会被选择

十二.伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。

它可以满足：

· 鼠标移到某元素上变换背景颜色
· 超链接访问前后访问后样式不同
· 离开必须填写的输入框时出现红色的外框进行警示
· 保证段落的第一行加粗，其它正常

等等功能

语法如下：

CSS:

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element 
{
  property:value;
}

以下是常用的伪类/伪元素的简单使用：

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */

十三. 总结

通过对CSS的各个方面的学习了解，知道了它能够对于html产生巨大的影响，帮助去美化网页。

和html一样，上手比较快，但是想要用好或者精通却不见得件易事，网页设计也的确是一门有深度的学问。

但通过本次的学习，已经初步掌握了CSS的设计方式，在以后对网页更加深入的学习过程中，一定会更加有动力。

ii231
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css个人小结
qq_18812163的博客
07-11 196
CSS个人总结 1.css用途 css全称Cascading Style Sheets，是为了美化html界面。通过选择器选中对应的盒子，从而对其美化，布局 css引入方法 css引入分三种 1： <head> <style> 。。。。。。 </style> </head> 2： <head> <link rel="stylesheet" href="./xxxx.css"> </head&gt
HTML+CSS学习总结
weixin_53351919的博客
06-26 2635
html+css学习总结
HTML&CSS学习总结
autismhealer的博客
07-09 887
这学期新学习
HTML & CSS 学习总结
qq_58804208的博客
07-09 403
个人学习html和css的总结
html与css学习总结
06-17
html与css学习总结
CSS学习总结.docx
03-17
CSS学习总结.docxCSS学习总结.docxCSS学习总结.docx
CSS使用学习总结
10-30
在分配ID和类名时，尽可能保持与表现形式无关，例如contleft有可能以后希望出现在右边。
CSS 网页布局（详解网页的布局构造）
百赢出品，必属精品
04-26 1142
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 303
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 670
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
Taro +vue3 中实现全局颜色css变量的设置和使用
最新发布
lele66688888的博客
04-26 405
在其他的web端框架 以及uni-app 等移动端框架中 我感觉也是这样使用的。在行内使用 直接是 字符串就行了 不用使用模板字符串 变量 因为本来就不是变量。这个主题色 一般可以这样总定义的 方便我们随时可以 修改前端的主题颜色。当我们现在需要弄一个随时修改的页面颜色主题色。我们在这个里面 设置一个root 全局样式。这样在全局我们就可以使用这个css 变量。一般有一个app.less 文件。我使用的是 Taro 框架。行内中书写 全局变量css。我们直接把颜色 替换为。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1015
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
vue echarts折线图 折线堆积图和折线面积图
Z18834071903的博客
04-26 330
vue echarts折线图 折线堆积图和折线面积图
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1311
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
CSS文本样式
qq_41807399的博客
04-23 438
CSS中使用text-align属性来定义文本的水平的对其方式。left：左对齐right：右对齐center：居中对齐justify：两端对齐将块状元水平居中需要使用margin属性，将左右两边都设置成自动时，块状元素会自动居中。CSS使用vertical-align属性定义文本的垂直对齐问题auto属性值根据layout-flow属性值定义对齐对象的内容baseline：表示对象内容与基线对齐sub表示垂直对齐文本的下标super表示垂直对齐文本的上标。
PostCss 概述
宁夏前端工程师，马卫斌，wx：1457508895
04-23 475
PostCSS 通过其灵活的插件架构，将 CSS 处理能力从单纯的样式编写扩展到了代码验证、现代化、优化等多个层面。它作为一个高度可定制的中间层，能够无缝衔接现有工作流，帮助开发者编写更高效、更易于维护、更具备前瞻性的 CSS 代码，同时确保了跨浏览器的兼容性。
css设置子元素在父元素中水平垂直居中
qq_39454432的博客
04-23 420
css设置子元素在父元素中水平垂直居中的方法
feedback css
07-09
通过与其他开发人员分享和交流自己的CSS代码和解决方案，可以相互学习和提高。这也可以促进开发人员之间的合作和创新。CSS的发展也需要有专门的平台或者社区，让开发人员能够互相分享他们的创意和解决方案，并通过...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值