CSS核心样式

作者: 安掌门dear | 来源:发表于2020-10-24 15:05 被阅读0次

CSS学习资源
【2016年特别福利】史上最全CSS学习资料大全
CSS核心样式及应用(一)
CSS核心样式
CSS核心样式
CSS核心样式及应用(二)
css样式入门书目录
1.9 CSS选择器
[jQuery]设置css样式
前端插件reveal.js制作PPT-进阶

学前体会

本文收集自拉勾教育大前端就业班

从今天开始也算正式步入前端的课程了，我是一个不善于记笔记的人，但我知道笔记可以带来多大的帮助,因为我的小脑袋瓜真的记不住，说真的css样式笔记记起来是真的无聊，和流水账单一样，感觉更偏理论点，尤其在运用中如何把所学的东西串连起来，用创造性思维去理解才是这个工具的真谛，对于毫无审美的我来说，拜托以后碰到一个给力的UI小姐姐

CSS常用样式

1.font-weight

作用：设置文字是否加粗显示
单词类型：normal、bold、bolder、lighter

数字类型：100-900直接的整百数字。400等价于normal,700等价于bold

<p style="font-weight: normal;">默认值</p>
<p style="font-weight: bold;">定义粗体字符</p>
<p style="font-weight: bolder;">定义更粗的字体</p>
<p style="font-weight: lighter;">定义更细的字体</p>

2.font-style

作用：设置文字是否斜体显示

属性值：normal、italic、oblique

<p style="font-style: normal;">正规的字体</p>
<p style="font-style: italic;">斜体文字</p>
<p style="font-style: oblique;">倾斜的文字</p>

3.line-height

作用：设置一行文字的行高
行高是文字占有的高度，并垂直居中
```
<p style="line-height: 40px;">行高</p>
```

4.font综合属性

<p style="font: 14px "宋体";">字号 字体</p>
<p style="font: 14px/28px "宋体";">字号/行高 字体样式</p>
<p style="font: bold italic 14px/28px '宋体';">加粗 斜体 字体大小/行高 字体样式</p>

5.text-align 水平对齐

作用：设置文本水平方向对齐

属性：left、center、right

<p style="width: 200px; 
height: 100px;
background-color: aquamarine;
text-align: center;
">设置水平对齐方式</p>

6.text-decoration文本修饰属性

设置文本整体是否有线条的修饰效果

属性：none、overline、line-through、underline

<p style="text-decoration: none;">没有修饰</p>
<p style="text-decoration: overline;">上划线</p>
<p style="text-decoration: line-through;">中划线，删除线</p>
<p style="text-decoration: underline;">下划线</p>

7.text-indent文本缩进

作用：设置段落首行是否缩进
属性：px单位、em单位、百分比

盒模型

用来描述盒子位置、尺寸的属性，分别是width、height、padding、border、margin

1.width

作用：设置元素内容的区域宽度

2.height

作用：设置可以添加元素内容的区域高度

3.padding

作用：设置元素边框内部到宽高之间的距离

p{
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
  }

4.border

作用：设置内边距外面的边界区域，作为盒子实体化的最外层
属性：分别设置线的宽度、线的形状、线的颜色
boder-style
- 定义边框样式
- 常用属性：none:无边框，solid:实线，dashed:虚线
boder-color
- 设置边框颜色

5.margin

作用：设置盒子与盒子之间的距离

p{
  margin-top:10px;
  margin-right:20px;
  margin-bottom:30px;
  margin-left:40px;
}

盒模型属性

清除默认样式

大部分标签都有浏览器加载的默认样式，会对布局造成一些影响。为避免默认样式影响，一定要清楚默认样式

*{margin: 0;padding: 0;}
p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;}
h1,h2,h3,h4,h5,h6,b,strong{font-weight: normal}

height应用

高度可以不设置，会根据内部内容高度自动撑开
如果设置了高度，后面同级元素过多，会溢出盒子区域

overflow属性

如果出现溢出现象，通过overflow进行溢出部分内容显示

overflow="visible" 默认值，显示溢出部分
overflow="hidden" 隐藏溢出部分，隐藏超过边框内容
overflow="scroll" 溢出部分出现滚动条，无论有没有溢出，水平和垂直都会出现滚动条
overflow="auto" 自动的，没有溢出正常显示，溢出就出现滚动条

