选择器
id选择器:
首先定义元素
<p id="sky">蓝色的天空</p>
id选择器
#sky{
color: blue;
}
注意:id选择器前有 # 号。
这条规则表明,找到页面上id为sky的那个元素让它呈现蓝色,如下所示的页面,蓝色的天空这几个字就将会是蓝色的。
class 选择器:
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
以上代码定义了三条规则,分别应用于页面上对应的元素,如只要页面上某元素的class为red,那么就让它呈现红色。
CSS生效
新建如下内容的一个 HTML文件(后缀为.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句,将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="1.css">
<title>页面标题</title>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点帅</p>
</body>
</html>
在同一目录新建一个样式表文件1.css(注意后缀名为css)如下:
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
效果如下:
盒子模型
Content 盒子的内容,如文本、图片等
Padding 填充,也叫内边距,即内容和边框之间的区域
Border 边框,默认不显示
Margin 外边距,边框以外与其它元素的区域
定位
position属性用于对元素进行定位。该属性有以下一些值:
static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后,我们才能使用top, bottom, left, right属性,否则定位无效。
浮动
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
试一试: 有如下4张图片,如果没加样式的话,这几张图片将会从上到下依次显示。考虑使用左浮动,让它们水平依次显示。
不透明度
我们可以用opacity对任何元素(不过常用于图片)设置不透明度。
值在[0.0~1.0]之间,值越低,透明度越高。
伪类和伪元素
伪类(pseudo-class)或伪元素(pseudo-element)用于定义元素的某种特定的状态或位置等。
使用伪类/伪元素的语法:
/* 选择器后使用 : 号,再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}