CSS

CSS

---

一、基础选择器

id选择器：选择页面中具有对应的id属性值的元素。
      语法：#id属性值{}
元素选择器：选择页面中具有相同标签名的元素。
      语法：元素标签名称{}
类选择器：选择页面中具有相同class属性值的元素。
      语法：.class属性值{}


优先级：id选择器>类选择器>元素选择器

二、扩展选择器

1.选择所有元素：
      语法：*{}
2.并集选择器：
      语法：选择器1，选择器2{}
3.子选择器：筛选选择器1元素下的选择器2元素。
      语法：选择器1 选择器2{}
      注意：中间是空格。
4.父选择器：筛选选择器2的父元素选择器1
      语法：选择器1 > 选择器2
5.属性选择器：选择元素名称，属性名=属性值的元素。
      语法：元素名称[属性名=“属性值”]{}
      常用于<input>标签。
6.伪类选择器：选择一些元素具有的状态
      语法：元素：状态{}
      例：<a>
        状态：link：初始化的状态
                   visited:被访问过的状态。
                   active:正在被访问的状态。
                   hover：鼠标悬浮在上方的状态。

三、属性

属性	说明
border-image	设置所有边框图像的速记属性。用法：border-image:url(border.png) 30 30 round
border-radius	一个用于设置所有四个边框-第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。border-radius: 15px 50px 30px 5px
box-shadow	附加一个或多个下拉框的阴影
background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

四盒子模型：

margin：外边距。
padding：内边距。（注意：默认情况下内边距会影响整个盒子的大小）
box-sizing：border-box；（设置合作的属性，让width和height技术最终盒子的大小）
float：浮动。
    left,right。

---

五、css3的标准

边框：

属性	说明/用法/效果截图
border-radius	用于创建圆角,四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 border-radius:25px;
box-shadow	用来添加阴影 box-shadow: 10px 10px 5px #888888;
border-image	使用图像创建一个边框 border-image:url(border.png) 30 30 round;(平铺)或 border-image:url(border.png) 30 30 stretch;(拉伸)

背景

属性	说明/用法/效果截图
background-image	添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张 background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat;
background-size	指定背景图像的大小，你指定的大小是相对于父元素的宽度和高度的百分比的大小。 background-size:80px 60px; background-size:100% 100%;
background-origin	background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。 background-origin:content-box; background-origin:padding-box; background-origin:border-box;
background-clip	背景剪裁属性是从指定位置开始绘制 background-clip:content-box; background-clip:padding-box; background-clip:border-box; 如上图

渐变

线性渐变：background-image: linear-gradient(direction, color-stop1, color-stop2, …);（注意：direction的值是"to 位置"例："to bottom right"从左上往右下渐变）

径向渐变：background-image: radial-gradient(shape size at position, start-color, …, last-color);（设置为圆形）（例："background-image: radial-gradient(circle, red 5%, yellow 15%, green 29%);"）

重复的径向渐变：background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

文本效果

属性	说明/用法/效果截图
text-shadow	适用于文本阴影 您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色： text-shadow: 5px 5px 5px #FF0000;
text-overflow	文本溢出属性指定应向用户如何显示溢出内容
word-wrap	如果某个单词太长，不适合在一个区域内，它扩展到外面 p {word-wrap:break-word;}

字体

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
    /*黑体*/
    font-weight:bold;
}
 
div
{
    font-family:myFirstFont;
}
</style>

转换

转换可以对元素进行移动、缩放、转动、拉长或拉伸。

2D转换

属性	说明/用法
transform	translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
transform	rotate值（30deg）元素顺时针旋转30度。 transform: rotate(30deg);
transform	scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。 transform:scale(2,3);
transform	skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。 transform: skew(30deg,20deg);
transform	matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。 transform:matrix(0.866,0.5,-0.5,0.866,0,0); 利用matrix()方法旋转div元素30°

3D转换

属性	说明/用法
transform	rotateX()方法，围绕其在一个给定度数X轴旋转的元素。 transform: rotateX(120deg);
transform	rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。 transform: rotateY(130deg);

过渡

添加某种效果可以从一种样式转变到另一个的时候。

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
}

div:hover
{
	width:300px;
}
</style>

动画

@keyframes 规则是创建动画。

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
}
@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

/*
@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
*/
</style>

多列

column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度

分页

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

div.center {text-align: center;}
</style>
</head>
<body>

<h2>分页居中</h2>

<div class="center">
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">»</a></li>
  </ul>
</div>

</body>
</html>

效果图：

六、css定位

position 属性值的含义：
1、静态定位（static）

      一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2、绝对定位（absolute）

      使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位。

<style>
.abs
{
position:absolute;
left:100px;
top:150px
}
</style>

3、相对定位（relative）
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

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

4.固定定位（fixed）
固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>

5.堆叠
z-index=-1说明堆叠的优先级低，然后它就在其他元素的下面。

<style>
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>

七、浮动
      浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

效果：

注：在浮动的div中，要想取消内部元素收到浮动影响，需要设置clear: both;。

总结

box-shadow属性可以用来创建纸质样式卡片:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.container {
  padding: 10px;
}
</style>
</head>
<body>
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>
</body>
</html>