居中

单行文本垂直居中：让文字行高line-height等于盒子高度height
多行文本垂直居中：让元素高度自适应设置元素内边距上下值相同‘
元素水平居中：子盒子宽度低于父盒子宽度，设置子盒子的margin值，水平方向的值设置auto

父子盒模型

子元素的宽度加在一起不能大于父元素的宽带
盒模型自动内减：不设置子元素的width，同时设置子元素其他属性，子元素的width会自动缩减

margin塌陷现象

同级元素塌陷：在垂直方向如果两个元素的外边距有相遇的，浏览器加载两个边距中值较大的那个
- 解决：两元素之间只设置一个方向的margin
父子元素塌陷：父元素和子元素设置了同方向的margin-top两属性之间相遇造成塌陷
能用padding属性就不用margin属性，水平间不存在margin塌陷现象

标准文档流

元素排版过程中，元素默认从左往右，从上往下，前面内容发生变化，后面的内容位置也会变化
HTML就是一种标准文档流文件

微观现象

空白折叠现象
文字类元素排在一行出现高低不齐，底边对齐效果
写满元素时，自动换行

元素等级、布局元素的分类

标准流中，元素区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素
块级元素：大部分容器级标签都是块级元素<div>、<h1>
- 块级元素可以设置宽高，在浏览器中正常加载本身属性为display:block;
- 独占一行，不能和其他标签并排,可以直接控制宽度、高度等其他相关css属性
- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
- 在不设置高度的情况下，块级元素的高度是它本身内容的高度
行内元素：大部分文本级标签<span>、<a>、<b>
- 行内元素不能正常加载宽高，本身属性为display:inline;
- 可以和其他行内块元素并排一行,不可以直接控制宽度、高度等其他相关css属性
- 无论设置宽高，都只被内容撑开，不能嵌套块级元素
行内块元素也叫内联块状元素：<img>、<input>
- 可以设置宽度和高度，本身属性为display:inline-block;
- 可以与其他并排一行显示
- 如果不设置宽高，以原始尺寸加载，或被内容撑开
- 具有标准流的微观性质

显示模式display

可以改变标签的显示模式

根据属性值的不同，可以加载对应元素等级的特点

display: block 元素以块级元素模式加载，具备块级特点
display: inline 元素以行内元素模式加载，具备行内特点
display: inline-block 元素以行内块元素加载，具备行内块特点
display: none 标签及内部内容直接隐藏，让出原有标准流位置

脱离标准流

标签元素脱离标准流的方法包括：浮动，绝对定位、固定定位

浮动float

作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示

浮动的性质

浮动的元素脱离标准流，具备行块二象性，不会有空白折叠现象

浮动元素依次贴边

浮动的属性值：left、right
父元素宽度足够，子元素会依次贴边
```
float: left
float: right
```

浮动元素没有margin塌陷

margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不再具有margin塌陷现象

浮动的元素让出标准流位置

元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素

字围现象

同级元素前面元素浮动，后面元素不浮动，在不浮动的元素中设置文字，文字内容不会被覆盖，会围绕浮动元素进行加载

清除浮动

给标准流的父元素添加一个高度height，如果子元素高度发生变化，父元素不会自适应

给标准流父元素添加clear属性，父元素不受浮动影响

clear: left 清除前面左浮动带来的影响
clear: right 清除前面右浮动带来的影响
clear: both 清除前面所有浮动带来的影响

伪类

:after：表示选中的是某个标签内部的最后位置

content必须添加，内容允许为空

.clearfix:after{
  content: "1";   添加一个文字内容
  display: block; 将文字转换为块级元素
  height: 0;      高度设置0，避免影响父盒子高度
  clear: both;    清除浮动
  visibility: hidden; 将元素占位隐藏
}

溢出隐藏

设置overflow: hidden，将超过高度的部分直接隐藏
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸，无论子元素是标准还是浮动，都会将最高高度作为子高度加载
浮动影响后面的元素：父元素有了高度，可以管理内部所有浮动元素，不会延申到后面标签中影响贴边

CSS伪类选择器

