CSS 总结-CSDN博客

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

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	外边距

<html>
 <head>
<title>盒子布局</title> 
<style type="text/css">
 div{
width: 300px; 
height: 300px; 
border: 2px double red; 
padding: 20px; 
margin: 100px; 
} 
</style>
 </head> 
<body>
<div>这是一个div</div> 
</body> 
</html>

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 相对定位实例

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

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

</html>

5、4.2 绝对定位实例

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

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)

<!DOCTYPE html>

<html>

<head>

<title> 过渡效果 </title>

<style type = "text/css" >

.box {

width : 300px ;

height : 300px ;

border : 1px solid black ;

background-color : orange ;

}

div {

/* 宽度 10 秒的过渡 */

transition : width 10s ;

}

div : hover {

width : 500px ;

background-color : red ;

}

</style>

</head>

<body>

<div class = "box" ></div>

</body> </html>

指定速度的曲线：

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%)

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

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; （该值用于所有四个角，圆角都是一样的）