CSS

2019-04-03 本文已影响0人啃香菜的花萝萝

CSS(Cascading Style Sheet)

CSS 负责样式
注意：自右向左的顺序

1. 引入CSS

css的引入方式一共有3种：

行间样式

<div style="width: 100px; height: 100px; background-color: pink;"></div>

页面级 CSS

<head>
  ... ...
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div></div>
</body>

外部css文件
使用 link 标签

/* css 文件， 例如: test.css*/
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: orange;
}

<!-- html 文件 -->
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
  <div></div>
</body>

2. css 基础选择器

id选择器
注意：id值唯一

/* css 文件*/
#only {
  background-color: pink;
}

<!-- html 文件 -->
<div id="only">123</div>

class 选择器

/* css 文件*/
.a {
  background-color: yellow;
}
.b {
  color: #f40;
}

<!-- html 文件 -->
<div class="a b">123</div>
<div class="a">234</div>

标签选择器

/* css 文件*/
div {
  background-color: orange;
}

<!-- html 文件 -->
<div>123</div>

通配符选择器（*）

/* css 文件*/
* {
  background-color: green;
}

<!-- html 文件 -->
<span>123</span>
<div>234</div>

属性选择器

/* css 文件*/
[id] {
  background-color: skyblue;
}

[id="only"] {
  background-color: grey;
}

<!-- html 文件 -->
<div id="only" >123</div>
<div id="only1" >234</div>

!important

/* css 文件*/
div {
  background-color: pink !important;
}

<!-- html 文件 -->
<div style="background-color: red;">123</div>

3. css 复杂选择器

父子选择器/ 派生选择器

/* css 文件*/
.wrapper span {
  background-color: orange;
}

<!-- html 文件 -->
<div class="wrapper">
  <span>123</span>
</div>
<span>345</span>

直接子元素选择器

/* css 文件*/
div > strong {
  background-color: orange;
}

<!-- html 文件 -->
... ...
<div>
  <strong>111</strong>
  <span>
    <strong>222</strong>
  </span>
</div>
... ...

并列选择器

/* css 文件*/
/* 并列选择器 */
div.demo{
  background-color: orange;
}

<!-- html 文件 -->
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

分组选择器

/* css 文件*/
em, strong, span {
  background-color: pink;
}

<!-- html 文件 -->
<em>1</em>
<strong>2</strong>
<span>3</span>

伪类选择器
最常用的有：hover

/* css 文件*/
a:hover {
  background-color: orange;
}

<!-- html 文件 -->
<a href="www.baidu.com"> baidu </a>

4. css 优先级

基本的情况下：
!important > 行内样式 > id > class = 属性选择器 > 标签选择器 > 通配符选择器
然而遇到复杂选择器的时候，上面这坨球用没用。需要使用 css权重计算，才能得出结论。

5. css 权重

下面的数字是256进制的。

选择器	权重值
!important	Infinity
行内样式	1000
id	100
class/ 属性/ 伪类	10
标签/ 伪元素	1
通配符	0

举个栗子：

只要写在同一排的选择器，你把他们权重值相加；哪个值大，显示哪个。
如果两个值相同，写在后面的会覆盖前面的样式。
结果为：红

/* css 文件*/
#idDiv p {  // 100+1
  background-color: red;
}

.classDiv .classP { // 10+10
  background-color: green;
}

<!-- html 文件 -->
... ...
<div class="classDiv" id="idDiv">
  <p class="classP" id="idP">1</p>
</div>
... ...

6. css属性

div {
  font-size: 50px;
  font-weight: bolder;
  font-style: italic;
  font-family: arial;
  color: rgb(255, 255, 255);
  border: 2px solid black;
  text-align: center;
  height: 200px;
  line-height: 160px;
}

<!-- html 文件 -->
... ...
<div></div>
... ...

