关于css3:css3入门

5次阅读

共计 5069 个字符，预计需要花费 13 分钟才能阅读完成。

在 style 属性中间接填写 css 款式（行内款式、内联式）
填写到 <style></style> 标签中（内嵌式）
将 css 代码写入.css 文件，在 html 文件中引入该文件（内部款式），与内嵌式优先级相当。
- 链接式 <link> 属于 html 标签，加载 html 的同时加载.css 文件
- 导入式 @import 是 css 提供的，在 html 加载实现后再加载.css 文件

标签选择器
h1{}
类选择器
.class{}
id 选择器
#id {}
组合选择器
div.one,div.two{}
并且选择器
ul.nav{}
广泛选择器
*{}

父子选择器：
.nav > li {}
后辈选择器
.nav li{}
下一个兄弟选择器：
div.b_first + div.b_second{}
之后所有兄弟选择器：
div.b_first ~ div.b_second{}

:first-child
:last-child
:nth-child（参数）
参数：数字、表达式（n+3，从 n = 0 开始）、关键字（odd、even）
:hover

ul::after{ 
    clear:"both"; 
    content:""; 
    display:"block" 
}

[name] 抉择具备 name 属性的元素
[name=username] 抉择具备 name 属性，并且属性值为 username 的元素
[name^=u] 抉择具备 name 属性，并且属性值以 u 结尾的元素
[name$=u] 抉择具备 name 属性，并且属性值以 u 结尾的元素
[name*=u] 抉择具备 name 属性，并且属性值中蕴含 u 的元素

特权
!important
权值
1000 style 属性

100 #id

10 .class、伪类、属性

1 标签（元素）、伪元素
程序

(针对于块元素探讨盒子模型)

外边距
margin-top、margin-right、margin-bottom、margin-left

margin:0 auto（盒子居中，前提是曾经设置 width 值）
内边距
padding(-top/-right/-bottom/-left)
边框

border(-top/-right/-bottom/-left)

borde（速写模式):
- border-width
- border-style :
  soliddotteddasheddouble
- border-color

（上下左右、上右左下、高低右左)

宽：width
高：height

怪异盒子（边框盒子）（IE8）
box-sizing:border-box

盒子宽度为：width（padding+border+ 内容宽度）

盒子在浏览器中的宽度：width + margin-left + margin-right
传统盒子（内容盒子）（firefox）
box-sizing:content-box

盒子宽度为：padding+border+width（内容宽度）

盒子在浏览器中的宽度：padding + border + width + margin

不齐全脱离文档流，不会遮挡文本

float:left\right

浮动元素 默认宽度为 0 ，且失去了对父元素的撑持作用，即已脱离文档流。在浮动流中，若多个同级别元素浮动元素已占满一行，则主动换行。

办法一

ul::after{ 
    clear:"both"; 
    content:""; 
    display:"block" 
}

办法二
给父级元素增加 overflow:hidden 属性

position: static(默认)

relative
绝对点：该元素所在文档流中的初始地位

是否脱离文档流：不脱离

最佳实际：个别不挪动，作为绝对点
absolute
绝对点：间隔最近的父‘定位’元素。如果没有父定位元素，那就只能绝对于浏览器视口或者将某个父元素设置为定位元素

是否脱离文档流：脱离
fixed
绝对点：浏览器视口，并且不会随着浏览器的滚动而滚动

是否脱离文档流：脱离
sticky
绝对点：绝对定位和固定定位的联合，达到阈值之前时绝对定位，达到阈值之后是固定定位，阈值通过 left、top、right、bottom 来设定

当 position 的取值为 relative/absolute/fixed/sticky 这四个之一。咱们就认为以后这个元素为定位元素。定位布局能够应用定位属性，比方 left、right、top、bottom

作用：与浮动布局的作用相似，用于将一个容器中多个子元素【块元素】在一行中多列排列，罕用于响应式布局(挪动端)

应用：

<ul> 
<li></li> 
<li></li> 
<li></li> 
</ul>

ul 容器：
display:flex 让容器成为伸缩盒容器

flex-direction：row 容器中子元素的排列形式，row- 沿 x 轴排列，column- 沿 y 轴排列，即设定主轴。（穿插轴与主轴垂直）

flex-wrap:wrap/nowrap 是否容许换行

jusitfy-content:space-around 元素周围留有空白

align-items:center flex 子项在容器中穿插轴上的对齐形式，center 为居中搁置

个别给容器增加宽高，子元素在容器中排列

li 子元素
flex-basis 主轴中基准值

flex-grow 主轴中残余空间调配所占份数

flex-shrink 主轴中若有亏损，所占亏损份数

flex 速写

针对盒子内容来进行润饰，具备可继承性。

text-align:center/left/right；
vertical-align:middle 调整行内元素的垂直排列形式
line-height:32px；当文字行低等于父盒子高度时，即可达到垂直居中成果
text-decoraction:
underline/light-through/overline/none
text-decoraction-style:
solid/dotted/dashed
text-indent 缩进
text-transform:
lowercase/uppercase
overflow(overflow-x/-y):
- visible（默认）
- hidden (在父容器上设置该属性)
- scroll

