CSS学习总结
何为CSS
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
CSS语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
CSS外部样式表
如以下代码所示
下面展示一些 内联代码片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>
以下代码保存在css格式下。
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
css内部样式表使用较少，就不进行解释。
盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域
定位
position属性用于对元素进行定位。该属性有以下一些值：
static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
浮动
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
不透明度
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。
伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：
鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常
等等
语法：
/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}
扫一扫
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