设置字体大小 font-size
设置字体粗细 font-weight，值： lighter, normal(400), bold(700), bolder 或者 100-900
设置字体样式 font-style，常用值： italic
设置字体 font-family，常用值：arial
设置字体颜色 color，值：纯英文单词 ( red)；颜色代码 (#f40)；颜色函数(rgb(0-255, 0-255, 0-255))

颜色代码知识补充：
每两位代表一个颜色，如果每两位都是重复的话，可以简写。比如 #ff4400 可以简写成 #f40.

red	green	blue
00-ff	00-ff	00-ff

设置边框 border: border-width border-style border-color;

css 使用边框知识点画三角形

div {
  width: 0px;
  height: 0px;
  border: 100px solid black;
  border-left-color: red;
  border-top-color: green;
  border-right-color: #00f;
}

css画三角形
想让它成三角形，就给3条边设置 transparent 属性。

对齐方式设置 text-align，值： left, right,
center, 默认值是 left；
行高设置 line-height
单行文本垂直居中: 文本所占高度等于容器高度。

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 1px solid black;
}

首行缩进设置 text-indent；单位 em
1em = 1 * font-size;
text-decoration，值有 line-through, none, underline, overline
鼠标样式设置 cursor，值有 pointer, help, w-resize, copy ... ... 现用现查！！！
display属性，值有 inline, block, inline-block
注意：凡是带有inline的元素，都有文字特性，会被分隔。
1. 行级元素（内联元素 inline）
  feature: 内容决定元素所占位置；不可以通过css改变宽高
  例子： span, a, strong, em, del
2. 块级元素（block）
  feature: 独占一行；可以通过css改变宽高
  例子：p, div, ul, li, form, ol, address
3. 行级块元素（inline-block）
  feature: 内容决定大小；可以改宽高
  例子： img

/* css */
img {
  border: 0;
  width: 100px;
  height: 200px;
}

<!-- html -->
<img src="cat.jpg"><img src="cat.jpg"><img src="cat.jpg"><img src="cat.jpg">

7. 伪元素

任何一个标签在诞生的时候，它逻辑的最前面的位置和逻辑的最后面的位置就有了两个伪元素了。只是你不操作就看不到。可以通过css选择器来操作。伪元素天生是 inline行级元素。
::before 选出逻辑最前面的伪元素
::after 选出逻辑最后面的伪元素

<span>仙女萝</span>

span::before {
  content: "最美还是";
}

8. 一些用法

先定义好功能，在使用。
即先写css在写html；便于重复使用。

.red {
  background-color : red;
}
.green {
  background-color : green;
}
.blue {
  background-color : blue;
}
.size1 {
  width: 100px;
  height: 100px;
}
.size2 {
  width: 200px;
  height: 200px;
}
.size3 {
  width: 300px;
  height: 300px;
}

<div class="red size3"></div>
<div class="green size2"></div>
<div class="blue size1"></div>
<div class="blue size3"></div>

自定义标签
初始化标签。

em {
  font-style: normal;
  color: #c00;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

* { /*初始化所有标签*/
  padding: 0;
  margin: 0;
}

9. 盒子模型

margin + border + padding + content

通过盒子模型规则实现远视图

<body>
    <div class="wrapper">
        <div class="box">
            <div class="content">
                <div class="content1"></div>
            </div>
        </div>
    </div>
</body>


.content1 {
  height: 30px;
  width: 30px;
  background-color: #fff;
}

.content {
  width: 30px;
  height: 30px;
  padding: 30px;
  background-color: #0f0;
}

.box {
  width: 90px;
  height: 90px;
  background-color: #fff;
  padding: 30px;
}

.wrapper {
  width: 150px;
  height: 150px;
  background-color: #0f0;
  padding: 30px; 
}

效果如下：

远视图

10. 定位

position: absolute 绝对定位，脱离原来位置进行定位。
注意： absolute定位是相对于最近的有定位的父级进行定位。如果没有，那么相对于文档进行定位。
position: relative 相对定位，保留原来位置进行定位。
注意： relative定位是相对于自己原来的位置进行定位。
position: fixed
常用：网站广告定位

 <div>萝萝是最可爱的姑娘</div>

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  color: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

定位小练习：利用css定位完成下图。

小练习

<div class="wrapper">
    <div class="blue circle"></div>
    <div class="black circle"></div>
    <div class="red circle"></div>
    <div class="yellow circle"></div>
    <div class="green circle"></div>    
</div>

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: absolute;
  height: 170px;
  width: 380px;
  left: 50%;
  top: 50%;
  margin-left: -190px;
  margin-top: -65px;
}