font-family
font-size
font-weight
font-style
color
font（速写）:font-style font-weight font-size/line-height font-family;
normal normal 12px/3em “ 微软雅黑 ”
网络字体(https://www.iconfont.cn/）:

1. 获取字体文件

2. 在 css 定义网络字体

3. 应用
- 3.1 基准款式
- 3.2 非凡款式
- 3.3 在 html 援用

  空格

< 小于

> 大于

display:
- block
- inline
- inline-block :
  <input>、<img>、<button>、<textarea>、<label>
列表规定
list-style :none
表格规定
boreder-collapse:collapse; 当 td 增加边框，加在 table 上能够合并隔壁的边框
opacity: div 元素的透明度级别

相对单位
10px
绝对单位
- 1em，em 绝对于以后元素的字体大小
- 1rem，rem 绝对于 html 元素选择器中设定的字体大小
色彩
- 关键字 pink、red
- 十六进制 #ffffff #000
- 函数 rgb（，，）、rgba(, ,)

background-color: 能够与背景图共存
background-image:
- url(‘ 图片地址 ’)
- linear-gradient (red, yellow, blue) 线性突变
- radial-gradient 径向突变
background-repeat:
- repeat（默认）/repeat-x/repeat-y
- no-repeat
background-clip: 背景裁切的形式
- content-box
- border-box 边框以下有背景图
- padding-box 边框以下没有背景图(默认值)
background-origin: 背景铺设的终点
- content-box
- border-box
- padding-box
background-size: 等比例设置
- cover 使背景图能够齐全笼罩背景区，有时会被适当裁剪
- contain 使背景图片能够齐全装入背景区，四周可能会有空白
- 固定值
background-position:
- center
- 固定值

backgroung（速写）：url() #ccc no-repeat center;

多页面程序(jquery + bootstrap)

单页面程序教务零碎(vue vuex vueRouter elementui[组件库])

模块：

全局款式的重置
布局规定（栅格零碎）
款式（表格、列表 …）
组件
- 模态框
- 轮播图

应用：

援用 bootstrap.css[cdn]
应用

版本：

bootstrap3 浮动
bootstrap4 伸缩盒

@keyframe   动画名称{0%{} 
    50%{ } 
    100%{}}

animation-name
animation-duration
animation-delay
animation-timing-function:
linear/steps/ease/ease-in/…
animation-direction:
- reverse
- alternate
- alternate-reverse
animation-iteration-count:
- 4
- infinte
animation-fill-mode:
- forwards 动画实现后，放弃最初一个属性值
- backwards 再 animation-delay 属性指定的一段时间内，放弃初始状态
- both

关上网页的时候可能一开始有白屏
- 增强服务器
- faster mini
  - 图片压缩
  - 图片合并（图标）
  - cdn 减速
    将库【iconfont 等】放到 cdn 服务器上

应用

获取 cdn 链接

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet">

应用 class
- 根底规定
  animate_animated
- 非凡规定
  animate_pulse

（更加简略的动画，没有动画）

须要触发(:hover)

transition-property 须要过渡的属性
transition-duration 持续时间
transition-timing-function：工夫曲线函数
- linear
- steps()
- easy
transition-delay 延迟时间

transition（速写）：property duration delay timing；

transform-orgin:
centertopleft
transform：
- scale(2) 整体放大
- rotateZ(默认)/Y/Z(45deg) 旋转
- skew(45deg) 歪斜
- translateX/Y(200px) 挪动

相似于腾讯视频
容器的宽度随着屏幕的分辨率大小的扭转而扭转
相似于 mobile【纯响应式】（与 mobile 兼容）
齐全兼容挪动的设施

手机型号不同，宽度不同

不要给容器【块元素】指定宽度，让他默认为 100%
子元素【列元素】宽度应用绝对单位，百分数

@media screen{

}

.products { 
    width: 990px; 
    margin: 0 auto; 
} 
.products > ul > li { 
    width: 19.5%; 
    height: 100px; 
    background-color: rebeccapurple; 
} 
@media screen and (min-width: 1300px) { 
    .prodmucts {width: 1200px;} 
    .products > ul > li {width: 16.5%;}  
} 

@media screen and (min-width: 1500px) { 
    .products {width: 1400px;} 
    .products > ul > li {width: 14%;} 
}

正文完

css3

发表至： css3

2020-10-02

0

关于css3:两行代码纯css实现条纹图案

关于css3:前端面试每日-31-第584天

关于css3:循环结构之for循环的形式学习

关于css3:CSS选择器和权重计算

关于html:html入门

关于css3:css3入门

一、在 html 中如何引入 css

二、. 选择器

2.1 外围选择器

2.2 档次选择器

2.3 伪类选择器

2.4 伪元素选择器

2.5 属性选择器

三、优先级

四、盒子模型

4.1 款式

4.2 盒子类型

六、布局

6.1 浮动布局

6.1.1 浮动元素的 css 款式

6.1.2 革除浮动

6.2 定位布局

6.3 伸缩盒布局

七、文本规定

八、字体规定

九、实体

十、其余规定

十一、单位

十二、背景规定

十三、bootstrap（栅格布局）

十六、动画、过渡、变形

16.1 动画

16.1.1 关键帧定义

16.1.2 动画设定

16.2 动画库

16.3 过渡

16.4 变形

十七、响应式布局

17.1pc 端

17.2mobile 端

17.3 媒体查问技术

Just My Socks（注册教程内含优惠码）

关于css3:css3入门

一、在 html 中如何引入 css

二、. 选择器

2.1 外围选择器

2.2 档次选择器

2.3 伪类选择器

2.4 伪元素选择器

2.5 属性选择器

三、优先级

四、盒子模型

4.1 款式

4.2 盒子类型

六、布局

6.1 浮动布局

6.1.1 浮动元素的 css 款式

6.1.2 革除浮动

6.2 定位布局

6.3 伸缩盒布局

七、文本规定

八、字体规定

九、实体

十、其余规定

十一、单位

十二、背景规定

十三、bootstrap（栅格布局）

十六、动画、过渡、变形

16.1 动画

16.1.1 关键帧定义

16.1.2 动画设定

16.2 动画库

16.3 过渡

16.4 变形

十七、响应式布局

17.1pc 端

17.2mobile 端

17.3 媒体查问技术

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）