通信网络软件学习&# 初学者学习css快速导引

热爱生活的技术控

于 2021-04-06 17:26:51 发布

阅读量158

点赞数

分类专栏：笔记文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/nsnsnbabsb/article/details/115456002

版权

笔记专栏收录该内容

36 篇文章 7 订阅

订阅专栏

通信网络软件学习&# 初学者学习HTML快速导引

一.序言
- CSS简介
二.学习开始
三.结语

一.序言

CSS简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
万维网联盟 W3C（World Wide Web Consortium）意识到这个问题，于1997年推出 CSS 1.0（当前最新的版本是 CSS3），正式推动了内容（HTML）和表现（CSS）的分离，人们开始可以把所有的布局和样式代码从 HTML 中移除放入到 CSS 中。

CSS 入门极其容易，但要完全掌握及合理的应用则比较困难。

二.学习开始

1. 学习工具

VS Code（推荐开发软件）
推荐使用VS Code，微软推出的开源文本编辑器，异常的强大，请官网下载（ VS Code 最新版）安装。
运行该软件后，点击软件界面左侧第五个图标即可进行插件安装。推荐安装以下插件：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。

链接: vscode.

配置完成之后便可以开发
运行code后，请注意在File -> Auto Save 选中，如此code将自动保存我们的代码

在这里插入图片描述
我们要新建一个文件夹存放工程文件（要求英文）

2.CSS知识初步

1）CSS语法规则

1.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述
选择器通常是您需要改变样式的HTML元素。

id 选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置选择器，css中id选择器以‘#’来定义。
以下的样式规则应用于元素属性 id=“para1”:

     <p id="para1">Hello css</p>

注意：id属性不要以数字开头，数字开头的id在Mozilla/Firefox浏览器中不起作用

class选择器

class 选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示。
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
每条声明由一个属性和一个值构成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

2. CSS声明总是以分号 ; 结束，声明组以大括号 {} 括起来：

 p {color:red;text-align:center;}

3. CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 “/”开始，以"/"结束。

2）CSS生效

外联样式
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。

每个页面使用标签链接到样式表。标签在(文档的)头部：
新建如下内容的一个 HTML文件（后缀为.html)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

在同一目录新建一个样式表文件mycss.css（注意后缀名为css）如下：

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

在这里插入图片描述
内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用标签在文档头部定义内部样式表。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

在这里插入图片描述
内联样式

          由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。

           请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

           要使用内联样式，需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性。

在这里插入图片描述
多重样式优先级

           样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，

           或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。
           
           内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

3） CSS其他

颜色
颜色在网页中的重要性不言而喻。
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。
尺寸
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
新建如下 HTML 文件：
对齐
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐），上例中已有相关的应用。

.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;
}

在这里插入图片描述

4）盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
在这里插入图片描述

.body1 {
    height: 100%;
    width: 100%;
    background-color:#615200;
  }
.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;
  }

在这里插入图片描述

5）边框与边距

CSS可以设置边框的样式

.body1 {
    height: 100%;
    width: 100%;
    background-color:#615200;
  }
.box1 {
    height: 50%;
    width: 70%;
    background-color:#615200;
    color: aliceblue;
    border: 10px solid red;
    padding: 25px;
    margin: 25px;
  }
  .box2 {
    height: 50%;
    width: 70%;
    background-color:#004d61;
    color: aliceblue;
    border-bottom: 10px solid blue;
    padding: 25px;
    margin: 25px;
  }

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body class="body1">
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">只有下边框</div>
  </body>
</html>

在这里插入图片描述
css也可以分别设置内外边距
padding: 20px; /* 上下左右都相同 /
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; / 简写形式，按上，右，下，左顺序设置 /
padding: 25px 10px; / 简写形式，上下为25px，左右为10px */
在这里插入图片描述

6）定位

1.什么是定位：
css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。

2.各个属性值的描述：
*static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级，在普通流中，各个元素默认的属性。

*relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位。

*absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。

*fixed（固定定位）这里所固定的参照对像是可视窗口而并非是body或是父级元素。使用了fixed的元素不会随着窗口的滚动而滚动。属于absolute的子集。
static

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

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

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

在这里插入图片描述

absolute设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移如果该元素的所有父元素都没有设置定位属性，那么就相对于body这个父元素在这里插入图片描述

7）溢出

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

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
以上内容较好理解，请自行进行验证。
关于滚动，我们还可以单独对上下或左右方向进行，如下代码所示：

.box1 {
    height: 10%;
    width: 10%;
    background-color:#615200;
    color: aliceblue;
    overflow-y: scroll;
    border: 10px solid red;
    padding: 25px;
    margin: 25px;
  }

<html>

<head>
    <link rel="stylesheet" href="./mycss.css">
</head>

<body class="body1">
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
        溢出属性有一下几个值：
        
        visible 默认值，溢出部分不被裁剪，在区域外面显示
        hidden 裁剪溢出部分且不可见
        scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
        auto 裁剪溢出部分，视情况提供滚动条
        以上内容较好理解，请自行进行验证。
        关于滚动，我们还可以单独对上下或左右方向进行，如下代码所示：</div>
</body >
</html>

在这里插入图片描述

8）浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
我们常用这种样式来使图像和文本进行合理布局，如我们希望有以下的效果：

.example-float-right {
        float: right;
        top: 300px;
      }

在这里插入图片描述

9）不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：

 .opacity-2 {
      opacity: 0.2;
    }

在这里插入图片描述

三.结语

这个实战对于我们了解CSS有很大的帮助，希望大家好好学习还有就是希望各位有问题可以联系博主，博主很乐意和各位一起学习。请您关注我个人的微信公众号，微信搜索h生活剪影很期待您的关注，我们一起进步。在这里插入图片描述

热爱生活的技术控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

通信网络软件学习&# 初学者学习css快速导引

通信网络软件学习&# 初学者学习HTML快速导引

一.序 言

CSS简介

二.学习开始

1. 学习工具

2.CSS知识初步

1）CSS语法规则

2）CSS生效

3） CSS其他

4） 盒子模型

5）边框与边距

6）定位

7） 溢出

8） 浮动

9）不透明度

三.结语

一.序言

4）盒子模型

7）溢出

8）浮动