样式表总结"/>
CSS级联样式表总结
文章目录
- 前言
- 一、CSS是什么？
- 二、CSS语法
- 1.语法示例
- 2.CSS如何生效
- 3.CSS盒子模型
- 4.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;
}
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入门简单，但是用好很困难。
更多推荐
CSS级联样式表总结
发布评论