CSS3

CSS :

用于定义HTML页面的样式（外观）

页面表现的基础，可以控制布局，控制元素的渲染

HTML决定文档的内容结构，CSS决定了文档的

CSS术语

CSS规则

CSS代码由一个一个的规则组成

每个规则指定了：对那些元素应用什么样式

CSS规则-选择器

{基础选择器}

1.元素选择器：功能：选中与名字相同的标签，应用大括号里的样式。

注：可以选中0-n个

元素选择器只要跟选择的元素标签相同就会产生相同的属性

书写格式：元素名{声明块}

声明块：是由多条声明组成的 书写格式：属性名：属性值

列：header{color:red;}

2.类选择器：功能：选中与类名相同的元素，应用大括号里的样式。

注：可以选择一个到多个

书写格式：.类名{声明块}

列：.box1{color: deeppink;}

类名：1 命名方式：是自定义的（字母，下划线，不可以数字开头）

3.层次选择器

1 子集选择器

书写格式：A父元素>B子元素{声明块}

列：nav>a{color: teal;}

 

 

盒子的分类

不同的元素产生的盒子类型可能不同

一个元素，产生什么样的盒子取决于它的display属性

inline 行盒 block 块盒 none 不生成盒子 display 其它盒子

属性：display 默认值：inline 不能被继承

盒子的组成

margin 外边距 与其它盒子之间的距离

border 边框 { 1边框粗细大小 2样式（实线solid，虚线dashed 等 3样色）}

padding 内边距 边框与内容之间的距离

content 内容

width宽度 height高度）取值单位：像素 px

批量生成文本内容：乱序铭文

lorem个数 例子：lorem3

常规流块盒水平方向居中步骤

1 给固定宽度 2 margin:auto;

 

main标签： 页面主体内容：一个页面只出现一次

1：页面在一个固定宽度内

2：让内容在整个页面位置居中

 

 

外部样式表：多用于开发

<link rel="stylesheet" href="">

 

内部样式表：多用于测试

<style></style>

 

文本对齐方式：

字体大小

左对齐 text-align: left;

居中 text-align: center;

右对齐 text-align: right;

字体加粗 font-weight: bold;

 

当两个块级元素进行嵌套时，这两个元素的外边距是被进行合并的

（谁大取值谁的外边距）

但是，子元素是完全嵌套在父元素里面

解决方法：针对父元素添加边框

 

 

Flex 布局：弹性布局

容器和项目：

容器：装东西（元素 标签）

A元素装了一个B元素

A相对B：就是容器

B相对A：就是项目

A：父元素（容器）

B：子元素（项目）

 

主轴和交叉轴：

主 轴：默认水平向右（x轴）

水平方向的位置：左 中 右

交叉轴：默认水平向下（y轴）

垂直方向的位置：上 中 下

 

 

创建弹性布局：

display: flex;

针对某个元素添加了display: flex; 这个元素就是容器

里面的子元素就是项目

特点：所有的项目（子元素）都会一行显示。

当所有项目的宽度之和大于容器时，所有项目依旧在一行显示

，且每个项目都自动缩小

 

desplay：flex-wrap;是否换行

 

flex-wrap: nowrap; 不换行

flex-wrap: wrap; 换行

flex-wrap: wrap-reverse; 倒过来换行

 

 

justify-content: ;

justify-content: flex-start; 主轴的起点对齐

justify-content: center; 主轴的中间对齐

justify-content: flex-end; 主轴的终点对齐

 

 

剩余空间：容器的宽度 - 项目之和的宽度 = 剩余空间

 

justify-content: space-between; 项目和容器的距离为0

justify-content: space-around; 项目和容器的距离=项目和 项目的距离*0.5

justify-content: space-evenly;项目和容器的距离=项目和 项目的距离*1

 

 

 

emmet插件

批量生成标签书写格式：标签名*n a*n

 

 

<!-- HTML和CSS相关联 -->

<!-- 外部引用样式表 -->

<link rel="stylesheet" href="./index.css">

 

 

<a href="网址URL">超链接</a>

url地址：

路径：某个文件的位置

相对路径和绝对路径

 

绝对路径：

地址是唯一的，通常用来：调用其他网站的资源 访问站外资源

协议：//网址/文件名名称

协议：http:// https://

网址：www.baidu.com

文件名称：根目录：文件名称地址

案例：https://www.baidu.com/img/flexible/logo/pc/result.png

 

相对路径：两个位置的相对路径，相当于当前资源的位置，只能访问站内资源

格式：. / :当前文件夹位置（可以省略），针对当前网站的资源

../ ：返回上一层目录

 

 

 

 

 

display: flex;

flex-wrap: nowrap; :不换行

flex-wrap: wrap; 换行

flex-wrap: wrap-reverse; 倒过来换行

 

justify-content: flex-start; 主轴起点对齐

justify-content: center; 主轴中间对齐

justify-content: flex-end; 主轴终点对齐

 

剩余空间

justify-content: space-between;

项目与容器的距离为0

justify-content: space-around;

项目与容器的距离为项目和项目的距离*0.5

