CSS

CSS基础语法

1.selector{
property:value 属性：值
}
eg:h1{color:red;font-size:14px;}

属性>1个，属性之间用分号隔开：
值>1个单词，则需要加上引号；
eg:p{font-family:“sans”;}

CSS高级语法：

1.选择器分组：
h1,h2,h3,h4,h5,h6{color:red;}
2.继承
body{color:green;}

CSS派生选择器：

  派生选择器：通过依据元素在其位置的上下文关系来定义样式。

一、 CSS ID选择器
1.id选择器
（1） id选择器可以为标有id的html元素指定特定的样式。
（2）id选择器以’#'来定义。
2.id选择器和派生选择器：
目前比较常用的方式是id选择器常常用于建立派生选择器。

二、CSS类选择器
1.类选择器：
类选择器以一个点显示。
2.class也可以用作派生选择器。

三、CSS基础—属性选择器
1.属性选择器：
对带有指定属性的HTML元素设置样式
2.属性和值

CSS背景

1.背景：
CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

  属性                     描述
  background-attachment   背景图像是否固定或者随着页面的其余部分滚动
  background-color       设置元素的背景颜色
  background-image       把图片设置为背景
  background-position    设置背景图片的起始位置
  background-repeat      设置背景图片是否允许重复

CSS3背景
（1）background-size:规定背景图片的尺寸
（2）background-origin:规定背景图片的定位区域
（3）background-clip:规定背景的绘制区域

CSS文本

css文本属性可定义文本外观
通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进

css文本

属性                                 描述
color                              文本颜色
direction                          文本方向
line-height                        行高
letter-spacing                     字符间距
text-align                         对齐元素中的文本
text-decoration                    向文本添加修饰
text-indent                        缩进元素中文本的首行
text-transform                     元素中的字母
unicode-bidi                       设置文本方向
white-space                        元素中空白的处理方式
word-spacing                       字间距

CSS文本效果
text-shadow:向文本添加阴影
word-wrap:规定文本的换行规则

CSS字体

css字体属性定义文本的字体系列、大小、加粗、风格和变形

属性                     描述
font-family         设置字体系列
font-size           设置字体的尺寸
font-style          设置字体风格
font-variant        以小型大写字体或正常字体显示文本
font-weight         设置字体的粗细

CSS链接

1.css链接的四种状态
（1）a:link 普通的、未被访问的链接。
（2）a:visited 用户已访问的链接。
（3）a:hove 鼠标之战位于链接的上方。
（4）a:active 链接被点击的时刻。
2.常见的链接样式
text-decoration 属性大多用于去掉链接中的下划线
3.设置背景颜色
background-color

CSS列表

1.css列表
css列表属性允许你设置、改变列表标志，或者将图像作为列表项标志
属性 描述
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标志位置
list-style-type 列表类型

css表格

1.css表格
css表格属性可以帮助我们极大的改善表格的外观
2.表格边框
（1） 宽度和高度 width height
（2）实线和虚线 solid dashed(虚线) dotted（圆圈）
（3）边框颜色border-color、border-left-color、border-right-color、border-top-color、border-bottom-color
3.折叠边框
border-collapse:separate 边框会被分开。
border-collapse:collapse 如果可能，边框会合并为一个单一的变框。
border-collapse:inherit 规定应该从父元素继承border-collapse属性的值。
4.表格宽高
border-radius:10px;
width:160px;
height:20px;

5.表格文本对齐
text-align:left/center/right
6.表格内边距
padding-top:20px;
padding-left:100px;
padding-right:100px;
padding-bottom:20px;
7.表格颜色
background-color:blueviolet;

CSS轮廓

1.轮廓主要是用来突出元素的作用
属性 描述
outline 设置轮廓属性
outline-color 轮廓的颜色
outline-style 轮廓的样式
outline-width 轮廓的宽度

CSS定位和CSS浮动

