2021-06-20

最新推荐文章于 2024-08-31 09:24:27 发布

Ner_vou

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量118

点赞数 1

文章标签： css 网页设计

本文链接：https://blog.csdn.net/m0_53081484/article/details/118070813

版权

CSS学习总结

一、前言
- 1、简介
- 2、如何使用CSS
二、CSS语法
- 1、id选择器（前面有“#”）
- 2、class选择器（前面有“.”）
三、CSS样式表可进行的操作
四、总结

一、前言

我们如果想让页面变得有特色、美观，那么我们就可以使用css语言来达到我们的目的。经过一段时间的了解与学习，我对css语言有了一定的认知，下面是我对CSS学习的一个简短总结：

1、简介

CSS全称为Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言，CSS是用来美化网页，决定了如何呈现我们的内容。

2、如何使用CSS

外部样式表：是指在HTML文件的同一目录下新建一个样式表文件（后缀名为.css）
内部样式表：是指在HTML文件中的< head>标签下引入一个< style>标签，然后把css样式的代码放入其中即可
内联样式：是指直接将需要的样式放入所应用的元素中。

二、CSS语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。
选择器：id和class选择器

1、id选择器（前面有“#”）

#sky{
  color: blue;
}

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色。
由于元素的id值必须唯一，故，id选择器适用范围只有一个元素。

2、class选择器（前面有“.”）

.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。

三、CSS样式表可进行的操作

1、内容的属性

css 可以操作的内容属性包括颜色、尺寸大小以及排列形式。
1.颜色：可以设定前景或背景颜色

<!-- 颜色名称 -->
<h3 style="background-color:Orange;">Orange</h3>
<!-- 文本颜色 -->
<h3 style="color:Orange;">Hello World</h3>

或者采用RGB16进制值来设定颜色
2.尺寸
可以使用height和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
例如：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
  </body>
</html>

.example-1 {
  width: 100%;
  height: 200px;
}

3.对齐
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可
例如：

.example-1 {
  text-align: center;
}

2、css的布局

1）盒子模型

盒子模型是指HTML元素可以看做一个盒子，且该盒子由内容
content, 内边距 padding, 边框 border, 外边距 margin构成的。如下图：
在这里插入图片描述
各部分构成：
Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

2）其他

css还可以对页面的边框与边距、元素的定位（position）、溢出（overflow）、浮动（float）、不透明度(opacity)等进行合理的调节，以达到期望的结果。

四、总结

通过学习CSS，类比于HTML我们可以将CSS比喻成装修房子的材料，我了解到如何将网页设置的美观、耐看。并且也了解到CSS的多样性，想要掌握还需要花费更多的时间继续学习。

Ner_vou

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
2021-06-20

CSS学习总结一、前言1、简介2、如何使用CSS二、CSS语法1、id选择器（前面有“#”）2、class选择器（前面有“.”）三、CSS样式表可进行的操作1、内容的属性2、css的布局1）盒子模型2）其他四、总结一、前言我们如果想让页面变得有特色、美观，那么我们就可以使用css语言来达到我们的目的。经过一段时间的了解与学习，我对css语言有了一定的认知，下面是我对CSS学习的一个简短总结：1、简介CSS全称为Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言
复制链接

扫一扫