css | jerry2

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。

Css的语法

/*
选择器{
    样式名：样式值;
    样式名：样式值;
}
*/
/*
样式名
    Color:red;
    Font-size:20px;
*/
/*标签选择器：
P{
    Color:red;
    Font-size:20px;
}
被p标签包含的标签内容，字号为20像素。字体颜色为红色。
*/

Css中的选择器

标签选择器：直接用标签名

/* <h1/> */
h1 {
  color: red;
}

类选择器：.类名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .demo{
        color: aqua;
    }
  </style>
</head>
<body>
  <h1 class="demo">1111</h1>
</body>
</html>

Id选择器：#id名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #demo{
        color: aqua;
    }
  </style>
</head>
<body>
  <h1 id="demo">1111</h1>
</body>
</html>

Id选择和class选择器的区别是id的值不重复，class的值可以重复。

复杂的选择器
- 交集选择器（两个选择器紧挨着）
- 并集选择器（连个选择器之间用逗号分隔）
- 后代选择器（两个选择器之间用空格分隔）

引入方式

行内引入: 在开始标签里面增加style属性
内部引入: 在head里面增加style标签
外部引入:借助<link/>标签

常见的样式

边框border

每一个标签都是有区域的。我们可以通过border样式把标签的区域给显示出来。

border：边框的粗细边框的样式（实线虚线）边框的颜色

外边距margin

两个标签的边框之间的距离就是外边距

内边距padding

一个标签边框和标签内容之间的距离

背景background

在一个标签的border边框里面的内容我们可以设置背景样式。

Background-color：设置背景颜色的。
Background-image:设置背景图片的。
Background-position：设置背景图片的位置。
Background-repeat：设置背景图片是否重复。

文本样式

Color:字体颜色
Text-align：文本的水平位置。
Line-height:行高
Text-decoration：设置装饰线

伪类样式

1
2
3

a:hover{

}

当光标悬浮到超链接上时。

浮动样式

做页面布局：

Width：元素的宽度。
Height:元素的高度。
Clear：设置当前元素的左边和右边都没有浮动元素。