1.css定位：
改变元素在页面上的位置
2.css定位机制
普通流：元素按照其在HTML中位置排序决定排布的过程
浮动
绝对布局
3.css定位属性

   属性                       描述
    position             把元素放在一个静态的、相对的、绝对的、或固定的位置中。
    top                  元素向上偏移量
    left                 元素向左偏移量
    right                元素向右偏移量
    bottom               元素向下偏移量
    overflow             设置元素溢出其区域发送的事情
    clip                 设置元素显示的形状
    vertical-align       设置元素垂直对齐方式
    z-index              设置元素的堆叠顺序

1.css position属性
static
relative
absolute
fixed

2.css浮动
float:属性可用的值
left:元素向左浮动
right:元素向右浮动
none:元素不浮动
inherit:从父级继承浮动属性
3.clear属性
去掉浮动属性（包括继承来的属性）
clear属性值
left、right：去掉元素向左、向右浮动
bottom:左右两侧均去掉浮动
inherit:从父级继承来clear的值

CSS盒子模型

1.盒子模型的内容范围包括：
margin、border、padding、content部分组成
2.内边距属性：

  属性                      描述
  padding               所有边距
  padding-bottom        底边距
  padding-left          左边距
  padding-right         右边距
  padding-top           上边距

css边框

1.css边框
我们可以创建效果出色的边框，并且可以应用任何元素
2.边框的样式
border-style:定义了10个不同的非继承样式，常用的包括none,solid,dotted，double,dashed
3.边框的单边样式
border-top-style
border-left-style
border-right-style
border-bottom-style
4.边框宽度：
border-width
5.边框单边的宽度：
border-top-width
border-left-width
border-right-width
border-bottom-width
6.边框的颜色
border-color
7.边框单边的颜色：
border-top-color
border-left-color
border-right-color
border-bottom-color

CSS3边框
1.css3边框
  border-radius:圆角边框
  box-shadow:10px 10px 5px #ff00ff;上下 左右 透明度  颜色

CSS外边距

1.外边距
围绕在内容边框的区域就是外边距，外边距默认为透明区域
外边距接受任何长度单位、百分数值
2.外边距常用属性
属性 描述
margin 所有边距
margin-bottom 底边距
margin-left 左边距
margin-right 右边距
margin-top 上边距

CSS常用操作

对齐操作
1.使用margin属性进行水平对齐
2.使用position属性进行左右对齐
3.使用float属性进行左右对齐
float:left 向左对齐
float:right 向右对齐

分类属性

属性                     描述
height                 元素高度
line-height            行高
max-height             元素最大高度
max-width              元素最大宽度
min-width              元素最小宽度
min-height             元素最小高度
width                  设置元素宽度

分类操作

  属性                     描述
 clear                  设置一个元素的侧面是否允许其他的浮动元素
 cursor                 规定当指向某元素之上时显示的指针类型
 display                设置是否及如何显示元素
 float                  定义元素在哪个方向浮动
 position               把元素放置到一个静态的、相对的、绝对的、固定的位置
 visibility             设置元素是否可见或不可见

导航栏
1.垂直导航栏
2.水平导航栏
3.导航栏效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导航栏</title>
    <link rel="stylesheet" href="30.style.css">
</head>
<body>
    <ul>
        <li><a href="#" >导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
    </ul>
