Css笔记

CSS笔记

/*一、基础选择器*/
/*1.1 标签选择器*/
div {
    color: pink;
}

/*1.2 类选择器*/
.red {
    color: red;
}

/*1.3 id选择器*/
#pink {
    color: pink;
}

/*1.4 通配符选择器*/
* {
    color: red;
}

/*二、字体属性*/
body {
    /*字体系列*/
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    /*字体大小*/
    font-size: 16px;
    /*字体粗细 400和700*/
    font-weight: 700;
    /*文字样式 normal不倾斜 italic倾斜 */
    font-style: normal;
    /* 复合属性: 简写的方式  节约代码 */
    /* font: font-style  font-weight  font-size/line-height  font-family; */
}

/*三、文本外观*/
div {
    /*颜色*/
    /* color: #cc00ff; */
    color: rgb(255, 0, 255);
    /*文本对齐 left、center、right*/
    text-align: right;
    /*装饰文本 underline下划线 overline上划线 line-through穿过文本 blink闪烁 inherit继承父类 none取消装饰*/
    text-decoration: overline;
    /*文本缩进 em或者px */
    text-indent: 2em;
    /*行间距*/
    line-height: 25px;
}

/*四、emmet语法*/

/*五、复合选择器*/
/*5.1 后代选择器*/
.nav li a {
    color: yellow;
}

/*5.2 子元素选择器*/
.nav > a {
    color: red;
}

/*5.3 并集选择器*/
div,
p,
.pig li {
    color: pink;
}

/*5.4 链接伪类选择器*/
a:link { /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 (开发常用)*/
    color: #333;
    text-decoration: none;
}

a:visited { /*2. a:visited 选择点击过的(访问过的)链接 */
    color: orange;
}

a:hover { /*3. a:hover 选择鼠标经过的那个链接 (开发常用)*/
    color: skyblue;
}

a:active { /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
    color: green;
}

/*5.5 focus伪类选择器*/
input:focus { /* 把获得光标的input表单元素选取出来 */
    background-color: pink;
    color: red;
}

/*六、元素显示模式切换 块级元素block、行内元素inline、行内块元素inline-block 不显示none*/
a,
span,
div {
    display: block;
}


/*七、背景*/
div {
    width: 300px;
    height: 300px;
    /*背景颜色 透明transparent*/
    background-color: pink;
    /*背景图片*/
    background-image: url(http://www.itcast.cn/2018czgw/images/logo.png);
    /*背景图片平铺 不平铺no-repeat 平铺的repeat 沿着x轴平铺repeat-x 沿着Y轴平铺repeat-y */
    background-repeat: repeat-y;
    /*背景位置 left top right bottom center 也可40px */
    background-position: top;
    /*把背景图片固定住*/
    background-attachment: fixed;
    /*复合写法*/
    /*background: black url(images/bg.jpg) no-repeat fixed center top;*/
    /*背景色透明写法*/
    background-color: rgba(0, 0, 0, .3);
}

/*八、css三大特性: 层叠性、继承性、优先级*/
/*8.1、权重
行内样式1000
   id是0100
   类是0010
 标签是0001
 继承是0000
   *是0000
 */
/*8.2 权重叠加 权重虽然会叠加,但是永远不会有进位*/

/*九、盒子模型*/
/*9.1 边框*/
div {
    width: 300px;
    height: 200px;
    /* border-width 边框的粗细  一般情况下都用 px */
    border-width: 5px;
    /* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
    border-style: solid;
    /* border-color 边框的颜色  */
    border-color: pink;
    /* 边框的复合写法 简写:  */
    /*border: 5px solid pink;*/
    /* 上边框 */
    border-top: 5px solid pink;
    /* 下边框 */
    border-bottom: 10px dashed purple;
    /* 左边框 */
    border-left: 10px dashed purple;
    /* 右边框 */
    border-right: 10px dashed purple;
}

/*9.2 合并相邻的边框 */
table,
td, th {
    border: 1px solid pink;
    border-collapse: collapse; /* 合并相邻的边框 */
}

/*9.3 边框会影响盒子的实际大小*/

/*9.4 内边距*/
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 内边距复合写法(简写) */
    padding: 5px 10px 20px 30px;
    /*padding-left: 5px;*/
    /*padding-top: 5px;*/
    /*padding-bottom: 5px;*/
    /*padding-right: 5px;*/
}

