关于css3:css3入门

28次阅读

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

一、在 html 中如何引入 css

  • 在 style 属性中间接填写 css 款式（行内款式、内联式）
  • 填写到 <style></style> 标签中（内嵌式）

  • 将 css 代码写入.css 文件，在 html 文件中引入该文件（内部款式），与内嵌式优先级相当。

    • 链接式 <link> 属于 html 标签，加载 html 的同时加载.css 文件
    • 导入式 @import 是 css 提供的，在 html 加载实现后再加载.css 文件

二、. 选择器

2.1 外围选择器

  • 标签选择器

    h1{}

  • 类选择器

    .class{}

  • id 选择器

    #id {}

  • 组合选择器

    div.one,div.two{}

  • 并且选择器

    ul.nav{}

  • 广泛选择器

    *{}

2.2 档次选择器

  • 父子选择器：

    .nav > li {}

  • 后辈选择器

    .nav li{}

  • 下一个兄弟选择器：

    div.b_first + div.b_second{}

  • 之后所有兄弟选择器：

    div.b_first ~ div.b_second{}

2.3 伪类选择器

  • :first-child
  • :last-child
  • :nth-child（参数）

    参数：数字、表达式（n+3，从 n = 0 开始）、关键字（odd、even）

  • :hover

2.4 伪元素选择器

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

2.5 属性选择器

  • [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 标签（元素）、伪元素

  • 程序

四、盒子模型

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

4.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

4.2 盒子类型

  • 怪异盒子（边框盒子）（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

六、布局

6.1 浮动布局

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

6.1.1 浮动元素的 css 款式

float:left\right

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

6.1.2 革除浮动

  • 办法一

    ul::after{ 
    clear:"both"; 
    content:""; 
    display:"block" 
}
  • 办法二

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

6.2 定位布局

position: static(默认)

  • relative

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

    是否脱离文档流：不脱离

    最佳实际：个别不挪动，作为绝对点

  • absolute

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

    是否脱离文档流：脱离

  • fixed

    绝对点：浏览器视口，并且不会随着浏览器的滚动而滚动

    是否脱离文档流：脱离

  • sticky

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

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

6.3 伸缩盒布局

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

应用：

<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 援用

九、实体

&nbsp; 空格

&lt; 小于

&gt; 大于

十、其余规定

  • 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;

十三、bootstrap（栅格布局）

多页面程序(jquery + bootstrap)

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

模块：

  • 全局款式的重置
  • 布局规定（栅格零碎）
  • 款式（表格、列表 …）

  • 组件

    • 模态框
    • 轮播图

应用：

  • 援用 bootstrap.css[cdn]
  • 应用

版本：

  • bootstrap3 浮动
  • bootstrap4 伸缩盒

十六、动画、过渡、变形

16.1 动画

16.1.1 关键帧定义

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

16.1.2 动画设定

  • 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

16.2 动画库

  • 关上网页的时候可能一开始有白屏

    • 增强服务器

    • 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

16.3 过渡

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

须要触发(:hover)

  • transition-property 须要过渡的属性
  • transition-duration 持续时间

  • transition-timing-function：工夫曲线函数

    • linear
    • steps()
    • easy
  • transition-delay 延迟时间

transition（速写）：property duration delay timing；

16.4 变形

  • transform-orgin:

    ​ centertopleft

  • transform：

    • scale(2) 整体放大
    • rotateZ(默认)/Y/Z(45deg) 旋转
    • skew(45deg) 歪斜
    • translateX/Y(200px) 挪动

十七、响应式布局

17.1pc 端

  • 相似于腾讯视频

    容器的宽度随着屏幕的分辨率大小的扭转而扭转

  • 相似于 mobile【纯响应式】（与 mobile 兼容）

    齐全兼容挪动的设施

17.2mobile 端

手机型号不同，宽度不同

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

17.3 媒体查问技术

@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:css3-1简介-css编写位置
关于css3:你是否真的适合搞NDK开发
关于css3:Week-2-Introduce-to-CSS-Part-1
关于css3:CSS-的-TransformTransition-Animation-简单理解使用