devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【CSS】入门级教学（超级细致版本）_css入门教程

作者：Monodyee | 2024-02-25 13:34:24

赞

踩

css入门教程

 

学习目录

·1.CSS简介及三种方法的理解

·2.CSS语法规则

·3.选择器

·4.颜色

·5.背景

·6.边框

·7.边距

·8.框模型

·9.轮廓

·10.文本

·11.图标/链接

·12.表格


1.HTML+CSS


CSS(Cascading Style Sheets) 是一种描述 HTML 文档样式的语言。
打个比方，HTML相当于你买了一间房子而CSS就相当于装修这间房子。HTML定义网页的结构,主要让页面的内容结构化、块状化 CSS控制 HTML的标签,定义所需要的样式，美化网页。

CSS有三种使用方法：

外部CSS：把写好的样式放在同级目录的另一个文件夹里，使用时只需要写一个link标签引入在编辑器里即可，他真正意义上做到了结构与样式完全分离。可以控制根目录里的所有页面。

内部CSS：主要位于<head>部分，利用<style>标签定义，可以说他做到了结构与样式分离但也没完全分离。可以控制一个页面里的多个元素。

行内CSS：作用在一行里，它通过标签的style属性来设置元素样式。注意这里不是style标签！可以控制一个页面里的一行元素。

2.CSS语法规则：

 精美的网页往往是赋予元素不同的属性得到的。

3.选择器

以下是常见几种选择器写法，选择器的种类有很多以后慢慢补充

  1. h1 {
  2.   color: red; //作用于标题<h1>元素
  3. }
  4. p {
  5.   color: red; //作用于<p>元素
  6. }
  7. * {
  8.   color: red; //通用选择器作用于整个页面
  9. }
  10. #xx {
  11.   color: red; //id选择器作用于<id="xx".......>的元素
  12. }
  13. .xx {
  14.   color: red; //类选择器作用于<class="xx"......>的元素,选择有特定 class 属性的 HTML 元素
  15. }
  16. body {
  17.   color: red; //body选择器作用于页面body部分
  18. }

*特别说明

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。id 名称不能以数字开头。

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

CSS中注释方法是：/*........*/（用来解释代码）


4.颜色

下面介绍两种编辑指定元素颜色的写法

  1. p{
  2.  color: red;
  3. }
  4. <p style="color:blue;"></p>
  5.

此外还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色，这里就不一一列举了。

5.背景

下面介绍编辑背景颜色的写法

  1. h1 {
  2.   background-color: green;
  3. }
  4. p {
  5.   background-color: yellow;
  6. }

<h1>、<p>元素将拥有不同的背景色。

背景图片

下面介绍引入背景图片的写法

  1. body {
  2.   background-image: url("******.png");
  3. }

背景属性

下面我们列举几种常见的背景属性写法

  1. body {
  2.   background-image: url("1.png");
  3.   background-repeat: no-repeat;
  4.   background-position: right top;
  5.   background-attachment: fixed;
  6.   background-size:20px;
  7. }

上述代码起到的作用是引入一个背景图片（image）--背景图片不用重复出现（repeat）--背景图片的位置在右上角（position）--背景图片是固定的（attachment）--背景图片的大小（size）是20px（衡量大小的单位还有pt、cm、em）

不同的属性对应的属性值有很多，并且实现的样式也是丰富多彩，例如repeat属性还有repeat-x,repeat-y等属性值，这里就不一 一列举。

背景属性简写（高效写代码的必修课）

  1. body {
  2.   background: red url("1.png") no-repeat right top;
  3. }

基本上所有的属性都可以类似于这样的简写，后面的就不一一列举了。


6.边框

下面我们介绍边框简单属性的写法

  1. p{
  2.   border-style: solid;
  3.   border-width: 5px;
  4.   border-color: red;
  5. }

上述代码实现的作用是 边框类型（style）是solid--边框宽度（width）是5px--边框颜色是红色

*补充（圆角边框）-radius

  1. p {
  2.   border: 2px solid red;
  3.   border-radius: 5px;
  4. }

通过调节数值来改变框角的弧度 。

同样边框也有很多属性值并且可以简写感兴趣的可以自行查阅一下。

7.边距

margin（指定外边距）可以理解为为元素创造外部空间。