不需要给标签添加任何属性，都是语法提前规定好的，也不一定立即加载到浏览器上

<a>标签的伪类

用户触发对应的行为，就可以加载对应的样式

a:link{color:gray;}       访问前状态
a:visited{color: cyan;}   访问后状态
a:hover{color: red;}      鼠标悬浮经过状态
a:active{color: yellow;}  鼠标点击状态

背景属性

background-color

在盒子区域添加背景颜色的修饰

background-image

给盒子添加图片的背景修饰
```
background-image: url(image/1.jpg);
```

background-repeat

背景重复，配合background-image一起使用

background-repeat: repeat     重复，默认属性
background-repeat: no-repeat  不重复，只加载一次
background-repeat: repeat-x   水平重复，垂直方向不重复
background-repeat: repeat-y   垂直重复,水平方向不重复

background-position

主要用于设置不重复的图片在背景区域加载开始位置
水平方向可选单词：left、center、right

垂直方向可选单词：top、center、borrom

background-position: center center  先水平再垂直

像素定位：正数表示向右向下移动，负数表示向左向上移动
```
background-position:100px; 100px; 以左上角为坐标开始移动
```

background-attachment

背景附着：设置背景图片是否随着页面或盒子的滚动而滚动

background-attachment: scroll   滚动的表示背景与盒子相对位置不变
background-attachment: fixed    固定的，页面滚动背景图片不变

综合写法

background: 图片地址  背景重复   背景定位   背景附着
background: url(image/i.jpg) no-repeat center top fixed #fff; 位置可以互换

文字隐藏方法

将字号设置为0，IE7以下兼容有问题
可以设置text-index,属性值为负的很大的值，文字会走出盒子外部，再设置溢出隐藏隐藏文字

text-index需要转化为块级元素才能设置缩进

CSS精灵

css精灵是一种处理网页背景图像的方式
将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片
利用背景定位技术，将精灵图的每个小图片加载到对应标签

背景半透明

css3支持背景半透明的写法，颜色值增加了一种rgba模式
0-1之间，0表示完全透明，1表示完全不透明
```
background-color: rgba(255,0,0,0.4)
```

背景缩放background-size

通过background-size设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动web开发中做屏幕适配非常广泛

background-size: 100px; 调整宽度，长度等比缩放
background-size: cover; 把背景图拓展至足够大，使背景图覆盖背景区域，溢出部分会被隐藏
background-size: contain; 把图片扩展至最大尺寸，保证图片完全显示在背景区域

定位

定位属性position

设置定位的元素，它需要根据某个参考元素发生位置偏移

position: relative;   相对定位
position: absolute;   绝对定位
position: fixed;      固定定位

偏移量属性

定位元素药发生位置变化的移动，必须搭配偏移量属性进行设置

相对定位

相对定位的元素不脱离标准流，不会让出原来占有的位置
相对定位的参考元素是自身，left的正值等于right的负值
由于相对定位元素比较稳定，不会随意让出位置，可以作为绝对定位的参考元素
```
position:relative;   设置相对定位，配合top,right使用
```

绝对定位

元素脱离标准流，会让出标准流的位置，可以设置宽高，也可以随时定义位置，不设置宽高只能被内容撑开
在绝对定位中，参考点不同，left正值不再等价于right的负值
```
position:absolute;   设置绝对定位，配合top,right使用
```

祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考<body>
参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先
如果绝对定位参考元素是某个祖先级，会忽视参考元素的padding区域

固定定位

参考元素：浏览器窗口
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置
```
position: fixed
```

定位应用

压盖效果

由于绝对定位的元素脱标，压盖效果更好，实际工作中，常见的是绝对定位制作的压盖

居中

在需要居中的方向使用偏移量属性比如：left:50%
在给绝对定位的子盒子设置一个同方向的margin,属性为负的自身宽度的一半

压盖

如果想要更改定位的元素压盖顺序，可以设置一个z-index属性
属性值大的会压盖属性值小的，设置z-index属性会压盖没有设置的
如果属性值相同，后写的压盖先写的
z-index只能给定位的元素设置才能生效
如果父级设置了z-index,那么子级也会跟随父级一起设置

