一、CSS简介
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
它包含了如：整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
内容HTML和表现CSS的分离在代码的撰写与维护过程中，内容如果和修饰分离，便于维护。
二、CSS语法
CSS主要用选择器来进行选择属性值，分为三种，有元素选择器、id选择器、class选择器
选择器——用{}包含的声明，可以是多条声明。
声明以一个属性和一个值组成，同时多条声明可以用：分割。
一个属性对应一个值。属性与值之间用：分割。
id选择器
id选择器前有#号。
#msy{
color: red;/*颜色设置为红色*/
}
class选择器
/* 注意：class选择器前有 . 号。 */
.center{
text-align: center;//居中
}
.large{
font-size: 30px;//字号
}
.red{
color: red;//颜色
}
三、CSS的生效方式
一般有三种方法：外部样式表，内部样式表，内联样式
三种样式的优先级如下：
内联样式>内部样式表或外部样式表>浏览器缺省样式
我们也可以将样式放在 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>
四、CSS实际使用
1.颜色、尺寸、对齐
文本或背景颜色：可以使用16进制值、RGB值或者名称表示。
我们将颜色放入到我们的.css文件中，代码如下
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
尺寸：用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %。
对齐：元素中的文本，可以根据需求设置text-align属性为left, center, right。
2.盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域
3.边框与边距
无论边框、内边距还是外边距，它们都有上下左右四个方向。
.example-1 {
border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
border: 1px solid grey;
border-radius: 15px; /* 边框圆角 */
}
.example-4 {
border-left: 5px solid purple;
}
4.定位
position属性用于对元素进行定位，属性值有static 静态、relative 相对、fixed 固定、absolute 绝对。
5.溢出
溢出是来处理当元素内容超过其指定的区域时
溢出属性分别有：
visible 默认值，溢出部分会在区域外面显示
hidden 抛弃溢出部分
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
6.浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
</body>
</html>
7.透明度
用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="1.jpg">
<img class="opacity-5" src="1.jpg">
<img class="opacity-10" src="1.jpg">
</body>
</html>
8.组合选择器
将三种选择器：元素、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>
9.伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
使用伪类/伪元素的语法如下：
/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
