一、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;
}