/*9.5 内边距会影响盒子实际大小*/
/*指定width,再给padding,盒子会变大。解决方法：width减去增加的左右padding值。*/
/*没有width,padding-left/right,盒子就不会撑大。(块元素会继承父亲的盒子大小,只要没有写明width就不会撑大！！！)*/

/*9.6 外边距*/
div {
    /*margin-top: 20px;*/
    margin: 30px 50px;
}

/*9.7 块级盒子水平居中对齐*/
div {
    width: 900px;
    height: 200px;
    background-color: pink;
    /*块级盒子水平居中对齐 使用auto*/
    margin: 100px auto;
}

/*9.8 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */

/*9.9 外边距合并-相邻块级元素垂直外边距合并 <重点是垂直方向>
在“标准文档流中” 通过 margin 定义块元素的垂直外边距时,可能会出现外边距的合并现象；
合并的情况有两种:
一种是相邻块元素垂直外边距的合并 -> 解决办法：可以给其中的一个元素设置垂直方向上的 margin 值来解决这种问题
另一种是嵌套块元素垂直外边距的合并 -> 解决办法：为父元素设置上边框；为父元素设置上内边距；为父元素设置 overflow:hidden 样式属性
*/

/*9.10 清除内外边距*/
* {
    margin: 0;
    padding: 0;
}

/*十、去掉li前面的小圆点*/
li {
    list-style: none;
}

/*十一、圆角边框*/
div {
    /*border-radius: 10px;*/
    border-radius: 50%;
    /* border-radius: 10px 20px 30px 40px; */
    /* border-radius: 10px 40px; */
    /*border-top-left-radius: 20px;*/
}

/*十二、盒子阴影*/
div:hover { /* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */
    box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}

/*十三、文字阴影*/
div {
    text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}

/*十四、浮动 左浮动left 右浮动right 不浮动none */
.right {
    float: right;
}

/*十五、浮动特性*/
/*
1、脱离标
2、浮动盒子一行显示 只能横向浮动,不能纵向浮动
3、浮动元素具有行内块元素特点
*/

/*十六、浮动技巧*/
/*浮动元素搭配标准流父盒子*/
/*如果一个子元素浮动了,尽量其他盒子也浮动,这样保证这些子元素一行显示*/

/*十七、清除浮动*/
/*17.1 额外标签法*/
/*
在父盒子里面,所有浮动后面加入div,必须是块级元素不能是行内元素
<div class="clear"></div>
*/
.clear {
    clear: both;
}

/*17.2 父级添加overflow属性, 不能有溢出*/
.box {
    /* 清除浮动 */
    overflow: hidden;
}

/* 17.3 伪元素清除浮动 父级添加after属性 */
/*
<div class="clearfix">父元素</div>
*/
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* IE6、7 专有 */
    *zoom: 1;
}

/* 17.4 父级添加双伪属性-推荐 */
/*
<div class="clearfix">父元素</div>
*/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/*十八、CSS书写规范 属性书写顺序*/
/*
1、布局定位属性 display第一写
2、自身属性
3、文本属性
4、其他属性
*/

/*十九、四种定位 子绝父相 */
/*19.1 定位 = 定位模式 + 边偏移*/
/*19.2 静态定位static 相对定位relative 绝对定位absolute 固定定位fixed*/
.box1 {
    /*边偏移 专属于定位*/
    top: 100px;
    bottom: 100px;
    left: 100px;
    right: 100px;
    position: relative;
}

/*19.3 相对定位 相对于自身定位 不脱标*/

/*19.4 绝对定位 相对于祖先元素定位 脱标 飘的比浮动高 */

