css基础

2024-03-23 16:06:28

CSS基础

CSS的作用
CSS的语法
CSS的引用
CSS学习总结

CSS的作用

在我们写的html页面中，所有的内容只能通过添加标记来改变他们的表现。这种方式及其的不适合我们操作，因此将一个网页的内容和表现分开，所以说CSS就是用来装饰页面的。

CSS的语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。
选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
对于页面中需要进行装饰的对象，我们需要选择器来进行选择。

CSS的引用

内部样式表

我们放在css中的样式，我们可以将它放在htmel的head里面

<!--简单的例子-->
<html>   
<head>  
  <meta charset="utf-8"> 
  <link rel="shortcut icon" href="https://cdn-img.easyicon.net/favicon.ico"> 
  <title>hollo</title>  
  <link rel="stylesheet" type="text/css" href="1.css">
  <style>
    body {
      background-color: rgb(123, 83, 175);
      text-align: center;
    }
    h1 {
      color: rgb(204, 134, 134);
    }
    .haha {
      margin-top: 100px;
      color: rgb(152, 168, 145);
      font-size: 50px;
    }
  </style>
</head>
<body >  
  <h1>上上下下</h1>
  <hr>
  <p class="haha">恒星</p>
</body>
</html>

外部样式

同一目录新建一个样式表文件，后缀名为css如下：

在html中我们可以用

<link rel="stylesheet" type="text/css" href="1.css">

href中填放的是我们.css文件的路径。
在css文件中添加以下代码

body {
  background-color: rgb(190, 103, 103);
  text-align: center;
}
h1 {
  color: rgb(85, 209, 209);
}
.haha {
  margin-top: 100px;
  color: rgb(152, 168, 145);
  font-size: 50px;
}

通常我们可以用class来对一个样式进行反复的调用。
定义的时候在名字前面加.

.asc

应用的时候如下

<p class="haha">恒星</p>

相比较而言我们通常采用的是外部样式，这样有利于我们的逻辑梳理。不同的级联之间的优先级是：内联样式>内部样式表或外部样式表>浏览器缺省样式哪个样式定义离元素的距离近，哪个就生效

颜色，尺寸，对齐

颜色：
我们可以通过background-color: rgb(156, 93, 93);来设定背景颜色，color: rgb(152, 168, 145); 来设定字体的颜色。在vs中我们不必去查找颜色对应的16进制代码，可以直接通过颜色框进行选择。
尺寸：
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
在css中添加以下代码；

.example-1 {
    width: 100%;
    height: 50%;
    background-color: rgb(91, 93, 199);
    text-align: center;
  }
  .example-2 {
    height: 30%;
    width: 40%;
    background-color: rgb(73, 138, 60);
    text-align: right;
  }

html中添加：

  <p class="example-1 nr">金牛座</p>
  <p class="example-2 nr" >巨蟹座</p>

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

盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 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;
}

在浏览器中F12可查看元素布局

边框与边距

无论边框、内边距还是外边距，它们都有上下左右四个方向。
可以通过—left，—right，—top，—bottom来设定不同方位的边框。

定位

position属性用于对元素进行定位。该属性有以下一些值：
static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
relative:元素相对于他的静态（正常）位置进行偏移

  <div class="example-relative">魔蝎座</div>

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

fixed：将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）

<div class="broad"></div>
  <div class="example-fixed">fixed</div>

.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: rgb(204, 33, 76);
}

absolute：将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移

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

溢出

当元素内容超过其指定的区域时，我们通过溢出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;
}

浮动

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

<html>
<head>
  <style>
    .example-float-right {
      float: right;
    }
  </style>
</head>
<body>
  <img src="https://img2.baidu.com/it/u=1366723203,4192303293&fm=26&fmt=auto&gp=0.jpg" class="example-float-right" alt="">
  <p>《假面骑士Build》（原文：仮面ライダービルド/Kamen Rider Build）是“平成假面骑士”系列的第19部作品，于2017年播出。是该系列史上初次以“物理科学”作为设计原型之一。
    本作标题以及主角骑士的名字“Build”，正是“创造、形成”的意义，这也符合主角的身份——青年天才物理学家，同时是拥有平成骑士史上最高IQ的主角。主角的变身道具是科研人员常用的“实验试剂瓶”，战斗就如同在科学实验一般。而且从主角口头禅“那么，开始实验吧”与“胜利的法则已然决定！”，可见物理实验与法则是本作中的一大线索。另一方面，导演也宣称本作世界观的规模是史上最大——涉及了整个日本列岛。</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="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
  <img class="opacity-5" src="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
  <img class="opacity-10" src="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
</body>
</html>

CSS学习总结

通过对css学习，一个网站的基本内容呈现在html中，对网站的修饰基本上都是存在于css里，这样有利于我们对网站进行后期的维护和管理。一个好的网站，离不开工程师对他的装饰。

码农公寓