作为一个后端程序员必须要会的基础的CSS知识
CSS的一些基础知识
一. 三原色
在网页中我们可以直接书写颜色的名字，但是却记不了这么多的单词。可以使用 RGB（red green blue）三原色来表示颜色，书写形式为：
#ff00ff;
注意: 必须以#开头，后面紧跟着为6个16进制数，前两位为红色，中间两位为绿色，最后两位为blue.
#ff0000; 红色
#00ff00; 绿色
#0000ff; 蓝色
#ffffff; 白色
#000000; 黑色
二. 字体样式
font-size:10px; 字体字号
font-weight:100; 字体粗细(100-900正整数)
font-color:#000000 字体颜色(多种方式)
三. 样式选择器
3.1 标签选择器(重要）
3.2 id选择器(不重要,主要是让给js用)
"box1">
"box2">
在实际的工作中，定义样式采用class, 使用js的使用id.
3.3 类选择器(非常重要)
"box1">
"box2">
"box1">
为什么使用类选择器：
1. 为了样式可重用性。
2. 为了代码的可维护性。
3.4 通配符选择器
* {
margin: 0;
padding: 0;
}
在实际工作只用这一种用法。
3.5 后代选择器(非常重要)
.box1 li{ /** 中间必须是空格，表示class为box1, 所有的后代li都应用以下样式 */
color: green;
}
<body>
<div class="box1">
<ul>
<li>用户li>
<li>系统li>
<li>菜案li>
ul>
div>
<ul class="box1">
<li>用户li>
<li>系统li>
<li>菜案li>
ul>
<div class="box1">
<div>
<div>
<ul>
<li>电脑li>
<li>手机li>
<li>计生用品li>
ul>
div>
div>
div>
body>
3.6 子选择器(用的较少)
<style>
/**
.box1的直接的儿子p, 变为红色
*/
.box1>p {
color: red;
}
style>
head>
<body>
<div class="box1">
<p>文字p>
<p>系统p>
<p>菜案p>
div>
<div class="box1">
<div>
<p>文字1p>
<p>系统1p>
<p>菜案1p>
div>
div>
body>
3.7 交集选择器(用的很少)
<head>
<style>
/**
p.red 意思是即是p标签，class又为red
*/
p.red{
color: red;
}
style>
head>
<body>
<p class="red">红色p>
<p class="red">红色p>
<p class="red">红色p>
<p>绿色p>
<p>绿色p>
body>
3.8 并集选择器(非常重要)
<style>
/** 所有p标签，span标签，含有class="red"下的所有的li标签 */
p, span, .red li{
color: red;
}
/*p {
color: red;
} */
/*span {
color: red;
}*/
/*.red li {
color: red;
}*/
style>
head>
<body>
<p>redp>
<p>redp>
<div class="red">
<span>文字span>
<ul>
<li>电脑li>
<li>手机li>
ul>
div>
<div>greendiv>
<span>redspan>
<span>redspan>
body>
3.9 链接伪类选择器(非常重要)
爱恨法则(love hate)
lv包包，hao
a {
text-decoration: none; /** 去掉a标签的下划线 */
}
/* 是连接正常情况情况下的样式 */
a:link {
color: orange;
}
/* 访问过之后所呈现的颜色 */
a:visited {
color: red;
}
/* 鼠标停留在a标签上的样色 */
a:hover {
color: green;
}
/* 当鼠标按下的时候，但是没有松手的时候呈现的样式 */
a:active {
color: darkblue;
}
A. a标签中不要嵌套a标签。
B. a标签中虽然可以放块级元素，但是在实际的工作中，我们需要将其转换为块级元素。
C. 在实际的工作总，a标签用的最多只有hover.
3.10 css3高级选择器
<style>
/** ul下的第一个li标签 */
/**
ul > li:first-child {
color: #41A0BF;
}
*/
/** ul下的第一个li标签 */
ul > li:nth-child(1) {
color: deeppink;
}
/** ul下的第二个li标签 */
ul > li:nth-child(2) {
color: green;
}
/** ul下的第三个li标签 */
ul > li:nth-child(3) {
color: purple;
}
/** ul下的第四个li标签 */
ul > li:last-child {
color: red;
}
style>
<body>
<ul>
<li>电脑li>
<li>手机li>
<li>计生用品li>
<li>日用品li>
ul>
body>
nth-child(odd)表示获取奇数行
nth-child(even)表示获取偶数行
四. 行内元素与块级元素
块级元素:独占一行(p、h、li、div、table、form)
行内元素：可以共享一行（span 、a、b、i、u、input、img）
块级元素是可以指定宽高的，但是行内元素的宽高是根据内容而定，指定宽高无效。
4.1 特殊的p标签
p标签中可以放行内元素，但是不能放任何的块级元素。
4.2 特殊的img标签
img标签是一个行内元素，但是它是可以设置宽高，所以说img是行内块级元素。
6.4 显示模式的转换
dispaly: inline; # 将元素转为行内样式
display: block; # 将元素转为块级元素
dispaly: inline-block; 行内块级元素会导致在前端领域非常经典的空白间隙问题。
解决空白间隙两种方案：
-
在body上设置font-size: 0; 但是在每个盒子中得去指定字体的大小。
-
第二种方式，使用一个小技巧
<div>电脑div><div>手机div><div>平板div>
五. 单行文本垂直显示
让文字的行高等于盒子的高度就可以实现垂直居中。
.vc{
/*行高简单说其实就是所在块的高度*/
height: 100px; /*块的高度*/
line-height: 100px; /*行高.将行高设置成跟块的高度一样,就是垂直居中*/
text-align: center;/*水平居中*/
background-color: #e3e3e3;
}
六. 背景
背景主要的作用是给盒子设置背景颜色或者背景图片。
background-color: red; /* 背景颜色为红色 */
background-image: url('images/1.png') /** 设置背景图片 */
/* background-repeat: repeat-y; 垂直方向重复 */
/* background-repeat: repeat-x; 水平方向重复 */
background-repeat: no-repeat; /** 背景不重复 */
背景的位置：
/* background-position 有两个属性，一个是水平方向(left center right)，一个为垂直方向(top center bottom) */
background-position: center top; /* 水平方向居中，垂直方向在顶部 */
background-position: left bottom; /* 水平方向在左边，垂直方向在底部 */
background-position: left center; /* 水平方向在右边，垂直方向居中 */
七. CSS的三大特性
7.1 层叠性
div {
height: 200px;
width: 200px;
}
div {
height: 100px;
width: 100px
background-color: red;
}
如果两个中有样式是一样的，那么就是按照就近原则获取样式。离调用者越近，就调用谁的。
7.2 继承性
text-、font-、line-以及color都可以实现继承。
a标签对于color是无法继承，所以对于color子标签的颜色需要单独的设定。
7.3 优先级(权重)(重点)
权重是判断一个盒子最终呈现的样式，权重判定的标准是首先去比较整个选择器部分的id，如果id部分都相同的，那么去比较class部分，如果class部分都相同的话就去比较标签部分。如果整个权重部分都相同的话，那么就按照就近原则去决定最终的样式。
第一优先级 第二优先级 第三优先级
id, class, tag
例如如下的盒子:
<div class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">文字div>
div>
div>
现有如下的样式定义:
.box1 #box3 {
/* 权重值为: 1,1,0 */
color: pink;
}
div#box3 {
/* 权重值为: 1,0,1 */
color: purple;
}
.box1 .box2 .box3 {
/* 权重值为: 0,3,0 */
color: gray;
}
.box1 div .box3 {
/* 权重值为: 0,2,1 */
color: greenyellow;
}
.box1 div div {
/* 权重值为: 0,1,2 */
color: blue;
}
.box1 {
/* 权重值为: 0,1,0 */
color: red;
}
.box1 .box2 #box3 {
/*权重值为: 1,2,0 */
color: deeppink;
}
.box1 #box2 .box3 {
/*权重值为: 1,2,0 */
color: orange;
}
所以盒子中最终的颜色值为: origin.
八. 盒子模型
8.1 border
border为盒子的边框，可以通过如下属性来指定：
border: 1px solid red; /** 设置四边的边框均为1个像素的红色实线 */
border-left: 1px solid red; /** 设置边框的左边框为1个像素的红色实线 */
border-right: 1px solid red; /** 设置边框的右边框为1个像素的红色实线 */
border-top: 1px solid red; /** 设置边框的上边框为1个像素的红色实线 */
border-bottom: 1px solid red; /** 设置边框的下边框为1个像素的红色实线 */
8.2 padding
padding为盒子的内边距，可以通过如下方式来设置内边距
padding-left: 15px; /** 左侧内边距为15像素 */
padding-right: 15px; /** 右侧内边距为15像素 */
padding-top: 15px; /** 上内边距为15像素 */
padding-bottom: 15px; /** 下内边距为15像素 */
还可以通过padding的方式来直接指定:
/** 从上开始按照顺时针的方向依次对应，依次为上(10px)、右(20px)、下(15px)、左(5px) */
padding: 10px 20px 15px 5px;
/** 第一个值为上(10px), 第二个值为左右内边距(20px), 第三个值为下内边距(15px) */
padding: 10px 20px 15px;
/** 第一个值为上下内边距(10px)，第二个值为左右内边距(15px) */
padding: 10px 15px;
/** 上下左右的内边距均为10px */
padding: 10px;
padding: 4个值，上右下左。
3个值, 第一个值表示上，第二个值表示左右, 第三个值表示下面。
2个值，第一个值表示上下，第二个值是左右
1个值，所有都是一样的。
8.3 margin
margin为盒子的外边距，可以通过如下方式来设置内边距
margin-left: 15px; /** 左侧外边距为15像素 */
margin-right: 15px; /** 右侧外边距为15像素 */
margin-top: 15px; /** 上外边距为15像素 */
margin-bottom: 15px; /** 下外边距为15像素 */
还可以通过padding的方式来直接指定:
/** 从上开始按照顺时针的方向依次对应，依次为上(10px)、右(20px)、下(15px)、左(5px) */
margin: 10px 20px 15px 5px;
/** 第一个值为上(10px), 第二个值为左右外边距(20px), 第三个值为下外边距(15px) */
margin: 10px 20px 15px;
/** 第一个值为上下外边距(10px)，第二个值为左右外边距(15px) */
margin: 10px 15px;
/** 上下左右的外边距均为10px */
margin: 10px;
margin: 4个值，上右下左。
3个值, 第一个值表示上，第二个值表示左右, 第三个值表示下面。
2个值，第一个值表示上下，第二个值是左右
1个值，所有都是一样的。
8.4 盒子模型的坑
a垂直方向上，垂直间隙是盒子中最大外边距（margin）决定，谁的大，就是谁的。
**b.**水平方向上，不存在间隙层叠，是以两个盒子的外间距的和为间隙的。
垂直方向的外边距合并，解决方式：只用指定一个盒子的margin-top或者margin-bottom值。
父子盒子外边距的合并(塌陷)，解决方式：
1) 父盒子指定上边线；
2) 父边框给定padding;
3) 父边框给，overflow: hidden;
"outbox">
"inbox">
九. 浮动
9.1 浮动
浮动是开发的过程中用的最多的布局方式，使用如下属性来设置盒子的浮动:
float: left; // 左浮动
float: right; //右浮动
9.2 清除浮动
因为浮动会导致高度塌陷的问题，所以我们需要清除浮动。
1) 内墙法，即在父元素中额外的添加一个盒子，给盒子设定样式为：clear: both。w3c推荐的方式;
"box1">
"box2">
"clearfix">
2) 父元素添加：overflow: hidden;
"box">
"box1">
"box2">
3) 双伪元素浮动(腾讯、小米均在使用)
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
"clearfix" >
"box1">
"box2">
十. 定位
10.1 相对定位
相对定位是相对于盒子之前的位置做一些响应的改变，使用方式如下：
position: relative; /** 相对定位 */
left: 20px; /** 相对之前的位置，往右边移动20个像素 */
top: 20px; /** 相对之前的位置，往下边移动20个像素 */
相对定位的的两个主要作用是：
1) 微调元素；
2) 子绝父相:子容器设置绝对定位，父容器设置相对定位。
"box">
"box1">
"box2">
10.2 绝对定位
绝对定位在相对定位的盒子中才有实际的意义，如果父盒子没有这事相对定位，那么就是相对于浏览器的左上角进行定位。
position: absolute; /** 绝对定位 */
top: 20px; /* 相对于浏览器或者设置了相对定位的父盒子的上面往下移动20个像素 */
十一. css3样式
11.1 渐变
/**
linear-gradient() 第一个值为到哪个方位：top top, to bottom, to left, to right
第二个值为起始颜色，
第三个值为最终的颜色
*/
background: linear-grediant(to top, #ffffff, red);
/*
to right ; to top ; to left ; to bottom
background-image:linear-gradient(to 方向,起始颜色值,结束颜色值)
第一个值:to top 表示渐变往哪里开始
第二个值 开始的颜色
第三个值 结束的颜色
*/
.yinyin{
height: 50px;
width: 600px;
margin: 50px 50px;
/*background-image: linear-gradient(to top,#bbbbbb,#123456 );*/
background-image: linear-gradient(to right,#000000,#3481cf);
}
11.2 阴影
/**
第一个值为x轴方向的阴影
第一个值为y轴方向的阴影
第三个值为模糊程度
*/
box-shadow: 5px 5px 10px #51b7ec;
11.3 状态改变
transform属性常用的有三个: translate(偏移)、rotate（旋转）、scale（变大变小）
translate
transform: translate(10px,5px); /** 水平方向向下移动10px，垂直方向向上移动5px */
.box{
height: 50px;
width: 50px;
background-color: #3481cf;
margin: 500px;
}
.box:hover{
/*第一个值表示水平方向的偏移
第二个值表示垂直方向的偏移
*/
/*transform: translate(200px,100px);*//*向右下角移动*/
transform: translate(-100px,100px);/*向左下角移动*/
}
rotate
transform: rotate(30deg); /** 垂直方向选装30deg */
.xz{
border-bottom: 50px solid #51b7ec;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 0;
margin: 50px;
}
.xz:hover{
/*鼠标移动上去,顺时针旋转45度角*/
/*transform: rotate(45deg);*/
/*鼠标移动上去,逆时针旋转180度角*/
transform: rotate(-180deg);
}
scale
transform: scale(1.2); /** 将盒子整体放大1.2倍 */
.box{
height: 100px;
width: 100px;
background-color: #a09a9f;
margin: 50px;
}
.box:hover{
/*值是正的且大于1,变大*/
/*transform: scale(1.5);*/
/*值是正的且小于1,变小*/
transform: scale(0.5);
/*如果值是负数,图像颠倒,变大*/
transform:scale(-1.5)
}
应用上述的知识点，能够做出html中一些常见的样式了。特别是盒子模型。
盒子模型中注意点：
/*盒子的真实大小:内容+边框*2+内边距*2+外边距*2*/
.box{
background-color: pink; /*盒子的背景颜色*/
height: 200px;/*盒子内容的高度*/
width: 200px;/*盒子内容的宽度*/
/*border表示边框.20px为边框大小,solid表示边框是实线,red表示颜色*/
border: 20px solid red;
padding:20px;/*内边距,就是内容到边框的距离*/
margin: 30px;/*外边距,边框到最外层的距离*/
}
针旋转180度角*/
transform: rotate(-180deg);
}
**scale**
```css
transform: scale(1.2); /** 将盒子整体放大1.2倍 */
.box{
height: 100px;
width: 100px;
background-color: #a09a9f;
margin: 50px;
}
.box:hover{
/*值是正的且大于1,变大*/
/*transform: scale(1.5);*/
/*值是正的且小于1,变小*/
transform: scale(0.5);
/*如果值是负数,图像颠倒,变大*/
transform:scale(-1.5)
}
应用上述的知识点，能够做出html中一些常见的样式了。特别是盒子模型。
盒子模型中注意点：
/*盒子的真实大小:内容+边框*2+内边距*2+外边距*2*/
.box{
background-color: pink; /*盒子的背景颜色*/
height: 200px;/*盒子内容的高度*/
width: 200px;/*盒子内容的宽度*/
/*border表示边框.20px为边框大小,solid表示边框是实线,red表示颜色*/
border: 20px solid red;
padding:20px;/*内边距,就是内容到边框的距离*/
margin: 30px;/*外边距,边框到最外层的距离*/
}