/*19.5 固定定位 相对可视化窗口定位 脱标 */

/*19.6 固定定位小技巧 固定到版心右侧*/
.fixed {
    position: fixed;
    /* 1. 走浏览器宽度的一半 */
    left: 50%;
    /* 2. 利用margin 走版心盒子宽度的一半距离 */
    margin-left: 405px;
}

/*19.7 粘性定位(了解) sticky 兼容性很差 IE不支持*/
.nav {
    /* 粘性定位 */
    position: sticky;
    top: 20px;
    /*必须添加top、left、right、bottom其中一个才有效*/
}

/*19.8 定位叠放顺序 */
.div {
    background-color: red;
    z-index: 1; /*可以为正整数、负整数、0 只有定位的盒子才有此属性*/
}

/*19.9 技巧 绝对定位水平垂直居中*/
.box {
    position: absolute;
    /* 1. left 走 50%  父容器宽度的一半 */
    left: 50%;
    /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
    margin-left: -100px;
}

/*19.10 定位的特殊特性*/
/*
1、行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度
2、块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
3、脱标的盒子不会触发外边距塌陷
*/

/*二十、显示与隐藏*/
div {
    display: none; /*隐藏后不占有原来的位置,但还在html中 常用*/
    visibility: visible; /*继续占有原来位置 隐藏hidden 显示visible*/
    overflow: hidden; /*只针对溢出的部分 显示visible 修剪hidden 滚动条scroll 滚动条auto 继承inherit */
    /*如果有定位的盒子,谨慎使用overflow: hidden; */
}

