CSS

作者: Daeeman | 来源:发表于2021-01-25 17:24 被阅读0次

自己练习的css动画（单标签）
CSS背景、文本、字体、链接、列表、轮廓
CSS 教程
CSS样式
CSS高级
前端开发之 CSS入门
CSS第一天
CSS学习笔记（1）
CSS盒子模型、定位、浮动
每个前端工程师都应该懂的前端性能优化总结：

1. css概念

CSS(Cascading Style Sheets) 层叠样式表
（结构，表现，行为）中的表现

2. CSS引入方式*

2.1.行内样式

在开始标签上加style属性，样式值是style的属性值
直接使用标记的style属性
<div style=" width:100px; height:100px; background-color:#F00;”>hi</div>

2.2 内嵌式

所有的样式都写在<style></style>内，<style></style>一般放在<head></head>内

2.3 外链式

所有的样式均写到一个单独的文件内（该文件后缀名.css）,通过
<link rel="stylesheet" href="文件.css" type=”text/css”>
来连接到html文件里。link标签一般放到head标签内部

2.4 导入式（了解）

使用@import指令可以将css文件中的css样式导入到不同的地方
a. 导入式的结果和直接书写是同样的效果
b.导入式可以共享样式代码
c.可以在内嵌式里使用导入，也可在css文件中使用
d.导入样式的使用方法
@import url(“sheet1.css”);
@import“sheet1.css”;

3. 样式优先级：（就近原则）

原则：谁离标签近，谁的优先级高

CSS语法规则

选择器{
    样式属性名 : 属性值 ;
    ...
}

4. CSS 选择器

基础选择器

1.标签（元素）选择器
标签名{ } ----------p{ } a{ }
2.类选择器
.类名{ }------------ .class{ }
3.id选择器
id值{ } ------------#id{ }
4.通配符选择器(选择所有)
*{ }

复合选择器

5.后代选择器（包含选择器）
选择符a 选择符b {规则} -----a b{ }
6.直接后代（子元素）选择器
选择器 a > 选择器b（选择器b必须是选择器a的子）
.box>span
7.分组选择器(逗号分开)
div,span,p{ }
1. 相邻兄弟选择器（+）

<style type="text/css">
            .main h1+p{
                background-color: #7FFFD4;
            }
</style>

<div class="main">
    <p>1</p>
    <h1>2</h1>
    <p>3</p>    //选中
    <h1>4</h1>
    <p>5</p>  //选中
    <p>6</p>
</div>

