CSS入门学习
一、CSS简介
1、什么是CSS
CSS:Cascading Style Sheet 层叠样式表,是一组样式设置的规则,用于控制页面的外观样式
2、CSS作用
页面外观美化,布局和定位
二、基本用法
p {
color: red;
text-align: center;
}
2、创建并引用
外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部样式表-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>外部样式</p>
</body>
</html>
p {
color: red;
text-align: center;
}
内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入内部样式表-->
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>外部样式</p>
</body>
</html>
css选择器
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,一般来说,一个页面中标签的id的名称,必须唯一且不能重复。
<p id="part1">段落1</p>
<p id="part2">段落2</p>
#part1 {
color: red;
}
class选择器
class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式,一般来说,一个页面中标签的class的名称,可以不唯一且可以重复。
<p class="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>
p {
color: yellow;
}
a {
color: red;
}
伪类
anchor伪类
a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */
3.1、背景样式
CSS 背景属性用于定义HTML元素背景的样式。
属性 描述
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
3.2、文本样式
CSS 文本属性用于定义HTML文本内容的样式。
属性 描述
color 设置文本颜色。
direction 设置文本方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。
text-transform 控制元素中的字母。
unicode-bidi 设置或返回文本是否被重写。
vertical-align 设置元素的垂直对齐。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
3.3、字体样式
CSS 字体属性用于定义HTML内容字体的样式。
属性 描述
font 在一个声明中设置所有的字体属性。
font-family 指定文本的字体系列。
font-size 指定文本的字体大小。
font-style 指定文本的字体样式。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
3.4、链接样式
<a href="https://www.baidu.com/">打开百度,你就知道!</a>
1
a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */
1
2
3
4
注意:推荐使用顺序为link、visited、hover、active
3.5、列表样式
CSS 列表属性用于定义HTML常见列表的样式。
属性 描述
list-style 简写属性,用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
3.6、表格样式
CSS 表格属性用于定义HTML表格的样式。
属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
3.7、轮廓样式
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
属性 描述
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。