</body>
</html>

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: antiquewhite;
    width:260px;
    text-align: center;
}
a:link,a:visited{
    font-weight: bold;
    text-decoration: none;
    display: block;
    background-color: burlywood;
    color: aliceblue;
    width: 50px;
    text-align: center;
}
a:active,a:hover{
    background-color: crimson;
}
li{
    display: inline;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

图片操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片操作</title>
    <link rel="stylesheet" href="31.style.css" type="text/css">
</head>
<body>
    <div class="image">
        <a href="#" target="_self">
            <img src="./image/李子.jpg" alt="水果" width="200px" height="200px">
        </a>
        <div class="text">李子是一种很美味的水果</div>
    </div>
</body>
</html>


body{
    margin: 10px auto;
    width: 70%;
    height: auto;
    background-color: blueviolet;
}
.image{
    border: 1px solid darkblue;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 4px;
}
.img{
    margin: 5px;
    opacity: 0.8;
}
.text{
    font-size: 12px;
    margin-bottom: 5px;
}

CSS3选择器

1.元素选择器 如：h1{}、a{}

选择器分组
1.例子 h1、h2{}
2.通配符 *{}

类选择器详解
1.类选择器允许以一种独立与文档元素的方式来指定样式。
eg:.class{}
2.结合元素选择器
eg:a.class{}
3.多类选择器
eg:.class.class{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多类选择器</title>
    <link rel="stylesheet" href="34.style.css" type="text/css"/>
</head>
<body>
    <p class="p1">this is my web page.</p>
    <p class="p2">this is my web page.</p>
    <p class="p1 p2">this is my web page.</p>
</body>
</html>
.p1{
    color: aliceblue;
}
.p2{
    font-size: 20px;
}
.p1.p2{
    font-style: italic;
}

ID选择器
1.ID选择器：
ID选择器类似于选择器，不过也有一些重要差别
eg:#id{}

2.类选择器和id选择器的差别
（1）id只能在文档中使用一次，而类可以多次使用。
（2）id选择器不能结合使用。
（3）当使用js时候，需要用到id。

属性选择器详解
1.简单属性选择
eg:[title]{}
2.根据具体属性值选择：
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择特定属性值的元素。
eg:a[href=“http://www.baidu.com”]{};
3.属性和属性值必须完全匹配。
4.根据部分属性值操作。

后代选择器
1.后代选择器
后代选择器可以选择作为某元素后代的元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>ID选择器</title>
        <link rel="stylesheet" href="35.style.css">
        <style>
         [title]{
             color: aqua;
         }
         [href="http://www.baidu.com"]{
             font-size: 30px;
         }
         [title~="title"]{
             font-size: 50px;
         }
        </style>
    </head>
    <body>
        <p title="tit">hello</p>
        <p title="t">hello</p>
        <p title="title">hello</p>
        <p title="ti">hello</p>
        <p title="titlt">hello</p>
        <p title="title ti">hello</p>
        <a href="http://www.baidu.com">百度</a>
        <p>this is <strong>my <i>web</i> page</strong><strong></strong>>.</p>
        <p>this is my <strong><i>web</i></strong> page.</p>
    </body>
    </html>
    #mydiv{
        color: aliceblue;
    }
    
    /* 后代选择器 */
    /* p i{
        color: burlywood;
    } */
    
    /* 子选择器 */
    p>strong>i{
        color: aqua;
    }

1.与后代选择器相比，子元素选择器只能作为某些子元素的元素
eg:h1>strong{};

2.相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有相同的父元素
eg:h1+p

2D、3D转换

1.通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
转换是使元素改变形状、尺寸和位置的一种效果
可以使用2D、3D来转换元素
2.2D转换方法:
translate(x,y)移动平移
rotate(deg度数) 旋转 正值是顺时针，负值是逆时针 eg:transform:rotate(45deg);
scale(x,y)缩放
skew(deg,deg)倾斜 eg:transform:skew(30deg,0deg);
matrix()变幻矩阵
3.3D转换方法：
rotateX() 沿着x立体旋转
rotateY() 沿着y立体旋转

过渡
1.通过使用CSS3，可以给元素添加一些效果。
2.CSS3过渡时元素从一种样式转换成另一种样式
动画效果的css
动画执行时间
3.属性
属性 描述
transition 四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间

动画

1.通过css3也可以进行创建动画了。
2.css3的动画需要遵循@keyframes规则。
规定动画的时长
规定动画的名称

瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多列</title>
    <link rel="stylesheet" href="41.style.css" type="text/css">
</head>
<body>
    <div class="div1">
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
        大家好，欢迎大家来到腾讯视频，这里有很多优质视频分享给大家。
    </div>
</body>
</html>


.div1{
    column-count: 3;
    -webkit-column-count: 3;
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
    column-rule: 5px outset #ff0000;
    -webkit-column-rule: 5px outset #ff0000;
}