轮播图实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    .lunbo{
      position: relative;
      width: 500px;
      height: 750px;
      border: 1px solid chartreuse;
      margin: 0 auto;
    }
    .lunbo .pic li{
      position: absolute;
      display: none;
      top: 0;
      left: 0;
    }
    .lunbo .pic li img{
      width: 500px;
    }
    .lunbo .pic .current{
      display: block;
    }
    .lunbo .btn a{
      text-decoration: none;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.3);
      font: 20px/40px "宋体";
      text-align: center;
      color: #000;
      font-weight: bold;
    }
    .lunbo .btn .leftbtn{
      left: 0;
      border-radius: 0 50% 50% 0;
    }
    .lunbo .btn .rightbtn{
      right: 0;
      border-radius: 50% 0 0 50%;
    }
    .lunbo .btn a:hover{
      background-color: rgba(0, 0, 0, 0.6);
    }
    .lunbo .sub{
      position: absolute;
      left: 100px;
      bottom: 50px;
      width: 300px;
    }
    .lunbo .sub li{
      float: left;
      width: 20px;
      height: 20px;
      margin-right: 20px;
      background-color:  rgba(0, 0, 0, 0.3);
      font: 12px/20px "微软雅黑";
      text-align: center;
      border-radius:50%;
      cursor: pointer;    /*光标变成小手*/
    }
    .lunbo .sub .current{
      border: 2px solid snow;
      display: block;
    }
    .lunbo .sub li:hover{
      border: 2px solid snow;
    }
  </style>
</head>
<body>
  <div class="lunbo">
    <ul class="pic" id="pic">
      <li class="current"><img src="lunbo/1.jpg" alt=""></li>
      <li><img src="lunbo/2.jpg" alt=""></li>
      <li><img src="lunbo/3.jpg" alt=""></li>
      <li><img src="lunbo/4.jpg" alt=""></li>
      <li><img src="lunbo/5.jpg" alt=""></li>
      <li><img src="lunbo/6.jpg" alt=""></li>
    </ul>
    <div class="btn">
      <a href="javascript:;" class="leftbtn">&lt;</a>
      <a href="javascript:;" class="rightbtn">&gt;</a>
    </div>
    <ol class="sub" id="sub">
      <li onclick="show(0)">1</li>
      <li onclick="show(1)">2</li>
      <li onclick="show(2)">3</li>
      <li onclick="show(3)">4</li>
      <li onclick="show(4)">5</li>
      <li onclick="show(5)">6</li>
    </ol>
  </div>
  <script>
    var lis=document.getElementById('sub').getElementsByTagName('li')
    var imgs=document.getElementById('pic').getElementsByTagName('li')
    function show(num){
      for(var i=0;i<imgs.length;i++){
        if(i==num){
          imgs[num].className="current"
          imgs[num].style.display="block"
        }else{
          imgs[i].className=""
          imgs[i].style.display=""
        }
      }
    }
  </script>
</body>
</html>

下一篇文章：CSS3新增内容 https://www.jianshu.com/p/99664ca751a9

CSS学习资源
基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...
【2016年特别福利】史上最全CSS学习资料大全
基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...
CSS核心样式及应用(一)
CSS核心样式在学习了html和css的基础之后，接下来开始学习css的核心样式语法及其应用。在学习中我们不仅要...
CSS核心样式
CSS常用样式字体属性粗细font-weight 作用：设置文字是否加粗显示属性名：font-weight，...
CSS核心样式
学前体会本文收集自拉勾教育大前端就业班从今天开始也算正式步入前端的课程了，我是一个不善于记笔记的人，但我知道笔...
CSS核心样式及应用(二)
在学习了html和css的基础之后，接下来开始学习css的核心样式语法及其应用。在学习中我们不仅要悉知css的样式...
css样式入门书目录
css样式-字体属性 css样式-背景属性 css样式-边框属性 css样式-列表属性 css样式-定位属性 cs...
1.9 CSS选择器
1.1核心：html负责结构，css负责样式，js负责行为； css写在head标签里，容器style标签；基本结...
[jQuery]设置css样式
获取css样式设置单个css样式设置多个css样式
前端插件reveal.js制作PPT-进阶
一、文件夹结构 1、css/ 核心样式文件2、js/ 核心 JavaScript 文件3、plugin/ 为 re...