CSS学习总结
一、CSS简介
什么是CSS
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML决定了网页显示的内容,而CSS能决定内容显示的样式,比如元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
二、CSS语法
一条CSS样式规则由两个主要的部分构成:选择器,以{}
包裹的一条或多条声明:
- 选择器通常是您需要改变样式的 HTML 元素。
- 每条声明由一个属性和一个值组成。
- 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束,声明总以大括号({})括起来:
例:p { color:red; text-align:center; }
CSS注释
CSS注释以 /*
开始, 以 */
结束, 实例如下:
/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
color:red; /*文本颜色:红色*/
text-align:center; /* 文本居中 */
}
选择器
id选择器
已知HTML元素有id属性,CSS能为指定id的元素设置特点的样式,如下例:
#para1
{
text-align:center;
color:red;
}
该样式将应用于id为”paral“的元素指定样式,该样式会显示为红色并文本居中。
ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
id选择器的id前一定要有#
tips:HTML中元素的id必须唯一,所以id选择器适用范围只有一个元素
class选择器
id选择器只适用于一个元素,效率很低。但class选择器能将同一类的元素指定同样的样式,于是同样的样式能适用于多个元素。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
.center {text-align:center;}
如该例将作用于 class=”center"
的元素
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {text-align:center;}
三、CSS创建
如何让插入样式表使其生效?
我们一般有三种方法插入样式表:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
1.外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link>
标签链接到样式表。 <link>
标签在(文档的)头部:
建立一个HTML文档:
<!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>
浏览器会从文件 mycss.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。
样式表应该以 .css 扩展名进行保存
在同一目录新建一个样式表文件mycss.css(注意后缀名为css)如下:
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
2.内部样式表
我们也可以将样式放在 HTML 文件中,这称为内部样式表。
如下:将样式放入<head>
中的<style>
标签中
<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>
提示:当三种方式同时使用时,他们的优先级是:
内联>内部>外部>浏览器缺省样式
四、盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的,如下图所示:
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
五、边框与边距
边框
CSS边框属性允许你指定一个元素边框的样式和颜色。 比如边框是否显示、圆角、直角,颜色和宽度等。
border-style
属性用来定义边框的样式
border-style
有下列取值:
- none: 默认无边框
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double:定义两个边框。 两个边框的宽度和
- border-width 的值相同
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset:定义一个3D突出边框。 效果取决于边框的颜色值
边距
CSS margin(外边距)属性定义元素周围的空间。
margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。
margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
Margin - 单边外边距属性
在CSS中,它可以指定不同的侧面不同的边距:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
上述代码分别指定了边距四个方向的大小
六、定位
position属性用于对元素进行定位。该属性有以下一些值:
- static 静态
- relative 相对
- fixed 固定
- absolute 绝对
设置了元素的position属性后,我们才能使用top, bottom, left, right属性,否则定位无效。
static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
relative 相对
相对定位元素的定位是相对其正常位置。
设置为相对定位position: relative;,这将把元素相对于他的静态(正常)位置进行偏移
例:
<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看?</div>
<!-- CSS -->
.example-relative {
position: relative;
left: 60px;
top: 40px;
background-color: rgb(173, 241, 241);
}
移动相对定位元素,但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
fixed 固定
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动,此时元素固定的位置仍由top, bottom, left, right属性确定,但相对的是视口(viewport,就是浏览器的屏幕可见区域)
如下的代码将会在浏览器右下角固定放置一个按钮元素:
<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小,看看右下角的按钮发生了什么?</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.example-fixed {
position: fixed;
bottom: 40px;
right: 10px;
padding: 6px 24px;
border-radius: 4px;
color: #fff;
background-color: #9d0f0f;
cursor: pointer;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
height: 5000px;
width: 5000px;
padding: 20px;
background-color: darkkhaki;
}
absolute 绝对
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
h2
{
position:absolute;
left:100px;
top:150px;
}
七、溢出
当元素内容超过其指定的区域时,我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值:
- visible 默认值,溢出部分不被裁剪,在区域外面显示
- hidden 裁剪溢出部分且不可见
- scroll 裁剪溢出部分,但提供上下和左右滚动条供显示
- auto 裁剪溢出部分,视情况提供滚动条
八、Float(浮动)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
img{ float:right; }
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
清除浮动
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
九、(不)透明度
我们可以用opacity对任何元素(不过常用于图片)设置不透明度。
值在[0.0~1.0]之间,值越低,透明度越高。
例如:
<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">
同一图片将会如下不同透明度显示
十、组合选择器
前面我们学习了 CSS有三种选择器:元素、id 和 class 。但我们也可以进行组合,以得到简洁精确的选择。
后代选择器
以空格作为分隔,后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p>
元素插入到 <div>
元素中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div p
{
background-color:gray;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
子选择器
也称为直接后代选择器,以>作为分隔,与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素。
以下实例选择了<div>
元素中所有直接子元素 <p>
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
十一、伪类和伪元素
伪类(pseudo-class)或伪元素(pseudo-element)用于定义元素的某种特定的状态或位置等。
伪类
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法:
selector:pseudo-class {property:value;}
CSS类也可以使用伪类:
selector.class:pseudo-class {property:value;}
伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
语法
伪元素的语法:
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素:
selector.class:pseudo-element {property:value;}
一些伪类和伪元素的应用:
a:link {color:#FF0000;} /* 未访问的链接显示为FF0000色 */
a:visited {color:#00FF00;} /* 已访问的链接先显示为00FF00色 */
a:hover {color:#FF00FF;} /* 鼠标划过链接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); } /* 在每个一级标题后插入该图片 */