下面我们介绍设置外边距的写法

  1. p {
  2.   margin: 25px;
  3. }

margin-top，margin-left等等可以定义四个方向的外边距，上述的写法是默认四个方向的外边距是25px。

*可以将 margin 属性设置为 auto，以使元素在其空间里水平居中。

  1. p{
  2.  margin: auto;
  3. }

外边距深入理解的方法

*外边距合并画两个合并的色块 代码如下

  1. #d1 {
  2.   width:100px;
  3.   height:100px;
  4.   margin-top:0px;
  5.   margin-bottom:0px;
  6.   background-color:red;
  7. }
  8.  
  9. #d2 {
  10.   width:100px;
  11.   height:100px;
  12.   margin-top:0px;
  13.   background-color:blue;
  14. }

我的理解是：邻近的两个元素的相邻边所对应的属性的属性值都为0那麽这两个元素可以合并。

如图所示

padding（指定内边距）可以理解为为元素创造内部空间。

下面我们列举设置内边距的写法

  1. div {
  2.   padding: 25px;
  3. }

它的性质和margin类似就不做过多解释了。

8.框模型

框模型实际上就是内外边距值共同作用的效果图在网页设计中非常常见

  1. div {
  2.   background-color: lightgrey;
  3.   width: 300px;
  4.   border: 15px solid green;
  5.   padding: 50px;
  6.   margin: 20px;
  7. }

下面展示一下框模型效果图

 9.轮廓

下面介绍一下轮廓属性的写法

  1. p{
  2.   outline-style: dotted;
  3. }

 同样轮廓的属性和属性值也有很多例如以下常见属性

  • outline-style
  • outline-color
  • outline-width
  • outline-offset

10.文本

下面展示实现设置字体颜色的写法

  1. p {
  2.   color: blue;
  3. }

这样我们将文字设置成了蓝色

下面展示实现文本对齐的写法

  1. p {
  2.   text-align: left;
  3. }

这样我们将文本内容左对齐

下面展示实现文本装饰的写法

  1. p {
  2.   text-decoration: overline;
  3. }

这样我们在文本内容上方添加一条横线

下面展示实现文本间距以及格式的写法

首行缩进（数值都可以自行设定）

  1. p {
  2.   text-indent: 50px;
  3. }

字母间距

  1. h1 {
  2.   letter-spacing: 3px;
  3. }

行高

  1. p.small {
  2.   line-height: 0.8;
  3. }

字间距

  1. h1 {
  2.   word-spacing: 10px;
  3. }

下面我们展示实现文本阴影效果的写法

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

这四个值分别代表：水平阴影--垂直阴影--模糊效果--颜色

对于文本字体，种类太多了这里就一笔带过了，以下实现了三段文字三种字体

  1. p1 {
  2.   font-family: "Times New Roman", Times, serif;
  3. }
  4.  
  5. p2 {
  6.   font-family: Arial, Helvetica, sans-serif;
  7. }
  8.  
  9. p3 {
  10.   font-family: "Lucida Console", "Courier New", monospace;
  11. }

但要注意的是：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

下面展示设置文本字体大小的方法(这是很重要的)

  1. p {
  2.   font-size: 40px;
  3. }

11.图标/链接

可缩放矢量图标获取网址:https://fontawesome.dashgame.com/下载安装到网页文件目录即可调用

 12.表格

下面介绍设置表格的写法

由于写一个表格所需的元素很多就不展示部分代码了

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, th, td {
  6.   border: 1px solid black;
  7. }
  8.  
  9. table {
  10.   width: 100%;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15.  
  16. <h1>表格</h1>
  17.  
  18. <table>
  19.   <tr>
  20.     <th>name</th>
  21.     <th>sexy</th>
  22.   </tr>
  23.   <tr>
  24.     <td>Jeff</td>
  25.     <td>men</td>
  26.   </tr>
  27.   <tr>
  28.     <td>Paul</td>
  29.     <td>men</td>
  30.   </tr>
  31. </table>
  32.  
  33. </body>
  34. </html>

呈现效果如图

 表格的属性还有很多例如border-collapse，text-align，vertical-align，border-bottom......都是通过属性的交互实现各种精美的表格出来。

 以上就是CSS的一些基础知识

码字不易，有缘看到的家人们点赞收藏支持一下吧！我是你们最爱的懒羊羊~~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/141081
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号