CSS级联样式表总结

最新推荐文章于 2024-08-09 17:43:58 发布

YuKaguraNe

最新推荐文章于 2024-08-09 17:43:58 发布

阅读量548

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB开发基础文章标签： css web

本文链接：https://blog.csdn.net/YuKaguraNe/article/details/115919969

WEB开发基础专栏收录该内容

2 篇文章

订阅专栏

文章目录

前言
一、CSS是什么？
二、CSS语法
总结

前言

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

一、CSS是什么？

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。则由css决定。

二、CSS语法

1.语法示例

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:（示例）：

h1{color:blue;font-size:12px}

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像素。

说明：
1.选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
2.每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）。
3.属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器
常见的选择器有id选择器和class选择器其中后者使用更加广泛。

2.CSS如何生效

CSS生效方式通常有3种，分别是外部样式表，内部样式表，内联样式

1）外部样式表
位于html文件外，可以在html文件中添加导入的.css文件

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

引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

2）内部样式表
将样式直接放在html文件中

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

一般不采用此方式规定样式。

3）内联样式
直接把样式规则直接写到要应用的元素中

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

3.CSS盒子模型

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

4.CSS其他

1）定位
position属性用于对元素进行定位。该属性有以下一些值：static 静态、relative 相对、fixed 固定 absolute 绝对
设置position属性后方可使用top, bottom, left, right属性
列如：

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

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

.example-float-right {
      float: right;
    }

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

.opacity-2 {
      opacity: 0.2;
    }

代码示例为：设置class=opacity-2的元素的透明度为0.2

总结

CSS（Cascading Style Sheets）级联样式表，通过选择器，定位HTML中的内容，并在{}中声明定位的HTML内容的样式。并且通过外部样式表，内部样式表，内联样式三种不同的方式为HTML文档的内容进行样式更改并生效。CSS入门简单，但是用好很困难。