CSS学习笔记
一、CSS简介
CSS与HTML密切联系。因为HTML 用于撰写页面的内容，而 CSS 将此内容该美观的设计出来。CSS决定了整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。
二、CSS语法
一条CSS由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
语句解释：color设定颜色（此示例的一级【h1】标题都显示为蓝色），font-size设定字体大小（此示例为12像数）。
说明：
- 选择器是我们改变样式的对象（上图的h1）
- 每条声明{}内容由一个属性和一个值组成。（无论是一条或多条，都需要用{}包裹，且声明用;分割）
- 属性是我们设置的样式属性（都有一个值与属性用“：”分开）。
（一）.CSS 注释
用 /* 开始, 以 */ 结束。
示例:
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
（二）CSS 选择器
选择器用于在页面中找到/选择想要应用的样式的对象，有id和class选择器。其中class选择器使用更为普遍。
1.id 选择器
id 选择器的功能是：可以为标有特定 id 的 HTML 元素指定为特定的样式。
在HTML中，用id属性来设置id选择器,CSS 中 id 选择器以 # 来定义。
以下示例，属性 id="para1":
#para1
{
text-align:center;
color:red;
}
2.class选择器
class 选择器用于描述一组元素的样式，也就是是说class可以在多个元素中使用，这也是与id选择器的不同之处。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
示例所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {text-align:center;}
多个 class 选择器可以使用空格分开：
.center { text-align:center; }
.color { color:#ff0000; }
三、CSS创建（如何生效）
（一）CSS插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
（二）外部样式表
当样式需要应用于很多页面时，外部样式表将是最好的的选择。使用外部样式表，能通过改变一个文件来改变整个站点的外观，是十分方便的。每个页面使用 <link> 标签（在文档头部）链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑，样式表以 .css 扩展名进行保存。
表文件示例：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
（三）.内部样式表
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。（可少使用）
使用内联样式，需在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。如何改变段落的颜色和左外边距示例：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
（四）.多重样式
某些属性在不同的样式表中被同样的选择器定义，此时这些属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
（五）多重样式优先级
一般情况下，优先级如下：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式。
下面是优先级展示示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="https://static.runoob.com/assets/css/css-howto/style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>显示绿色，是内部样式</h3>
</body>
</html>
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="https://static.runoob.com/assets/css/css-howto/style.css"/>
</head>
<body>
<h3>显示蓝色，是外部样式</h3>
</body>
</html>
四、CSS背景
CSS 背景属性用于定义HTML元素的背景。
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图像设置为背景 |
| background-position | 设置背景图像的起始位置 |
| background-repeat | 设置背景图像是否及如何重复 |
（一）背景颜色
background-color 属性定义元素的背景颜色。
CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如：“#ff0000”
- RGB - 如：“rgb(255,0,0)”
- 颜色名称 - 如：“red”
页面的背景颜色使用在body的选择器中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 页!</h1>
</body>
</html>
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1
{ background-color:#6495ed;}
p
{ background-color:#e0ffff;}
div
{ background-color:#b0c4de;}
</style>
</head>
<body>
<h1>CSS background-color 实例!</h1>
<div>
该文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>
</body>
</html>
五、CSS元素尺寸
用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
示例;
HTML文件：
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="example-1">
这个元素高 200 pixels，占据全部宽度
</div>
<div class="example-2">
这个元素宽200像素,高300像素
</div>
</body>
</html>
CSS文件：
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
.example-2 {
height: 100px;
width: 500px;
background-color: rgb(73, 138, 60);
text-align: right;
}
六、CSS字体
（一）CSS字型
CSS中，有两种类型的字体系列：通用字体系列 ，拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）；特定字体系列 ，一个特定的字体系列（如 “Times” 或 “Courier”）
| Generic family | 字体系列 | 说明 |
|---|---|---|
| Serif | Serif Times New Roman Georgia | Serif字体中字符在行的末端拥有额外的装饰 |
| Sans-serif | Arial Verdana | "Sans"是指无 - 这些字体在末端没有额外的装饰 |
| Monospace | Courier NewLucida Console | 所有的等宽字符具有相同的宽度 |
七、链接、表格
1.链接
链接可以是CSS的任何属性（如颜色，字体，背景等）。
链接有如下四个状态：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
2.表格
CSS能让表格更加美观，指定CSS表格边框用border属性。
指定一个表格的Th和TD元素的黑色边框：
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
八、盒子模型
盒子模型是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
展示：
HTML：
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
</body>
</html>
CSS：
.box1 {
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
height: 300px;
width: 300px;
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 25px;
}
九、边框与边距
（一） 边框样式
-
border-style属性用来定义边框的样式 -
dotted: 定义一个点线边框
-
dashed: 定义一个虚线边框
-
solid: 定义实线边框
-
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
-
groove: 定义3D沟槽边框。效果取决于边框的颜色值
-
ridge: 定义3D脊边框。效果取决于边框的颜色值
-
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
-
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
2.border-color属性用于设置边框的颜色
- name - 指定颜色的名称，如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
（二） 边距
margin(外边距)属性定义元素周围的空间，可以指定不同的侧面不同的边距，可有一到四个值（margin:25px 50px 75px 100px）。
十、CSS定位
position 属性指定了元素的定位类型，它五个值：static、relative、fixed、absolute、sticky。
（一） static 定位
此定位的元素默认值，即没有定位，遵循正常的文档流对象。此静态定位的元素不会受到 top, bottom, left, right影响（定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持）。
div.static {
position: static;
border: 3px solid #73AD21;
}
（二）fixed 定位
此定位元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
（三）relative 定位
此定位相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变。
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
（四） absolute 定位
此定位的元素的位置相对于最近的已定位父元素，此定位元素的位置相对于浏览器窗口是固定位置。
h2
{
position:absolute;
left:100px;
top:150px;
}
（五） fixed 定位
顾名思义可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
十一、CSS溢出与浮动
（一）溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：
- visible 默认值，溢出部分不被裁剪，在区域外面显示
- hidden 裁剪溢出部分且不可见
- scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
- auto 裁剪溢出部分，视情况提供滚动条
<!-- HTML -->
<div class="example-overflow-scroll-y">You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's box.
</div>
<!-- CSS -->
.example-overflow-scroll-y {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}
（二）浮动
设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列，使图像和文本进行合理布局。
十一、CSS不透明度
用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="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>
十一、 组合选择器
(一）后代选择器
以空格作为分隔，如：.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>
(二）子选择器
亦称直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。
示例：
十二、 伪类和伪元素
伪类（pseudo-class）与伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
可满足需求：
- 鼠标移到某元素上变换背景颜色
- 超链接访问前后访问后样式不同
- 离开必须填写的输入框时出现红色的外框进行警示
- 保证段落的第一行加粗，其它正常
语法：
selector:pseudo-class/pseudo-element {
property:value;
}
简单使用：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;} /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;} /* 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */
十三、学习总结
通过对CSS的学习，对控制多重页面样式和布局有了一定的了解，学会了用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距，以及向某些选择器添加特殊的效果，比如链接。这是既HTML后对web课程学习的深入。
扫一扫
1408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
