CSS学习笔记

CSS概述

1. 什么是CSS:

　　CSS是Cascading Style Sheet 层叠样式表

　　作用: 用于美化html页面

2. 如何在html页面中添加CSS样式代码?

三种添加方式:

　　1. 内联: 在标签的style属性中添加css样式代码 , 弊端:不能复用

　　2. 内部: 在head标签里面添加style标签, 在标签体内通过选择器选择到元素之后给元素添加样式, 能复用但是只能在当前页面复用

　　3. 外部: 在单独的css文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用工作中外部样式 使用最多, 可以实现多页面复用,而且可以将css样式代码和html代码分离开 便于维护优先级: 内联优先级最高, 内部和外部优先级相同后执行覆盖先执行的

选择器

　　1. 标签名选择器

　　格式: 标签名{样式代码}

　　2. id选择器

　　格式: #id{样式代码}

　　3. 类选择器

　　格式: .class{样式代码}

　　4. 分组选择器

　　格式: div,#id,.class{样式代码}

　　5. 任意元素选择器

　　格式: *{样式代码}　选取页面中所有的元素

　　6. 属性选择器

　　格式: 标签名[属性名='值']{样式代码}   通过元素的属性选择元素

　　7. 子孙后代选择器

　　格式: div div span{样式代码} 　　匹配div里面的div里面的所有span 包括后代

　　8. 子元素选择器

　　格式: div>div>span{样式代码}　　匹配div里面的div里面的子元素span 不包括后代

　　9. 伪类选择器

　　选择的是元素的状态: 未访问状态/访问过状态/悬停状态/点击状态

颜色赋值

　　三原色: 红绿蓝 rgb red green blue 0-255

　　赋值方式:

　　颜色单词赋值: red/yellow/blue/pink.....

　　6位16进制赋值: #ffff0000 每两位表示一个颜色

　　ffff ->2553位16进制赋值: #f00 等效ffff0000

　　3位10进制赋值: rgb(255,0,0)

　　4位10进制赋值: rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明

　　背景图片

　　background-image:url(路径); 　　设置背景图片

　　background-size: 宽度 高度(像素);　　 设置背景图片的尺寸

　　background-repeat: no-repeat; 　　禁止重复

　　background-position:　　 横向和纵向偏移像素或百分比

　　文本和字体相关样式

　　text-align: left/right/center; 　　水平对齐方式

　　text-decoration: overline/underline/linethrouth/none;　　文本修饰

　　color:red; 　　字体颜色

　　line-height:20px; 　　行高,多行控制行间距 单行控制垂直居中

　　text-shadow:　　 颜色 x偏移值 y偏移值 浓度; 设置阴影

　　font-size:20px; 　　设置字体大小

　　font-weight: bold加粗/normal去掉加粗;

　　font-style:italic; 　　斜体

　　font-family: xxx,xxx,xxx;　　 设置字体

　　font: 　　字体大小 字体名称;

　　元素的显示方式display

　　block: 块级元素, 特点: 独占一行,可以修改宽高 , 如:h1-h6,p,div等

　　inline: 行内元素, 特点: 共占一行,不能修改宽高 , 如:span,b,i,超链接a等

　　inline-block: 行内块元素, 特点: 共占一行,可以修改宽高, 如: img,input等

常用语法：

　　div:hover{　　/* 鼠标悬停选择器，鼠标放在上面就会触发。*/

　　　　position：relative；/*相对定位*/

　　}

　　

 

　　 ul{
　　　　list-style-type: none;/*去掉前面的点*/
　　}　

　　

 

 

　

盒子模型之外边距

　　* 外边距：元素距上级元素或者兄弟元素之间的距离

　　* 赋值方式：margin-left/top/bottom/right:20px;单独给某一个方向添加外边距

　　　　　　　　margin：20px;给四个方向都添加

　　　　　　　　margin：20px 40px;上下20px 左右40px

　　　　　　　　margin:0 auto;左右居中

　　　　　　　　margin：10px 20px 30px 40px 上右下左 顺时针

　　* 上下相邻都加外边距，取二者中最大值；

　　* 左右相邻都添加外边距，取二者之和。

　　* 行内元素添加上下外边距无效

　　* 粘连问题：当元素上边缘和上级元素上边缘重叠时给元素上外边距会出现粘连文题，给上级元素添加  

　　　　      　　overflow: hidden; 可解决。

盒子模型之边框