justify-content: space-evenly;

项目与容器的距离为项目和项目的距离*1

 

align-items: flex-start; 交叉轴起点对齐

align-items: center;交叉轴中间对齐

align-items: flex-end;交叉轴终点对齐

 

 

当项目没有设置高度时，

项目和容器的高度一致

align-items: stretch;

基线对齐

align-items: baseline;

 

行高让块盒居中的方法

height: 100px;

line-height:1oopx ;

 

 

去除下划线

text-decoration: none;

text-decoration: underline;

对一段文字中的某几个文字进处理

<span></span>

 

 

 

动画：简单动画通常称为“过渡 transition”

transition-property:元素名（width宽度），（height高度）；等等

transition-duration: 1.5s;变化的时间，1s=1000ms

opacity: 0;透明，取值范围0-1，0透明，1不透明

复杂动画

@keyframes move:@引用，keyframes 复杂动画，move动画的名字，自己设置。

调用动画

animation：move 2s 2；move:自己设置的动画的名字 2s：动画的时间，2:动画播放的次数（infinite无限循环）

旋转

transform: rotate(65deg)旋转65度

缩放

transform: scale(1)

取值：默认值是1，大于1的时候放大，小于1的时候缩小

倾斜

transform: skew

 

层叠 继承 渐变 移动端布局

    

 

层叠

1.比较优先级 优先级低的声明块会被淘汰，优先级高的声明胜出

！important

若属性值后跟上！important，则表示一条重要声明，否则，表示普通声明

2.比较特殊性 特殊性低的声明会被淘汰，特殊性高的声明胜出

行内样式>ID选择器>类选择器>元素选择器>通配符选择器

（特殊性从高到低）

比较特殊性-具体规则

在比较特殊性时，每一个冲突的声明，会生成4个数字（a，b，c，d）以比较特殊性a越大，特殊性越高，若a相同，比较b，b越大，特殊性越高，依次类推。

a：若声明是行内样式，则为1，否则为0

b：规则中的ID选择器的个数。

c：规则中类选择器，伪类选择器和属性选择器的个数

d：规则中元素选择器，伪元素选择器的个数

当计算选择器分组的时候，需要分开计算。

3.比较源次序 源次序靠前的声明会被淘汰，靠后的声明胜出

继承：是指子元素会自动拥有父元素的某些CSS属性，继承须有传递性

可继承的属性：color ，font-size，font-weight，text-align

不可继承的属性：background-color

继承发生的场景：一个元素的某个CSS属性，只有满足两个条件，才会继承父元素。

1.该属性是可继承的属性

2.该属性在样式表中没有声明

强制继承：也叫显式继承，是指将CSS属性设置为inherit这样做，通常有两个原因：

1.为了继承有些不可继承的属性

2.为了继承已被声明的属性

渐变

径向渐变：

background-image: radial-gradient(pink,blue);

移动端布局

阶段：1.百分比2.750的固定宽度3.flex+rem4.栅格系统

表单

   

form表单：适用场景：登陆，注册，提交，搜索<form acti

on="提交地址"></form>

action:表单数据提交的地址

method：表单数据传输的方式

get：把提交的数据放在地址栏进行提交

post：不会把提交的数据放在地址栏进行

下拉列表

<select name="" id=""></select>

<select multiple>multiple：可以让下拉列表变成多选

下拉列表项

<option value=""></option>

多行文本

<textarea cols="30" rows="10"></textarea>

cols:一行可以写的字符数，两个字符为一个汉字，字母和数字都是一个字符。

rows：可以展示内容的行数。

控件:input

value：值，黑色文字，提交给服务器，用户输入内容后，值不会消失。

<input type="text" value=“”> text为文本内容会直接显示在输入框

文本：text

<input type="text" placeholder=”“>

placeholder：提示文字，文字颜色为灰色，当用户输入内容，提示文字消失，对文本框（text），密码（passwo），多行文本（textarea）有效

<input type="text" placeholder=”“ required="">

required:代表控件是必填项，如果没有填写，则会提示。

readonly:只读，只能看到不能修改,对文本框，密码，多行文本

disable：不可用，控件变成灰色，对所有控件

单选：radio

<input type="radio">

<input type="radio" value="男" name="sex" checked>男

checked：默认选中，只针对单选（radio）和复选（checkbox）

单选需要用name来进行划分为一组

多选：checkbox

<input type="chekbox">

文件：file

<input type="file">

颜色：color

<input type="color">

日期：date

<input type="date">

体重:range

<input type="range">

隐藏：hidden

<input type="hidden">

按钮：button

<input type="button" value="按钮">

提交登陆：submit

<input type="submit" value="提交/登陆">

清除(重置）：reset

<input type="reset">

图片：image(只有提交和重置的功能)

<input type="image">

属性选择器

1.元素名[属性名=“属性值”]{声明块}

2.元素名[属性名^=“属性值”]{声明块}(^表示选中属性名开始的元素应用样式）

3.元素名[属性名$=“属性值”]{声明块}($表示选中属性名结束的元素应用样式）