web学习----CSS总结

最新推荐文章于 2024-09-26 19:50:45 发布

最好の我们

最新推荐文章于 2024-09-26 19:50:45 发布

阅读量129

点赞数

文章标签： css

本文链接：https://blog.csdn.net/urwddd/article/details/115455758

版权

本文详细介绍了CSS的基础知识，包括语法、样式生效方法、盒子模型、定位、溢出处理和不透明度设置。通过外部样式表、内部样式表和内联样式的使用，展示了级联优先级的规则。此外，还探讨了静态、相对、固定和绝对定位的应用，以及如何通过overflow属性处理元素溢出。最后，文章以不透明度的调整作为结束，为网页设计提供了更多可能性。

摘要由CSDN通过智能技术生成

CSS语法

选择器 {属性：值}

选择器处了我们之前学过的h1等等，还有id和class选择器。
id选择器前面有#号，如：

#sky{
  color: blue;
}

class选择器前面有.号，如：

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

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

CSS生效方法

外部样式表

在.html 的头部中引用语法：

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

我们还需要创建一个.css的文档，此时要注意路径。

内部样式表

也可以将样式放在html文件的head元素里面，此时我们要引入

<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>

内联样式

直接把样式规则直接写到要应用的元素中，如：

<h3 style="color:green;">I am a heading</h3>

不常用

级联的优先级

遵循就近原则：
1.内联样式
2.内部样式表或外部样式表
3.浏览器缺省样式

盒子模型

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

定位

position属性用于对元素进行定位，属性值有static 静态、relative 相对、fixed 固定、absolute 绝对。

static

静态定位position: static;默认定位方式，将把元素相对于他的静态（正常）位置进行偏移。代码如下：

<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>
<!-- CSS -->
.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

fixed

设置为固定定位position: fixed;元素固定不动
此时元素固定的位置仍由top, bottom, left, right属性确定，可以用来设置页面按钮。
代码如下：

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

absolute

设置为绝对定位position: absolute；使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。
代码如下：

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

溢出

溢出是来处理当元素内容超过其指定的区域时
溢出属性分别有：
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;
}

不透明度

用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://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>