　　* 赋值方式：border-left/top/bottom/right:1px solid red;单独给一个方向添加

　　　　　　　　border：1px solid red;给四个方向添加

　　* 圆角：border-radius：10px; 值越大越远，当宽高相等时，超过宽高一半为正圆

盒子模型之内边距

　　元素边缘距内容的距离padding

CSS的三大特性

　　1. 继承性: 元素可以继承上级元素文本和字体相关的样式, 个别元素自带效果不受继承影响,

　　    比如: 超链接字体颜色, h1-h6字体大小
　　2. 层叠性: 多个选择器有可能选择到同一个元素, 如果作用的样式不同,多个样式全部层叠生效,

　　    如果作用的样式相同 则由选择器的优先级决定
　　3. 选择器优先级: 作用范围越小优先级越高  id>class>标签名>继承

元素的定位方式

　　* 五种定位方式（4+1）

　　* 静态定位+相对定位+绝对定位+固定定位

　　* 浮动定位

定位方式之静态定位

　　* 格式：position：static（由于静态定位是默认值，可以不写）

　　* 静态定位也叫做文档流定位

　　* 静态定位的特点：元素左上为基准，块级元素从上往下排列，行内元素从左向右排列

　　* 通过外边距控制元素的位置

定位方式之相对定位

　　* 格式：position：relative；

　　* 相对定位特点：元素不脱离文档流（元素改成相对定位后不管元素显示到什么位置，仍然占着原来的位置）

　　 * 通过left/right/top/bottom让元素相对于初始位置做偏移

　　* 应用场景：当需要移动某一元素并且其他元素不受到影响时，使用相对定位

定位方式之绝对定位

　　* 格式：position：absolute；

　　* 绝对定位特点：元素脱离文档流，（元素修改为绝对定位后会让出所占位置，后面　　   的元素会顶上来）

　　* 通过left/right/top/bottom让元素相对于窗口位置或上一级元素做偏移，绝对定位坐标默认相对于窗口

　　* 如果绝对定位需要相对某个上级元素时，需要在上级元素中添加position：relative

　　* 应用场景：需要将某个元素进行位置偏移，并且不希望元素仍然占着原来的显示位置时使用绝对定位

定位方式之固定定位

　　* 格式：position：fixed;

　　* 显示特点：元素脱离文档流

　　* 通过left/right/top/bottom让元素相对于窗口做位置偏移

　　* 应用场景：当元素需要固定在窗口的某个位置时使用

定位方式之浮动定位

　　* 格式：float：left/right;

　　* 显示特点：元素脱离文档流（不占原来的位置），元素从当前所在行向左或向右浮动，当撞到上级元素边缘或者其他浮动元素边缘时就停止（浮起来的元素不会重叠）

　　* 浮动定位一行装不下时会自动换行，换行时有可能被卡住

　　* 如果一个元素的所有子元素都浮动了，那么它的高度自动识别就为0了，因为浮动元素脱离文档流了。如果该元素后面的元素再顶上来就会被浮动元素遮盖发生显示异常，给上级元素（高度识别为0的元素）添加overflow:hidden解决此问题。

　　未加 overflow:hidden;

　　body>div{
　　　　width: 200px;
　　　　/*height: 200px;*/
　　　　border: 1px solid red;
　　}

 

 

 　　加 overflow:hidden;之后

　　body>div{
　　　　width: 200px;
　　　　/*height: 200px;*/
　　　　border: 1px solid red;
　　　　overflow:hidden;
　　}

　　* 应用场景：当需要将纵向排列的元素横向排列时

溢出设置overflow

　　* visible超出部分依然显示（默认）

　　* hidden 超出部分隐藏，解决粘连问题和高度识别为0的问题

　　* scroll 超出部分滚动显示

行内元素的垂直对齐方式vertical-align

　　* baseline 基线对齐（默认）

　　* top 顶部对齐

　　* middle 中间对齐

　　* bottom 底部对齐

显示层级 z-index

　　* 当多个元素设置绝对定位或者相对定位的时候可以实现元素层叠的效果，通过 z-index 可以灵活控制元素现实的层级（默认显示层级按照添加顺序）

　　* z-index 值越大 显示层越靠前   例如：z-index : 2;

盗链图片的两种情况

　　 1.需要的图片是img标签 直接在图片上右键 复制图片地址 即可

　　 2.图片不是img标签而是背景图片 , 在图片上右键->检查 从样式列表中找到图片路径 在上面右键 copy linkaddress