Bootstrap3 css样式
https://v3.bootcss.com/css/
Bootstrap4 css样式
http://bs4.ntp.org.cn/
一、 简单介绍
CSS是Cascading Style Sheets（级联样式表）的缩写，也叫层叠样式表。
CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
二、 CSS 代码应该放置的位置
1. 可以放在 HTML 的 style 标签中 ，之后通过 CSS 选择器对相应的标签生效。
<head>
<style>
div {
background-color:red;
width:100px;
height:100px;
}
</style>
</head>
div是 CSS 使用的一种选择器，用于在当前的 HTMl 页面上选中所有的div标签。
2. 放在一个单独的文件中，这个单独的文件一般以 .css结尾，就叫 css 文件。之后可以在 html 文件中引入。推荐
a. 先在某个路径下写一个CSS文件，在这个文件中写入需要的所有样式：
// qf.css 文件内容
.c1{
background:url("meizi.jpg") no-repeat -163px -215px;
}
/*
上面的样式的意思是：给类名为 c1 的元素设置背景图片，
url("图片路径")
*/
b. 之后再在 html 文档中引入该 css 文件
<head>
<link rel='stylesheet' href='./qf.css'/>
</head>
3. 针对某一个标签设置
<div style="color: red;size: 10px">测试</div>
三、 CSS 选择器
要对 html 标签进行相关操作，需要先找到他们，找到他们的方法就是使用 CSS 的选择器。
1. 选择器的分类
- 直接选择器
- 组合选择器
- 层级选择器
2. 选择器之间的优先级
不同类型的优先级:
id > 属性 > 类 > 标签
但是可以使用 !important 指定某一类优先级最高
相同类型的优先级： 就近原则，即谁在最后谁生效
3. 选择器详解
a. 直接选择器
/*标签选择器*/
a{
color:red !important;
}
/*id选择器*/
#a1{
color: blue;
}
#sy{
color: greenyellow;
}
/*class(类)选择器 重要指数 五颗星 ☆☆☆☆☆ */
.c1{
color: blue;
}
/*属性选择器*/
input[type="text"]{
color: blue;
}
a[n="1"]{
font-size: 20px;
}
b. 组合选择器 : 重要指数五颗星 ☆☆☆☆☆
类名 c1 和 c2 的标签
.c1,.c2{
color: greenyellow;
}
c. 间接选择器包括以下几种：五颗星 ☆☆☆☆☆
层级选择器：依据标签之间嵌套关系来对标签进行选择
五颗星 ☆☆☆☆☆
div 下面的 p 标签及其下面的所有标签中含有 p 标签的都生效
div p{
color:gold;
}
div>p 表示只对 div 下面 第一层含有 p 标签及其这层下面含有 p 标签的生效，
若是 div 下面的第一层含有非 p 标签，且其下面含有 p 标签的，则不生效.
div>p{
color:green;
}
多层的层级选择器
/*表示，类名为 c1 下面的第一层的 p 标签下面的所有 span 标签*/
.c1>p span{
color:blue;
}
d. hover 伪类
当鼠标放在其上面时，CSS才生效
#hover1:hover{
color: red;
}
四、 CSS 样式详解
1. 边框和圆角
border 给元素添加边框
/* 画个边框
border: 表示画边框
border: 2px; 边框线条的粗细程度
border: 3px solid red; 实线边框，线条颜色是红色，不设置颜色就是黑色
dashed: 3px dashed blue; 虚线边框，颜色蓝色
边框出现在一个标签的左侧
border-left
padding: 10px 设置边框占多高，其高度可以比父标签还高
*/
border-radius 是向元素添加圆角边框。
border-radius: 100%;
/*
100% 原型， 前提是元素是正方形
50% 椭圆
*/
2. 颜色和渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
从上到下
下面的实例演示了从顶部开始的线性渐变。三种颜色：
颜色可以使用 语义表示法，也可以使用色彩代码等方式；
background: linear-gradient(red, #f0ad4e, #aaffaa); /* 标准的语法 */
image
从左到右
background: linear-gradient(to right, red,#f0ad4e,#aaffaa);
向右下角
background: linear-gradient(to bottom right, red,#f0ad4e,#aaffaa);
由中心向外渐变
background:radial-gradient( red,#f0ad4e,rgba(255,0,0,0));
3. 文字和字体
/*字体颜色*/
color:white;
/*背景色*/
background-color:antiquewhite;
/*字体加粗的大小*/
font-weight:bold;
/*设置字体之间的间距*/
letter-spacing: 3px;
.bs{
/*字体大小*/
font-size:22px;
background-color: greenyellow;
height:30%;
width:30%;
/*字体大小调节小技巧，在浏览其中按 F12 后直接调整，调整好，再在代码中改*/
}
.c1{
/*字体颜色和大小*/
color: red;
font-size: 30px;
}
/*字体左右居中*/
.c1{
text-align: center;
}
/*字体上下居中, 需要设置 行高的值等于元素的高度值*/
.c1 {
height: 100px;
line-height: 100px;
}
4. 背景
/*背景图片,图片的高度和宽度是对于此标签进行填充的，
默认是重复填充的*/
background-image: url(shark.png);
/*!*background-repeat: 设置不重复：*/
/* 下面三种同时只能出现一种
repeat-x; x 轴不重复,即竖向不重复
repeat-y; y 轴不重复，即横向不重复
no-repeat; 都不重复
*/
/*例如：background-repeat:repeat-x;*/
/*抠图*/
background-image: url(meizi.jpg);
background-repeat: no-repeat;
background-position-x: -163px; /*由左向右*/
background-position-y: -215px; /*由上到下*/
/*以上可以写成一行：*/
background:url(meizi.jpg) no-repeat -163px -215px;
}
4. display 控制显示
/*标签显示属性：
隐藏标签：
display:none 表示不显示,可以设置召之即来，挥之即去。
块标签和内联标签互换
display:block 表示让内联变为块
display:inline 表示把块标签变为内联标签
display:inline-block 表示同时具有内联和块的属性，很有用
关于inline-block 特别对于让一个内联标签具有块标签的属性时
是非常有用的，因为内联标签是不能设置高度和宽度的，而块标签
又是独占一行的，就是说定义一个块标签时，假如这个块标签宽度
并不需要要一整行，只需要半行，但剩余的一半空间也不能放其他
的内容了。而利用inline-block可让一个内联标签可以自定义高度
宽度，同时也不会独占一整行的空间。
*/
.meizi{
display: none;
}
.in-block1{
display:inline-block;
background-color: green;
}
.in-block2{
display:inline-block;
background-color: red;
}
6. 布局
/*通过选择器，进行穿衣服*/
.s1{
/*高度*/
/*用百分比形式表示的话，是对其父级标签有实际高度时才有效
例如下面的 50% 表示占父级标签的 50%
*/
height:50%;
/*宽度*/
/*对于宽度的百分比形式来表示时是可以直接生效的，
是相对于整个浏览器的宽度的百分比。
当然也可以对于父级的宽度的百分比*/
width:40%;
/*边距：
padding: 30px; 内边距：移动自身的中心，但移动后被空出来的
距离还是属于自己（英文直译：衬垫）
padding-left: 30px; 把自己的中心从左边的向右移动30像素的距离
margin:30px; 外边距 移动自身整体，
移动后被空出来的距离就不在属于自己了，
但其他标签也不可使用（英文直译：合并）
margin-left: 30px; 同样的从左边开始移动30像素的距离
*/
.bk1{
background-color:#dddddd;
padding:10px;
/*解决当鼠标放到伪类上，边框不再闪烁，就要首先在这里设置一个边
框，让他先占个位置，之后再给其加上伪类属性。所以把它的颜色先
要设置为透明
transparent 就是透明的意思
*/
border-left:10px solid transparent;
}
.bk1:hover{
border-left:10px solid rebeccapurple;
}
/*外边距*/
.margin{
margin:30px;
background-color: greenyellow;
}
.margin-left{
margin-left: 30px;
background-color: red;
}
.margin-right{
margin-right: 30px;
background-color: aqua;
}
/*内边距*/
.padding{
padding: 20px;
background-color: rebeccapurple;
}
.padding-left{
padding-left: 20px;
background-color: green;
}
/*鼠标放上时，会显示不同的图标，也可以自定义显示自己的图标*/
/*.cousor{
cursor:wait; 等待
cursor:pointer; 小手
}*/
/*设置某一个标签在浏览器出现的位置*/
/*
.position{
相对定位
position: relative;
这个单独使用没有意义，需要和下面的absolute结合使用
一般的使用场景是，relative 在外层，absolute 在内层；
起到的效果是：
可以设置 absolute 相对于 relative 层出现的位置；
值得注意的是：
absolute 向外层找 relative 时，会一直找，直到找到为止，若都没有，则
会相对于当前页面来定位。就像直接使用 absolute 一样的效果。
相对定位
position: absolute;
设置把某个标签永远固定在浏览器的某个位置，其位置会随着浏览器内容的滚动而变化，即跟随浏览器的滚动。
固定定位
position: fixed; 重要指数：☆ ☆ ☆ ☆ ☆
设置把某个标签永远固定在当前浏览器窗口的某个位置，就是浏览器滚动，它不移动，使用场景： 返回顶部功能
上面几种都需要配合使用下面的位置属性：
top:0px;
right:0px;
left:0px;
bottom:30px;
}
*/
.fixed{
position:fixed;
right:0px;
bottom:10px;
color:white;
background-color: rebeccapurple;
}
.relative{
position: relative;
widht:500px;
background-color: greenyellow;
}
.abs{
position:absolute;
right:0px;
bottom:50%;
background-color: red;
}
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 详解</title>
</head>
<link href="./qf.html" />
</head>
<body>
<div class="c1">西瓜甜</div>
<a href="#s1">
<img src="meizi.jpg"/>
</a>
<div>
<p id="sy" class="c2"> 鲨鱼</p>
<p n="1" class="c1">
兰博基尼
<a> 宝马</a>
牛头
</p>
</div>
<div class="d1" id="div1">
<p>
我是第一层
<span>span</span>
</p>
<a>
<p>我是第二层</p>
</a>
</div>
<a id="a1" n="1" class="c1">我是自定义的key=value</a>
<p calss="c1">我是类</p>
<div id="hover1">
<a>我是伪类，鼠标放在我上面，我才会变</a>
</div>
<input type="text"/>
<input type="text"/>
<input type="password"/>
<h2>下面是穿衣服</h2>
<div class="s1" id="s1">穿衣服</div>
<div style="background-color:brown;">
<div class="bs">穿衣服</div>
</div>
<h2>设置隐藏</h2>
<input type="button" value="妹子召之即来" onclick="showDiv();"/>
<input type="button" value="妹子挥之即去" onclick="hideDiv();"/>
<div id="m1" class="meizi">
<img src="meizi.jpg" />
</div>
<!--执行脚本-->
<script>
<!--设置要显示时需要执行的函数-->
function showDiv() {
document.getElementById('m1').classList.remove('meizi');
}
<!--设置要显示时需要执行的函数-->
function hideDiv() {
document.getElementById('m1').classList.add('meizi');
}
</script>
<br/>
<a class="in-block1">设置display:inline-block 属性后,a标签可以设置高度了</a>
<a class="in-block2">设置display:inline-block 属性后,a标签可以设置高度了</a>
<div class="in-block1">设置display:inline-block 属性后,div标签也不独占了</div>
<div class="in-block2">div</div>
<br/>
<!--画个边框-->
<div style="border:2px dashed blue;"></div>
<br/>
<!--边框的左侧有个小竖条-->
<div style="background-color:#dddddd;border-left:10px solid red;padding:20px;">搜索</div>
<br/>
<!--在head中设置边框-->
<div class="bk1">
搜索，我含有伪类属性
</div>
<!--设置标签之间的边距-->
<div class="margin">margin</div>
<div class="margin-left">margin-left</div>
<div class="margin-right">margin-right</div>
<div class="padding">padding</div>
<div class="padding-left">padding-left</div>
<!--利用 position 设置 返回顶部-->
<div class="fixed">返回顶部</div>
<!--abolute in relative-->
<div class="relative">
我是 relative
<div class="abs">
我是相对于 relative 的绝对位置
</div>
</div>
</body>
</html>
CSS 之 如何布局一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--如何利用之前学到的知识，开始布局一个网页-->
<style>
/*页面要不要四周留白*/
body{
margin: 0;
}
/*页面中是否有一大块需要占整个页面大部分*/
.w{
/*自身宽度*/
width: 980px;
/*设置整个标签的位置
margin：边距的意思
0 上下距离不动，对于父级标签
auto 左右去自适应，对于父级标签
假如是:
margin：0；
设置的是上下左右
假如是：
margin:0 auto 0 auto;
设置的顺序依次是：上、右、下、左
*/
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
/*设置页面头属性*/
.pg-header{
height: 48px;
background-color: brown;
color: white;
/*字体上下居中*/
line-height: 48px;
}
.pg-header .menus a{
padding: 0 10px;
display: inline-block;
}
/*设置伪类属性，效果是：鼠标放上后显示背景色*/
.pg-header .menus a:hover{
background-color: bisque;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<div class="menus left">
<a href="#">菜单一</a>
<a href="#">菜单二</a>
<a href="#">菜单三</a>
<a href="#">菜单四</a>
</div>
<div class="menus right">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>
<div class="pg-body">
<div class="w">
asdka;sdfjk;alsd
</div>
</div>
</body>
</html>
