CSS 总结

目录

1、CSS的简介

２、层叠样式表

２、１  CSS的引入方式

2、1.1 行内样式

2、1.2 内嵌样式 

2、1.3 外链样式

2、1.4 导入样式

 2、1.5 四种方式的优先级

3、选择器

3、1 基本选择器

3、1.1 标签选择器

3、1.2  id选择器 

3、1.3 类选择器 

3、1.4 通配符选择器

3、1.5 四种选择器的优先级 

3、2 包含选择器 

3、3 伪类选择器

3、4 伪元素选择器

4、CSS常见的样式

4、1 样式的常见语法

 4、2 样式常见

4、2.1 控制字体

4、2.2 样式的特点 

4、2.3 控制文本

5、布局

5、1盒子布局

5、2 元素的分类

5、3 浮动布局

5、4 定位布局

5、4.1 相对定位实例

5、4.2 绝对定位实例

5、5 其它属性

 5、5.1 overflow

5、5.2 zoom 

6、CSS中的特殊样式

6、1 CSS中的变换效果

6、1.1 2D转换

6、1.2 3D转换

6、2 CSS中的过渡效果

6、3 动画效果

6、4 渐变效果

 

6、5 圆角

---

1、CSS的简介

CSS是层叠样式表

２、层叠样式表

２、１  CSS的引入方式

2、1.1 行内样式

行内样式又为标签样式，它是在标签里加上style样式

style = "color:red;text-align:center" > 这是一个标题

2、1.2 内嵌样式 

写在 style 标签内（ style 标签写在 head 标签内）

2、1.3 外链样式

第一步：新建一个 .css 的文件，专门写 css 样式

第二步： head 标签内需要写入 link 标签（ link 标签可以写在 body 标签内，但是不推荐）

第三步： link 标签内 href 属性将 css 文件导入（路径（绝对路径和相对路径））

rel = "stylesheet" type = "text/css" href = "1.css" >

2、1.4 导入样式

 2、1.5 四种方式的优先级

 行内 > 内嵌 > 外链 > 导入

3、选择器

3、1 基本选择器

3、1.1 标签选择器

根据标签的名字选择

h1{ color:red;

}

3、1.2  id选择器 

根据id为（XXX）的标签

#one {

color : blue ;

}

3、1.3 类选择器 

根据class 为（XXX）的标签

.one{

color:blue;

} 

3、1.4 通配符选择器

*{

color : yellow ;

}  

3、1.5 四种选择器的优先级 

id > 类 > 标签 > 通配符

3、2 包含选择器 

子代选择器	后代选择器	分组选择器
获取某个标签的第一级子标签	获取某个标签内所有的子标签	逗号选择器 ，可以给多个标签加上样式，通过逗号隔开

3、3 伪类选择器

:link	超链接点击之前的样式
:visited	链接访问之后的样式
:hover	鼠标放置后的样式
:active	鼠标点击但不松手的样式
:focus	某个标签获得焦点的时候的样式

3、4 伪元素选择器

::before	css3提供
::after	css3提供
:before	css2提供
:after	css2提供

4、CSS常见的样式

4、1 样式的常见语法

选择器 {

            属性：属性值；

            属性：属性值；

}

 4、2 样式常见

4、2.1 控制字体

设置字号	font-size:(xx)px;
设置颜色	color：#rrggbb;
设置字体	font-family:"宋体";
设置行高	line-height: 120% 1.2em
设置粗细	font-weight:blod(加粗);

4、2.2 样式的特点 

1 、继承性 -------- 网页中子元素将继承父元素的样式

2 、层叠性 ------ 网页中子元素定了与父元素相同的样式，则子元素的样式会覆盖掉父元素的样式，        后面定义的样式会覆盖前面定义的样式

4、2.3 控制文本

设置文本的缩进	text-indent ： 2em ( 可以取负值 )
文本的对齐方式	text-align : left center right
文本的大小写	text - transform : none( 正常的大小 ) capitalize( 将每个单词的第一个字母住那换为大写 ) uppercase( 转 换为大写 ) lowercase （转换为小写）

5、布局

5、1盒子布局

 

border	边框
padding	内边距
margin	外边距

 
 

  