.circle {
  width: 100px;
  height: 100px;
  border: 8px solid black;
  border-radius: 50%;
  position: absolute;
}

.blue {
  border-color: blue;
  top: 0;
  left: 0;
}

.black {
  top: 0;
  left: 130px;
}

.red {
  border-color: red;
  top: 0;
  left: 260px;
}

.yellow {
  border-color: yellow;
  top: 50px;
  left: 65px;
}

.green {
  border-color: green;
  top: 50px;
  left: 195px;
}

定位实现两栏布局

<div class="right"></div>
<div class="left"></div>

.right {
  position: absolute;
  right: 0;
  width: 100px;
  height:100px;
  background-color: pink;
  /* opacity: 0.5; */
}

.left {
  margin-right: 100px;
  height: 100px;
  background-color: #000;
}

11. 2个常见bug及其解决方案

1. margin塌陷

<div class="wrapper">
  <div class="content"></div>
</div>

.wrapper {
  margin-left: 100px;
  margin-top: 100px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.content {
  margin-left: 50px;
  width: 50px;
  height: 50px;
  background-color: orange;
}

这个时候如果你给 content 添加 margin-top: 50px属性，你会发现没有反应；当值大于父级的margin-top值，你会发现子方块连着父级方块一起移动了。

margin塌陷

解决方案：
改变父级的bfc ---> block format context ( 块级格式化上下文 )

bfc能改变盒子的语法规则。
触发盒子的bfc（下列条件的任意一条都能触发）

position: absolute;
display: inline-block;
float: left/ right;
overflow: hidden;

注意：选哪个根据实际情况来定。毕竟每一个都会引发别的布局或者样式的改变。

代码如下：

.wrapper {
  margin-left: 100px;
  margin-top: 100px;
  width: 100px;
  height: 100px;
  background-color: blue;
  overflow: hidden;
  /* display: inline-block; */
  /* position: absolute; */
  /* float: left/ right;*/
}

.content {
  margin-left: 50px;
  width: 50px;
  height: 50px;
  background-color: orange;
  margin-top: 50px;
}

结果如下：

解决后效果图

2. margin合并

<span class="box1">123</span>
<span class="box2">234</span>
<div class="demo1">hhh</div>
<div class="demo2">aaa</div>

.box1 {
  background-color: red;
  margin-right: 100px;
  
}

.box2 {
  background-color: green;
  margin-left: 100px;
}

.demo1 {
  background-color: orange;
  margin-bottom: 200px;
}

.demo2 {
  background-color: skyblue;
  margin-top: 100px;
}

正常情况下，可以发现 margin-left 和 margin-right 的值会累加。

margin累加及合并
但是 margin-bottom 和 margin-top 的值会合并。所以在开发中如果碰到这个问题，直接改像素吧。不推荐使用 bfc 方法。

12. 浮动

关键词 float，值： left 和 right。

浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们； 只有块级元素看不到
产生了bfc的元素和文本类属性的 ( 即带有inline属性的 ) 元素以及文本都能看到浮动元素

<div class="box"></div>
<div class="demo"></div>

.box {
  float: left;
  width: 100px;
  height: 100px;
  background-color: orange;
  opacity: 0.5;
}

.demo {
  width: 150px;
  height: 150px;
  background-color: pink;
}

效果如下：

块级元素看不到浮动元素，所以覆盖展示

因为块级元素看不到浮动元素，所以导致了以下问题：

<div class="wrapper">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
</div>

.wrapper {
  border: 1px solid black;
}

.content {
  float: left;
  color: #fff;
  background-color: orange;
  width: 100px;
  height: 100px;
}

代码效果

一个小知识点
注意：凡是设置了 position: absolute 或 float: left/right的元素，它会打内部把元素转换成 inline-block;

<div class="wrapper">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
</div>

.wrapper {
  float: left;
  border: 2px solid black;
}

.content {
  float: left;
  color: #fff;
  background-color: orange;
  width: 100px;
  height: 100px;
}

父级包裹住浮动元素

清除浮动
清除浮动，解决方法如下 ( 伪元素清除浮动 )：

<div class="wrapper">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
  <div class="content">4</div>
  <div class="content">5</div>
  <div class="content">6</div>
  <div class="content">7</div>
  <div class="content">8</div>
  <div class="content">9</div>
</div>

.wrapper {
  border: 1px solid black;
}

.wrapper::after {
  content: "";
  clear: both;  /* 如果想要 clear 生效，必须是块级元素。*/
  display: block;
}

.content {
  float: left;
  color: #fff;
  background-color: orange;
  width: 100px;
  height: 100px;
}

代码效果 (伪元素清浮动)

13. 文字溢出处理

需求：溢出容器，要打点显示

单行文本

<p> 花萝萝是世界上最可爱的女孩子，温柔善良又贴心~ </p>

p {
  width: 300px;
  height: 20px;
  line-height: 20px;
  border: 2px solid orange;
}

可以看到溢出的文本掉下去了，效果如下：

单行文本

解决方式：

让文本失去换行功能 white-space: nowrap;，使用这个属性能让溢出部分跟在后面，不换行。
溢出部分不展示 overflow: hidden;
溢出部分用点点点展示 text-overflow: ellipsis;

p {
  width: 300px;
  height: 20px;
  line-height: 20px;
  border: 2px solid orange;
  /* 溢出点点点功能 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

代码效果 (单行文本溢出点点点)

多行文本
多行文本只做截断，没错，...手动输上去。多行文本自行计算一下容器高度和行高，然后在差不多的时候输个 ...。

<p> 人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变。骊山语 ...</p>

p {
  width: 300px;
  height: 40px;
  line-height: 20px;
  border: 2px solid orange;
}

代码效果

14. 背景图片

bacnground-repeat，是否重复平铺满背景。值有no-repeat，repeat-x， repeat-y。默认值 repeat。一般情况下使用 no-repeat。

<div></div>

div {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-image: url(cat.jpg);
  background-size: 100px 100px;
  background-repeat: no-repeat; 
  background-position: left center;
}

图片代替文字: css没有的时候就展示文本，有的时候就展示图片。

方法一：

<a href="http://www.taobao.com" target="_blank">
  淘宝网
</a>

a {
  display: inline-block;
  text-decoration: none;
  color: #424242;
  width: 190px;
  heigth: 90px;
  border: 1px solid black;
  background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
  background-size: 190px 90px;

  text-indent:  190px;  /* 缩进容器的宽度 */
  white-space: nowrap;
  overflow: hidden;
}

方法二：

<a href="http://www.taobao.com" target="_blank">
  淘宝网
</a>

a {
  display: inline-block;
  text-decoration: none;
  color: #424242;
  width: 190px;
  height: 0px;
  padding-top: 90px;
  border: 1px solid black;
  background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
  background-size: 190px 90px;
  overflow: hidden; 
}

15. 两个小知识点

行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
注意：
1. p 标签中不可以嵌套块级元素
2. a 标签中不可以嵌套a标签

16. css实现如下结构

两边根据浏览器宽度自适应调整。

<div class="wrapper">
  <div class="content"></div>
</div>

.wrapper {
  height: 30px;
  background-color: #123;
}

.content {
  margin: 0 auto;
  width: 1200px;
  height: 30px;
  background-color: pink;
}

代码效果

CSS

1. 引入CSS

2. css 基础选择器

3. css 复杂选择器

4. css 优先级

5. css 权重

6. css属性

7. 伪元素

8. 一些用法

9. 盒子模型

10. 定位

11. 2个常见bug及其解决方案

12. 浮动

13. 文字溢出处理

14. 背景图片

15. 两个小知识点

16. css实现如下结构

未完待续 ...

猜你喜欢

热点阅读