CSS学习总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS学习总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5001字，纯文字阅读大概需要8分钟。
内容图文
目录
前言
正如编程大牛所说：一个网页就好像一幢房子，HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。 CSS是装饰材料，是油漆，是用来装饰房子的。CSS如果没有HTML结构那也就什么都不是了，没有了实际使用价值。 而JavaScript就是房屋的开关，用来进行互动，产生动态效果。
上篇博客提到了HTML基础入门，本篇博客仅仅为css基础入门，技术有限，如有问题，敬请斧正！
css学习过程总结
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
什么是css
CSS是级联样式表（Cascading Style Sheets）的缩写。是对HTML 内容样式排版表。
css基础语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:如下
h1 {color:blue;font-size:12px;}
h1//选择器
color font-size//属性
blue 12px//值
解释：规则表明页面中所有一级标题都显示为蓝色，字体（font-sixe）大小为12像素。
注意：属性与值之间由冒号隔开。
选择器：
元素选择器，id 选择器 class选择器（class使用普遍）
如下：
h1 {color:blue;font-size:12px;}
ID选择器
/* 注意：id选择器前有 # 号。 */
#sky{
color: blue;
}
class选择器
/* 注意：class选择器前有 . 号。 */
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
css样式
css如何生效？
定义三种方式：
外部样式表 内部样式表 内联样式
- 外部样式表
在HTML的同一目录下新建一个样式表文件mycss.css（注意后缀名为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>
</html>
注意：head元素中引入了style标签，放入了样式表。
- 内联样式
直接把样式规则直接写到要应用的元素中就是内联样式。如下：
<h3 style="color:green;">I am a heading</h3>
级联的优先级
1.内联样式
2.内部样式或外部样式
3.浏览器缺省样式
简言之那个样式离得近就显示那个样式
盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
如下图：
- Content 盒子的内容，如文本、图片等
- Padding 填充，也叫内边距，即内容和边框之间的区域
- Border 边框，默认不显示
- Margin 外边距，边框以外与其它元素的区域
边框与边距
padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */
定位
position属性用于对元素进行定位
static 静态
relative 相对
fixed 固定
absolute 绝对
注意：设置了position属性后才能使用top,bottom,left,right等属性
浮动
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。我们常用这种样式来使图像和文本进行合理布局。如下图
关键代码
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
<p>To be, or not to be- that is the question:
Whether it's nobler in the mind to suffer
The slings and arrows of outrageous fortune
Or to take arms against a sea of troubles,
And by opposing end them！ </p>
组合选择器
前面我们学习了 CSS有三种选择器：元素、id 和 class 。为了得到简洁精确的选择，我们可以进行选择器组合。
后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
如下
<html>
<head>
<style>
.haha p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha>.</p>
<span>
<p>Paragraph 3 in the div .haha.</p>
</span>
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
分析：段落1、2、3都将有黄色的背景，而段落4、5没有
子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接p元素。
参见如下代码：
<html>
<head>
<style>
.haha > p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha.</p>
<span>
<p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
</span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
分析：虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。
心得总结
通过几周的学习对css有了基础的了解，CSS是级联样式表（Cascading Style Sheets）的缩写。是对HTML 内容样式排版表。css的出现将web的内容和样式分隔开来，有利于代码样式的复用，可以减少代码量和工作量。还需进一步了解web前端的实时动态！
深入学习，访问css详细教程
内容总结
以上是互联网集市为您收集整理的CSS学习总结全部内容，希望文章能够帮你解决CSS学习总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。