CSS样式

css概述

层叠样式表（cascading style sheet）

层叠是指==将多个样式施加在一个元素（标签）上==

作用：

好处：

使用方法

1、在HTML标签的style属性书写，这个属性的值，是由一些小的键值对构成

<div>12345</div>

2、在页面head标签中添加style标签

<style>
    div {
        color:yellow;
        font-size:500px;
    }
</style>

3、在head标签中添加link标签引入css文件

<link rel="stylesheet" href="https://www.cnblogs.com/am0304/p/css%E6%96%87%E4%BB%B6%E5%9C%B0%E5%9D%80" />

使用时机：

盒子模型

对页面进行布局（div + css）

padding：设置内补丁

默认情况，如果我们设置内补丁，会影响到整个盒子的大小，那我们需要设置一个属性box-sizing: border-box

margin：设置外补丁

float浮动

会打破默认的流式布局，一般建议，如果一个元素进行了浮动，其余的和该元素同级别的也进行浮动。

position定位

属性

尺寸

支持百分比或者像素

文本（字体）

背景

边框

选择器

可以帮助我们快速定位到某一个或者某几个标签的，就称为选择器

格式：

选择器 {
    小键值对；
    ... ...
 }

元素选择器

标签名{
    样式属性
    key:value;
}

ID选择器

#ID{
    样式属性
    key:value;
}

类选择器

.类名{
    样式属性
    key:value;
}

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

组合选择器

选择器,选择器,选择器{
    样式属性
    key:value;
}

后代选择器

父标签 后代标签 {
  样式属性
  key:value;
}

子元素选择器

父标签>子标签 {
  样式属性
  key:value;
}

兄弟选择器

/*同等级的，标签1后方的*/
标签1~标签2{
   样式属性
   key:value; 
}

相邻选择器

/*同等级的，标签1后方的第一个标签*/
标签1+标签2{
  样式属性
  key:value;
}

伪类选择器

标签:link{
    标签未被访问前的样式属性
    key:value;
}
标签:hover{
    鼠标悬停的标签样式属性
    key:value;
}
标签:visited{
    标签已被访问后的样式属性
    key:value;
}
标签:active{
    鼠标点击标签未释放的样式属性
    key:value;
}
标签:last-child{
    最后一个该标签的子标签样式属性
    key:value;
}
标签:first-child{
    第一个该标签的子标签样式属性
    key:value;
}
标签:nth-child(n){
    该标签的父标签的第n个该类子标签的样式属性
    key:value;
}

属性选择器

标签[key='value']{
    样式属性
    key:value; 
}
标签[key*='a']{
    属性key的值包含a的标签的样式属性
    key:value; 
}
标签[key^='a']{
    属性key的值以a开头的标签的样式属性
    key:value; 
}
标签[key$='a']{
    属性key的值以a结尾的标签的样式属性
    key:value; 
}
标签[key~='hello']{
    属性key的值包含单词hello的标签的样式属性
    key:value; 
}

2D\3D转换

2D

/*从其当前位置移动元素*/
transform: translate(横向, 纵向);
/*旋转一定的角度*/
transform:rotate(角度deg);
/*增大或减小元素大小*/
transform:scale(宽度增大倍数,高度增大倍数);

3D

/*元素绕其 X 轴旋转给定角度*/
transform: rotateX(角度deg);
/*元素绕其 Y 轴旋转给定角度*/
transform: rotateY(角度deg);
/*元素绕其 Z 轴旋转给定角度*/
transform: rotateZ(角度deg);

动画

@keyframes 动画名
{
    from{开始样式}
    to{结束样式}
}
div{
    animation:动画名 时间;
}

动画属性

标签 , , ,

发表回复