这是一个div
 
 

 

5、2 元素的分类

块级元素	独占一行，可以设置高和宽 div p hn 等
内联元素	不会自动换行，设置高和宽时不起作用

块级元素和内联元素可以相互转换--------display

5、3 浮动布局

通过float 进行设置 

none	不浮动
left	左浮动
right	右浮动

注意： left: 前面的元素浮动效果后，会对后面元素产生影响 ------ 通过消除浮动来解决

clear 属性

 

none	默认值 允许两边都可以有浮动对象
left	不允许左边有浮动对象
right	不允许右边有浮动对象
both	不允许两侧有浮动对象

5、4 定位布局

属性： position ----- 设置对象的定位方式

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5、4.1 相对定位实例

这是位于正常位置的标题
这个标题相对于其正常位置向左移动
这个标题相对于其正常位置向右移动
相对定位会按照元素的原始位置对该元素进行移动。
样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。
样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

5、4.2 绝对定位实例

这是带有绝对定位的标题
通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。

5、5 其它属性

 5、5.1 overflow

visible	默认值 不剪切内容也不添加滚动条
auto	在必需时对象内容才会被剪切或者添加滚动条
hidden	不显示超过对象尺寸的内容
scroll	总是显示滚动条

3 种隐藏元素的方式：

   1 、 display : none;

   2 、 width:0;height:0;

   3 、 overflow:hidden;

5、5.2 zoom 

设置或者检索对象的缩放比例

normal : 默认值 使用对象的实际尺寸

number: 百分比 | 无符号的浮点实数    

6、CSS中的特殊样式

6、1 CSS中的变换效果

通过转换使元素大小、位置、形状发生一些改变，包括2D和3D转换

6、1.1 2D转换

通过 transform 属性进行设置

translate()	从当前位置移动元素（根据X轴和Y轴给定的参数） ----- 是一种平移的效果
rotate()	根据给定的角度顺时针或者逆时针旋转元素，可以取负值-------元素进行逆时针旋转
scale()	增加或者减少元素的大小(根据给定的高度或者宽度参数)
scaleX()	增加或者减少宽度
scaleY()	增加或者减少高度
skew()	使元素沿着X轴和Y轴倾斜给定的角度
skewX()	使元素沿着X轴倾斜给定的角度
skewY()	使元素沿着Y轴倾斜给定的角度
matrix()	整合所有的2D转换的方法
matrix()	matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

6、1.2 3D转换

rotateX （）	给定角度X轴上旋转
rotateY（）	给定角度Y轴上旋转
rotateZ（）	给定角度Z轴上旋转

6、2 CSS中的过渡效果

1 、效果添加到哪一个 css 属性

2 、过渡效果的时常

3 、效果触发的动作 ( ： hover)

class = "box" >

指定速度的曲线：

transition - timing - function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

linear - 规定从开始到结束具有相同速度的过渡效果

ease - in - 规定缓慢开始的过渡效果

ease - out - 规定缓慢结束的过渡效果

ease - in - out - 规定开始和结束较慢的过渡效果

cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

6、3 动画效果

@keyframes 规则创建动画，实现的是将一个元素从一个 css 样式变换到另一个 css 样式，使用的是 from 和to 两个关键字 (0% 100%)

注释：本例在 Internet Explorer 中无效。

6、4 渐变效果

渐变 ------ 可以在两个或者多个颜色之间进行平稳的过渡

语法格式：

background-image:linear-gradient( direction,color1,color2........ )

eg:

background-image: linear-gradient(to bottom,red,yellow,green,blue)

background-image: linear-gradient(to top,red,yellow,green,blue)//从下到上

 

6、5 圆角

border-radius 属性实现圆角的样式

border - radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px; （依次分别用于：左上角、右上角、右下角、左下角）：

三个值 - border-radius: 15px 50px 30px; （第一个值用于左上角，第二个值用于右上角和左下角，第三

个用于右下角）：

两个值 - border-radius: 15px 50px; （第一个值用于左上角和右下角，第二个值用于右上角和左下角）：

一个值 - border-radius: 15px; （该值用于所有四个角，圆角都是一样的）