一、CSS的基本概念
1、什么是CSS？
CSS是层叠样式表（Cascading Style Sheets）
2、CSS的作用？
它用于定义HTML元素的显示形式，是一种格式化网页内容的技术
3、CSS的样式规则
语法：选择器 { 属性1:值1;属性2:值2}
1.一个样式规则由一个或多个选择器组成
2.选择器后跟上一个大括号用于存放样式规则，样式规则的值如果有空格，则值必须被引号引起来
3.在大括号内添加样式规则 属性:值;
4、CSS的书写方式
二、CSS选择器和伪类
1.外部样式表
(1)创建一个.css文件，在文件内容填写css样式
(2)使用<link rel="stylesheet" href=".css文件路径" />
2.内联样式表
在标签的内部，使用style属性来添加样式
例：
<p style="color: orange;font-weight: bold">这是一个段落内容.</p>
3.嵌入式样式表
在head标签中添加<style type="text/csss"></style>
在标签的内部书写css样式
[图片上传中...(image.png-39dbba-1556241510546-0)]
1、选择器
作用：通过选择器用来选取页面中的元素
选择器种类：
选择器 格式 说明
id选择器 #id值 根据元素的id属性选取页面中的元素
类选择器 .class值 根据元素的class属性选取页面中的元素
元素选择器 标签名 根据标签名来选取页面中的元素
后代选择器 选择器1 选择器2 由两个选择器组成，选中父标签的下面后代标签
另外：可以通过多个选择器共同使用一个样式规则："选择器1,选择器2"
2、伪类
作用：为a标签添加样式
伪类种类：
伪类 描述
a:link 像未被访问的链接添加样式
a:hover 当鼠标悬浮在元素上方时；像元素添加样式
a:active 向被激活的元素添加样式
a:visited 向已被访问的链接添加样式
3、伪元素
作用：向某些选择器设置特殊效果
伪元素 作用
:before 在元素的内容前面插入新内容
:after 在元素的内容之后插入新内容
4、选择器的优先级
元素选择器和伪元素的级别最低
其次是类选择器和伪类
ID选择器是选择器中级别最高的
内联样式总会覆盖外部样式表的任何样式
!important声明将覆盖任何其他声明
三、常用样式
1、背景
属性 描述
background 简写属性，作用是将背景属性设置在一个声明里
Background-color 设置元素的背景颜色
Background-image 把图像设置为背景
Background-position 设置背景图像的起始位置
Background-repeat 设置背景图像是否重复及如何重复
2、文本
属性 描述
color 设置文本的颜色
text-align 对齐元素中的文本
text-decoration 向文本中添加修饰
text-indent 缩进元素中文本的首行
Vertical-align 设置元素的垂直对齐
3、字体
属性 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体集（例：微软雅黑）
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-weight 指定文本的粗细
4、链接
属性 描述
a:link 正常，未被访问的链接
a:visited 用户已访问的链接
a:hover 当用户鼠标放在链接上时
a:active 链接被点击的那一刻
Text-decoration 主要用于删除链接中的下划线
5、列表
属性 描述
list-style 用于把所有的属性设置于一个声明中
list-style-image 将图片设置为列表项标志
list-style-type 设置列表项标志的类型
6、表格
属性 描述
border 设置表格边框
border-collapse 设置表格边框是否被折叠成一个单一的边框或隔开
width 定义表格的宽度
text-align 表格中的文本对齐
padding 设置表格中的填充
四、CSS常见布局
1、三行两列布局
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三行两列布局</title>
<style>
html, body {
margin: 0;
}
header {
height: 100px;
background-color: lightblue;
}
#container {
height: 500px;
background-color: lightgreen;
}
footer {
height: 100px;
background-color: lightslategray;
}
nav {
float: left;
width: 150px;
background-color: lightyellow;
height: 100%;
}
article {
/*margin-left: 150px;*/
overflow: hidden;
background-color: lightcoral;
height: 100%;
}
</style>
</head>
<body>
<header></header>
<div id="container">
<nav></nav>
<article></article>
</div>
<footer></footer>
</body>
</html>
2、两行三列布局
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两行三列布局</title>
<style>
html, body {
margin: 0;
}
header {
height: 100px;
background-color: lightblue;
}
#container {
height: 500px;
background-color: lightgreen;
}
nav {
float: left;
width: 150px;
background-color: lightyellow;
height: 100%;
}
aside {
float: right;
width: 100px;
background-color: orange;
height: 100%;
}
article {
overflow: hidden;
background-color: lightcoral;
height: 100%;
}
</style>
</head>
<body>
<header></header>
<div id="container">
<nav></nav>
<aside></aside>
<article></article>
</div>
</body>
</html>
网友评论