前端三剑客（二）：CSS基础教程
CSS
CSS概述
css，Cascading Style Sheets，是层叠样式表，用于设计风格和布局
CSS添加方式
分为三种方式
A.行内添加方法
B.内嵌样式
注：选择器为*为全局声明
C.单独文件，通过后缀名css结尾，放在同级文件夹上，通过link链接，rel指样式文件，也可以用@import导入
优先级：行内>内嵌>链接>浏览器默认（就近原则）。
注意：如果行内样式规定了一部分，内嵌或链接规定了另外一部分，则补齐
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
h1{
color: darkseagreen;
}
style>
head>
<body>
<h1>
测试文字一
h1>
<h2 style="background-color: #8FBC8F;">
测试文字二
h2>
body>
html>
外部样式可以导入自己写的css文件，也可以调用外部的css文件
CSS使用
常用选择器
选择器就是指对那些内容进行选择，再对其用css进行渲染
标签选择器
h1{
color: darkseagreen;=
}
在style标签中，使用标签选择器选择网页中的所有该标签
类选择器
<style type="text/css">
.h1{
color: saddlebrown;
}
style>
head>
<body>
<h1 class="h1">
测试文字一
h1>
通过定义标签中的class的值为类名，可以有不同个标签起同一个类名
ID选择器
<style type="text/css">
#h1{
color: saddlebrown;
}
style>
head>
<body>
<h1 id="h1">
测试文字一
h1>
id选择器必须保证id唯一
选择器优先级
ID选择器最高，类选择器其次，标签选择器最低
层次选择器
后代选择器
在某个元素的后面
li p{
font-size: 100px;
}
它指的是，对li标签后的所有p标签的选择，不论li和p之前隔了几层
子元素选择器
li>p{
font-size: 100px;
}
它指的是，对li标签后一级的所有p标签的选择，包含层级必须为一级
相邻元素选择器
.p1 + p{
background-color: cornflowerblue;
}
它指的是，对class为p1的标签的下一个p标签的选择
通用选择器
.p1 ~ p{
background-color: cornflowerblue;
}
它指的是，对class为p1的标签的之后所有p标签的选择
结构伪类选择器
/* ul下第一个li的选择 */
ul li:first-child{
background-color: #20C997;
}
/* ul下最后一个li的选择 */
ul li:last-child{
background-color: #224523;
}
/* 选中p标签的父级标签，选中父级的第二个元素 */
p:nth-child(2){
background-color: #CCE5FF;
}
/* 选中p标签的父级标签，选中父级的第二个p元素 */
p:nth-of-type(2){
background-color: #CCE5FF;
}
伪类就是在冒号后面对标签进行选择
属性选择器
"utf-8">
中括号中的内容为正则表达式的内容
常见CSS框架
框架就是别人已经写好的样式，使用时候导入就可以了
FontAwesome
简介: 图标库.
网址: https://fontawesome.dashgame.com/
# 引用font图标库的css样式文件
1. 负责font图标库中css目录和fonts目录粘贴在项目根目录下.
2.
# 使用css样式效果.
# 示例代码
<i class="fa fa-support">i>
<i class="fa fa-mobile">i>
<i class="fa fa-subway">i>
<i class="fa fa-spinner fa-spin">i>
BootStrap
简介: facebook提供css框架.
网址：https://v4.bootcss.com/docs/getting-started/download/
# 引用bootstrap框架css文件
1. 将解压后的css目录和js目录粘贴在项目根目录下.
2.
# 使用css样式效果.
<标签 class="bootstrap内置class名字">
- 文本
# 文本对齐方式
text-center
text-right
# 文字颜色
文字
文字
文字
文字
说明:
primary 深蓝
info 淡蓝
danger 红色
warning 黄色
success 绿色
default 默认白色
# 超链接颜色
text-info
# 背景色
bg-info
# 徽章
徽章
胶囊式徽章
- 按钮
# html标签:
a 超链接
button 按钮
submit 提交
# bootstrap样式
btn 设置为bootstrap按钮
btn-xxx 设置按钮颜色
btn-xxx 设置按钮大小
btn-lg 大
btn-sm 小
btn-xs 迷你
# 示例
超链接
- 图片
# HTML标签
# bootstrap样式
img-thumbnail
- table效果
# html标签
商品名
价格
库存
描述
XPS15
100
99
thinkpad x230
200
199
# bootstrap样式
table标签的样式
table 表格效果
table-bordered 表格边框
table-hover 数据行鼠标移入背景加深
tr标签样式:
bg-primary 设置背景色
- form表单效果
# 标签
input标签
select标签
textarea标签
# 样式
class="form-control"
- 网页布局排版
# 标签
div
# 样式
container
row
col-md-12
- 导航
nav标签属性：
navbar 设置为bootstrap导航栏
bg-light 背景色
navbar-light 内部列表文字颜色
navbar-expand-md 内部列表修改排列方式， 横向排列。
fixed-top 固定到顶部
ul标签：
navbar-nav 设置为导航列表
mr-auto 横向自动填充
li标签：
nav-item 单个导航项
nav-link 设置导航连接字体
栅格系统
栅格系统是bootStrap提供的12列布局，它将网页分成了十二列，有五种相应尺寸
使用方法如下
<div class="container">
<div class="row">
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
<div class="col-md-1">占一格div>
div>
<div class="row">
<div class="col-md-4">占四格div>
<div class="col-md-4">占四格div>
<div class="col-md-4">占四格div>
div>
<div class="row">
<div class="col-md-4">占四格div>
<div class="col-md-8">占八格div>
div>
<div class="row">
<div class="col-md-1">占一格div>
<div class="col-md-8">占八格div>
<div class="col-md-2">占两格div>
<div class="col-md-1">占一格div>
div>
<div class="row">
<div class="col-md-12">全占div>
div>
div>
下面是用栅格系统做的实例
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<p class="text-white text-center bg-info" style="font-size: 50px;">用户登录p>
div>
div>
<div class="row">
<div class="col-2">
div>
<div class="col-2">
用户名：
div>
<div class="col-6">
<input class="form-control" type="text" name="用户名"/>
div>
<div class="col-4">
div>
div>
<br>
<div class="row">
<div class="col-2">
div>
<div class="col-2">
密码：
div>
<div class="col-6">
<input class="form-control" type="password" name="密码" />
div>
<div class="col-4">
div>
div>
<br>
<div class="row">
<div class="col-4">
div>
<div class="col-2">
<button class="btn btn-info" type="button">注册button>
div>
<div class="col-2">
<button class="btn btn-success" type="button">登录button>
div>
<div class="col-4">
div>
div>
div>
body>
html>