9.伪类选择器
a:link{color: #000000;} 访问前
a:visited{color: #0000FF;} 访问后状态
a:hover{ color: #00FF00;} 鼠标悬停状态
a:active{color: #8A2BE2;} 鼠标激活状态

5. 选择器优先级：

权重：
着重! important;(10000)>内联样式（1000）>id（100）> class （10）>标签（元素选择器）（1）> 通配符（0.5）
! important;

6. css长度单位

px和em

px,像素
根据显示器分辨率的不同，像素的大小也是不同的
em,以当前字符的高度为基准
如果当前字体的高度为12px，那么1em就是12px
注意：一般以font-size为准，如果没有定义font-size，则以浏览器默认大小（16px）为准
cm/mm/pt/pc
主要用在非显示器输出上，如打印
如果网页在显示器上显示，则这些单位将转换为一定的像素显示，即长度也是依靠显示器分辨率的

7. css中颜色的表示

网页中颜色采用RGB模式显示（显示器）

1.RGB颜色在CSS中的表达方式

A．直接使用颜色的英文单词，如red
注意：很多浏览器不支持颜色的单词表示

1. 使用三色的数值，如rgb(120,222,100)

注意：数值在0~255之间
使用三色的百分比，如rgb(10%,20%,100%)
red rgb(255,0,0) blue rgb(0,0,255) black(0,0,0)
green rgb(0,255,0) white rgb(255,255,255)

2. 使用三色数值的十六进制，如#0000ff

注意：推荐使用这种方式，十六进制值前加#
rgb red #ff0000 #f00 blue #0000ff #00f black #000000 #000

8. css中字体样式 ( font )

1. font-family

指定字体
可以为文字指定多个字体，不同字体间用“，”隔开
字体名字中间有空格的，要用双引号引起来

2. font-size

字体大小
多用px/em单位

3. font-style

字体倾斜效果
normal不倾斜、oblique和italic****倾斜
Italic是使用文字的斜体，Oblique是让没有斜体属性的文字强制倾斜！

4. font-weight

字体粗细
大多浏览器可以实现：正常和加粗效果

image.png

9. 文本属性

1. text-indent

段落内容首行缩进（悬挂缩进）

2.字词间距

英文文本
letter-spacing 字母和字母间距 : normal / 数值
word-spacing 单词和单词间距
中文文本
letter-spacing 字和字之间的间距

3. text-align

文本的水平位置

left，左对齐（默认值）
right,右对齐
center,居中对齐
justify,两端对齐
justify对于主要用于英文
只能对多行中的非最后一行进行两端对齐

4. vertical-align

baseline/top/text-top/middle/bottom/.. 垂直对齐方式

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

text-transform

5.英文字母大小写转换

uppercase 全大写
lowercase 全小写
capitalize 首字母大写

6.text-decoration(下划线/中划线上划线)

文本的装饰效果

none 无修饰
underline 下划线
line-through 中划线/删除线
overline 上划线

7. overflow:

内容溢出处理

overflow: visible（默认）/ 溢出部分可见
hidden（超出部分隐藏）/
scroll（出现滚动条）/
auto（浏览器自动处理）
text-overflow：clip（不显示省略标记，简单裁切） | ellipsis（文本溢出显示省略标记）文本溢出处理
white-space： normal / pre（空白被保留）/nowrap（不换行）/....

元素空白的处理

overflow-x:hidden;
overflow-y:scroll;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

1.单行超出隐藏

div {
  overflow:hidden; //超出的文本隐藏
  text-overflow:ellipsis; //用省略号显示
  white-space:nowrap; //不换行
}

2.多行超出隐藏

div{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box;    //将对象作为弹性伸缩盒子模型显示。
  -webkit-box-orient:vertical;  // 从上到下垂直排列子元素
  -webkit-line-clamp:2; //显示的行数
}

3.表格中单行超出隐藏

table{width:100%;table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */}
td{
  width:100%;
  word-break:keep-all;   // 不换行
  white-space:nowrap;   // 不换行
  overflow:hidden;
  text-overflow:ellipsis;
}

滚动条设置

/* 滚动条整体宽度 */
::-webkit-scrollbar {
    width: 30px; /*对垂直流动条有效*/
    height: 20px; /*对水平流动条有效*/
}
/* 滚动条背景样式 */
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
    background-color: red;
    border-radius: 8px; 
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 7px;
    webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #E8E8E8;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    height: 5px;
    width: 10px;
    background-color:cyan;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    /* border-radius: 50%; */
    background:khaki;
}

10. 伪类

:link 未访问状态
:visited 访问后状态
:hover 鼠标悬停状态
:active 鼠标激活状态

原则：
LoVe HAte 爱恨原则

11. display & visibility

display

CSS使用display设置的标签的显示方式

block ------- “块”元素（独占一行，可设置宽高）

inline -------- “行内”元素（多个元素占一行，不能设置宽高）

inline-block ------ 行内块元素（多个元素占一行，可以设置宽高）

none ------ 隐藏(空间释放)

<div>主要用于HTML文档中独立的“大块”内容
<span>主要用于HTML文档中需要特别定义的内容

visibility

visibility:hidden（元素不可见，但空间依然被占用）
visibility:visible（元素可见）

12. 盒子模型

a. border

边框的三个方面(webkit、firefox和ie)

border-width 边框宽度

border-color 边框颜色

border-style 边框样式

none 无边框
solid 实线
dotted 点状线
dashed 虚线
double 双实线

缩写：

border ： border-width值 border-style值 border-color值 ;
border-top
border-bottom
border-left
border-right

分开单独设置:

border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;

使用综合属性

border-left:1px #00F solid;
注意：三个值没有先后顺序，中间用空格隔开

b. padding（内边距）

边框和内容之间的空白宽度
缩写:

padding : 值 ;------ 四个内边距一样
padding : 值1 值2 ; -----值1代表上、下内边距，值2代表左、右内边距
padding ：值1 值2 值3 ；--值1代表上内边距，值2代表左右内边距，值3代表下内边距
padding : 值1 值2 值3 值4 ；值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距，按照顺时针方向，上右下左。

注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度

padding的综合设置

例：padding:2px;(四个内边距都为2px)

padding的单边设置

例：padding-left:2px;(左边的边框和内容之间的距离为2px)

c. margin（外边距）

缩写：同padding

margin ：值；
margin ：值1 值2；
margin : 值1 值2 值3；
margin : 值1 值2 值3 值4；
margin:0 auto; 块元素水平居中标签和它相邻的标签之间的空白宽度

外边距的设置是相叠加的

margin的综合设置

例：margin:10px;(和四边临近的标签的距离都为10px)

margin的单边设置

例：margin-left:10px;(标签距左边10px)

特别

<body>标签的margin代表内容与浏览器边框的距离

两个行内元素的margin-right和margin-left，采用“和”
两个块元素的marign-top和margin-bottom，采用“最大值”

13. background

a. background-color

定义标签的背景颜色

b. background-image

定义背景图片,可定义多背景
background-image: url(images/bg-hotlink.png);

background:red url(xx.png) no-repeat -200px 300px;

backgroung-color:red;
background-image: url(xxx.png);
background-repeat:no-repeat;
background-position:-200px 300px;

c. background-repeat

定义背景图片的显示方式

repeat，图片重复
repeat-x，图片横向重复
repeat-y，图片纵向重复
no-repeat，图片不重复

d. background-position

定义背景图片的位置
直接使用两个定位单词，例:background-position: right top;
使用x、y坐标，例:background-position: 20px 30px;

e. background-size

定义背景图片的大小

background-size: length | percentage | cover | contain;

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能会裁剪图片）
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(可能会出现空白)

f. background-origin

定义背景图片的渲染位置

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

g. background-attachment

定义背景图片是否固定或者随着页面的其余部分滚动

background-attachment：fixed（固定）| scroll（默认）

14. 文档流

标准文档流”

Normal Document Stream
浏览器解析HTML代码的基本方式，根据标签的不同“display”来确定标签的定位和显示方式

image.png

15. Folat（浮动）

float：造成标签“浮动”，影响“文档流”的空间

float:left;“左浮动”
float:right;”右浮动”
none 默认不浮动

folat浮动之后display自动变为block
对span元素添加一个float:left，span元素已经“块”化。

16. position(定位)

除了基于“文档流”的定位，CSS还定义了标签的其他定位方式，CSS使用position属性指定标签的定位方式

position的值

static 默认值，即使用基于“文档流”的定位
relative 相对定位，即在“文档流”的基础上，结合left和top属性，相对定位
absolute 绝对定位，即脱离“文档流”，并基于它的“包含框”，使用left和top属性来定位
fixed 固定定位，即特殊的绝对定位，即它的“包含框”为浏览器

a. position:relative;

relative 相对定位：相对于原来正常文档流的自己定位

注意
相对与原来的位置，使用left,right进行偏移
原来的位置对于后继元素的定位(float)依然有效
对于使用float的元素，realative也同样起作用

b. position:absolute;

absolute 绝对定位

注意：
绝对定位脱离了”文档流“，
使用绝对定位时，注意找准”包含框“，即包含该标签，并且距它最近的父，position不等于static的标签
如果没有，那么将以浏览器左上角为准来定位

特点:
只定义position:absolute;没设置left和top，标签位置仍安“文档流”定位，但已经“脱离文档流”

b. position:fixed;

fixed（固定定位）
fixed 固定定位
始终相对于浏览器定位

17. 清除浮动

浮动的元素会脱离正常文档流，释放空间不占用高度而浮于文档上方，使其父元素高度坍塌。常见情况有，下面的元素向顶部移动以及浮动导致父元素高度为零，这时就需要清除浮动。

清除浮动的4种方法：

给父元素手动添加 height
给父元素加overflow：hidden（原理是voerflow会触发BFC(块级格式化上下文),BFC渲染页面的规则中，浮动元素也占用高度）
在所有有浮动的元素后加一个空元素，给此空元素加样式
clear:both / left / right / none

clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左右浮动
clear:none 不浮动

给父元素加伪元素 ::after(给需要清除浮动的父元素，添加类名clearfix，在css中添加伪类)

.clearfix::after{ 
     display:block；
     content:""; 
     clear:both ;
}

clear清除浮动
例：

<style>
        .box{
            width:300px;
            height: 200px;
            background-color: #ccc;
        }
        .box::before{                      
            display: block;                     
            content:"哈哈哈哈";               
        }                               
        .box::after{
            display:block;
            content:"呵呵呵";
        }
伪元素清除浮动
.box{
    width:1000px;
    margin:0 auto;
    background-color: #ccc;
/*orerflow:hidden;*/
}
.box .left{
    float: left;
    width:300px;
    height: 200px;
    background-color: #f00;
}
.box .box2{
    float: left;
    width:500px;
    height: 100px;
    background-color: #00f;
}
.clearfix::after{
    display: block;
    content:"";
    clear:both;
}
</style>
</head>
<body>
    <div class="box clearfix">
        <div class="left"></div>
        <div class="box2"></div>
    </div>
</body>

18. 列表样式

list-style

list-style-type 列表样式类型

none 无列表样式
disc 实心圆
circle 空心圆
square 实心方块
decimal 数字

list-style-image

列表样式图片
url("图片路径")
list-style-position
列表样式位置
outside 样式在外侧
inside 样式在内部
缩写
list-style:none

opacity 不透明度

rgba（0,0,0,0.5）【只透明背景】
opacity【文字图片都透明】
取值范围 0-1
兼容ie8以下版本
filter:alpha(opacity=数值) 数值取值范围0-100

.box{
            /*display: none;*/
            /*opacity: 0;*/
            /*visibility: visible;*/
            visibility: hidden;
            width: 500px;
            height: 300px;
            background-color: rgb(255,0,0);
        }
        .box:hover{
            /*background-color: rgba(255,0,0,.4);*/
            opacity: 0.4;
            filter:alpha(opacity=40);
        }
        /*img{
            opacity:0.4; 
        }*/

列表样式

list-style-type: disc;实心圆

list-style-type: circle; 空心圆

list-style-type: none; 无样式

list-style-type: square; 实心方块

list-style-type: decimal; 阿拉伯数字

list-style-image:url("images/chui.png"); 列表样式图片

list-style-position: inside;

list-style:none;

盒子模型

W3C 盒子模型：
W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 IE 盒子模型的范围也包括 margin、border、padding、content

image

IE 盒子模型：