/*二十一、精灵图*/
.box1 {
    width: 60px;
    height: 60px;
    margin: 100px auto;
    /*设置宽高+指定背景位置*/
    background: url(http://www.itcast.cn/2018czgw/images/logo.png) no-repeat -182px 0;
}

/*二十二、字体图标*/
/*22.1 字体图标的下载+引入*/
/*
下载网址有 https://icomoon.io/ 和 https://www.iconfont.cn/
选择图标 -> 下载代码 -> 解压到项目根目录 -> 引入iconfont.css文件
<link rel="stylesheet" href="font/iconfont.css">
然后在demo.html中找合适的字体图标的代码即可,使用字体图标的标签需要添加 class="iconfont"
*/

/*22.2 字体图标的追加*/
/*寻找iconfont.json或者selection.json上传重新下载即可*/

/*二十三、CSS三角制作*/
.box2 {
    /*先设为宽高为0*/
    width: 0;
    height: 0;
    /*设置四边为透明*/
    border: 50px solid transparent;
    /*设置一条边颜色*/
    border-left-color: pink;
    /* 为了照顾兼容性 */
    line-height: 0;
    font-size: 0;
}

/*二十四、用户界面样式*/
/*24.1 表单*/
textarea {
    /* 取消表单轮廓 */
    outline: none;
    /* 防止拖拽文本域 */
    resize: none;
}

/*24.2 鼠标样式*/
li {
    /*默认default 小手pointer 移动move 文本text 禁止not-allowed*/
    cursor: default;
}

/*二十五、vertical-align的使用*/
/* 设置元素的垂直对齐方式,只针对行内元素或者行内块元素有效 常用于让图片和文字垂直居中 */
img {
    /* 顶线top 中线middle 默认基线对齐baseline 底线bottom*/
    vertical-align: middle; /*不要让行内块元素与文字基线对齐*/
}

/*二十六、单行文本溢出显示省略号*/
div {
    width: 150px;
    height: 80px;
    /* 这个单词的意思是如果文字显示不开自动换行 */
    /* white-space: normal; */
    /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
    white-space: nowrap;
    /* 2.溢出的部分隐藏起来 */
    overflow: hidden;
    /* 3. 文字溢出的时候用省略号来显示 */
    text-overflow: ellipsis;
}

/*二十七、多行文本溢出显示省略号 兼容性只支持Webkit浏览器*/
div { /*这个效果一般让后端人员做,因为后端人员可以设置显示多少个字,操作更简单*/
    width: 150px;
    height: 65px;
    /*以下内容不用改,直接粘贴即可*/
    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 3;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
}

/*二十八、布局技巧*/
/*margin负值的巧妙运用,消除浮动盒子的边框过粗*/
/*相对定位提高层级,压住其他盒子,z-index提高层级*/
/*文字围绕浮动元素的妙用*/
/*CSS三角强化的巧妙运用*/
.box1 {
    width: 0;
    height: 0;
    /* 把上边框宽度调大 */
    /* border-top: 100px solid transparent;
    border-right: 50px solid skyblue; */
    /* 左边和下边的边框宽度设置为0 */
    /* border-bottom: 0 solid blue;
    border-left: 0 solid green; */
    /* 1.只保留右边的边框有颜色 */
    border-color: transparent red transparent transparent;
    /* 2. 样式都是solid */
    border-style: solid;
    /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
    border-width: 100px 50px 0 0;
}

/*二十九、CSS3新增选择器*/
/*29.1 属性选择器*/
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
input[value] {
    color: pink;
}

input[type=text] {
    color: pink;
}

div[class^=icon] { /*开头*/
    color: red;
}

section[class$=data] { /*结尾*/
    color: blue;
}

div.icon1 {
    color: skyblue;
}

/*29.2 结构伪类选择器*/
ul li:first-child { /* 1. 选择ul里面的第一个孩子 小li */
    background-color: pink;
}

ul li:last-child { /* 2. 选择ul里面的最后一个孩子 小li */
    background-color: pink;
}

ul li:nth-child(2) { /* 3. 选择ul里面的第2个孩子 小li */
    background-color: skyblue;
}

ul li:nth-child(6) {
    background-color: skyblue;
}

/*29.3 结构伪类选择器-nth-child*/
ul li:nth-child(even) { /* 1.把所有的偶数 even的孩子选出来 */
    background-color: #ccc;
}

ul li:nth-child(odd) { /* 2.把所有的奇数 odd的孩子选出来 */
    background-color: gray;
}

ol li:nth-child(-2n+5) { /* 从0开始 每次加1 往后面计算  可以加减乘除自由组合*/
    background-color: skyblue;
}

/*29.4 选择器nth-type-of*/
ul li:first-of-type {
    background-color: pink;
}

ul li:last-of-type {
    background-color: pink;
}

ul li:nth-of-type(even) {
    background-color: skyblue;
}

section div:nth-of-type(1) {
    background-color: blue;
}

/*29.5 伪元素选择器before和after 常和字体图标结合使用*/
div::before { /* div::before 权重是2 */
    /* 这个content是必须要写的 */
    /* display: inline-block; */
    content: '我';
    /* width: 30px;
    height: 40px;
    background-color: purple; */
}

div::after {
    content: '小猪佩奇';
}

div::after { /*常和字体图标结合使用*/
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'icomoon', serif; /* 需要指定字体，才能使用字体图标 */
    content: '\e91e';
    color: red;
    font-size: 18px;
}

/*三十、CSS3盒子模型*/
p {
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 20px solid red;
    padding: 15px;
    /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
    box-sizing: border-box;
}

/*三十一、图片模糊处理filter*/
img {
    /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
    filter: blur(15px);
}

img:hover {
    filter: blur(0);
}

/*三十二、CSS3属性calc函数*/
.son {
    width: calc(100% - 30px);
    height: 30px;
    background-color: skyblue;
}

/*三十三、CSS3 过渡效果 重点*/
div {
    width: 200px;
    height: 100px;
    background-color: pink;
    /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
    /* transition: width .5s ease 0s, height .5s ease 1s; */
    /* 如果想要写多个属性，利用逗号进行分割 */
    /* transition: width .5s, height .5s; */
    /* 如果想要多个属性都变化，属性写all就可以了 */
    /* transition: height .5s ease 1s; */
    /* 谁做过渡，给谁加 */
    transition: all 0.5s;
}