CSS必知必会

CSS概念

css的使用是让网页具有统一美观的页面,css层叠样式表,简称样式表,文件后缀名.css

css的规则由两部分构成:选择器以及一条或者多条声明

选择器:通常是需要改变的HTML元素

声明:由一个属性和一个值组成,每个属性有一个值,属性和值使用类似key:value的形式(如下方h1就是选择器,color就是属性,rebeccapurple就是值,属性和值成为一条声明)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 h1{
 color: rebeccapurple;
 font-size: 10px;
 }
 </style>
</head>
<body>
 <h1>Welcome CSS</h1>
</body>
</html>

CSS的引入

行内样式:在需要改变的标签内使用style属性,让style属性包含任何css的属性

注:缺点是缺乏整体统一性,不利于维护

<h1 style="background-color: blueviolet; font-size: 20px;">Welcome CSS</h1>

内部样式,在单个文档需要的特殊样式,如上方css概念中的例子,在文档头部使用style标签增加样式

注:可以让单个页面css代码具有统一性,但多个页面容易混乱

外部样式:当样式应用于多个页面,外部样式在每个需要使用的页面通过link标签链接到样式表。link标签在文档头部

建立一个public.css文件,写外部样式

p{
 color: aquamarine;
 font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="./public.css">
</head>
<body>
 <p>产品</p>
</body>
</html>

 选择器

全局选择器:优先级最低,一般做初始化样式

*{
 color: blue;
}

用通配符 *

元素选择器:选择页面所有相同类型标签,用于描述这些类型的共性,无论这个标签藏的多深都能被选择上

HTML文档中的p、div、img等等标签

p{
 color: blue;
}

类选择器:用圆点.来定义,针对相同类的标签,类名不能用数字开头,同一个标签可以使用多个类选择器,用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .classone{
 color: red;
 font-size: 30px;
 }
 .classtwo{
 background-color: black;
 height: 100px;
 }
 </style>
</head>
<body>
 <h1 class="classone classtwo">标题</h1>
</body>
</html>

ID选择器:针对特定id标签来使用,只能使用一次,用#来定义,不能用数字开头

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 #mytext{
 color: red;
 }
 </style>
</head>
<body>
 <p id="mytext">文本</p>
</body>
</html>

合并选择器:多个标签提取共同样式,减少重复代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 #mytext,.mytitle{
 color: red;
 }
 .mytitle{
 background-color: black;
 }
 </style>
</head>
<body>
 <p id="mytext">文本</p>
 <h1 class="mytitle">标题</h1>
</body>
</html>

选择器优先级:行内样式 > ID选择器 > 类选择器 > 元素选择器

字体属性

包括颜色、大小、加粗、文字样式

颜色

<p style="color: red;">字体颜色</p>
<p style="color: #fff000;">字体颜色</p>
<p style="color: rgb(0,0,0);">字体颜色</p>
<p style="color: rgba(0, 0, 0, 1);">字体颜色</p>

大小

<p style="color: red;font-size: 30px;">字体颜色</p>

粗细

数值范围100-900,400是默认值,700等同于bold

 

<p style="font-weight: bold;">字体颜色</p>
<p style="font-weight: bolder;">字体颜色</p>
<p style="font-weight: lighter;">字体颜色</p>
<p style="font-weight: 900;">字体颜色</p>

文字样式

<p style="font-style: normal;">字体颜色</p>
<p style="font-style: italic;">字体颜色</p>
<p style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;">字体颜色</p>

背景属性

属性
background-color
背景颜色
background-image
背景图片
background-positio
图片位置
background-repeat
图片填充
background-size
图片大小
 
background-repeat
属性
repeat默认值
repeat-x水平方向平铺
repeat-y垂直方向平铺
no-repeat不平铺

background-size :可以使用数值设置宽度和高度,也可以使用百分比,最常用的是两个值cover(保持图片横纵比将图片覆盖背景最小大小),contain(保持图片横纵比将图片覆盖背景最大大小)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .box1,.box2{
 width: 600px;
 height: 600px;
 }
 .box1{
 background-image: url(./u=1175012548\,1449685026&fm=253&fmt=auto&app=138&f=JPEG.webp);
 background-repeat: no-repeat;
 background-size: cover;
 }
 .box2{
 background-color:rebeccapurple;
 background-position: left top;
 }
 </style>
</head>
<body>
 <div class="box1">背景1</div>
 <div class="box2">背景2</div>
</body>
</html>

文本属性

文本对齐方式:居中、靠左、靠右

<h1 style="text-align: center;">h1</h1>
<h2 style="text-align: left;">h2</h2>
<h3 style="text-align: right;">h3</h3>

文本添加下划线、上划线和删除线

<h1 style="text-decoration: underline;">h1</h1>
<h2 style="text-decoration: overline;">h2</h2>
<h3 style="text-decoration: line-through;">h3</h3>

文本大小写

<h1 style="text-transform: capitalize;">h1</h1>
<h2 style="text-transform: uppercase;">h2</h2>
<h3 style="text-transform: lowercase;">h3</h3>

首行文本缩进

<h1 style="text-transform: capitalize; text-indent: 100px;">h1</h1>

表格边框、颜色、边框折叠

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 table,td{
 border: 1px solid red;
 }
 table{
 border-collapse: collapse<!-- 折叠边框 -->; 
 padding: 20px;
 }
 </style>
</head>
<body>
 <table>
 <tr>
 <td>单元格</td>
 <td>单元格</td>
 <td>单元格</td>
 </tr>
 <tr>
 <td>单元格</td>
 <td>单元格</td>
 <td>单元格</td>
 </tr>
 <tr>
 <td>单元格</td>
 <td>单元格</td>
 <td>单元格</td>
 </tr>
 </table>
</body>
</html>

关系选择器

后代选择器:所有所有被A包含的B元素,用空格分开A B{ }

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 ul li{
 color: #fff000;
 }
 </style>
</head>
<body>
 <ul>
 <li>A</li>
 <li>B</li>
 </ul>
</body>
</html>

子代选择器:只对所有A标签的直接子标签B起作用,A>B{ }

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div>span{
 color: #fff000;
 }
 </style>
</head>
<body>
 <div>
 <span>A</span>
 <h1><span>B</span></h1>
 <span>C</span>
 </div>
</body>
</html>

相邻兄弟选择器:选择紧跟A标签后的B元素,选择向下相邻的第一个兄弟元素, A+B{ }

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 span+p{
 color: #fff000;
 }
 </style>
</head>
<body>
 <div>
 <span>A</span>
 <p>B</p>
 <p>C</p>
 </div>
</body>
</html>

通用兄弟选择器:选择A之后的所有兄弟元素B作用多个,A~B{ }

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 span~p{
 color: #fff000;
 }
 </style>
</head>
<body>
 <div>
 <span>A</span>
 <p>B</p>
 <p>C</p>
 </div>
</body>
</html>

盒子模型

css的盒子包括外边距(margin),边框(border),内边距(padding),实际内容(content)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div{
 width: 100px;
 height: 100px;
 background-color: yellow;
 padding: 50px 10px;
 border: 5px solid red;
 margin: 80px;
 }
 </style>
</head>
<body>
 <div>
 content
 </div>
</body>
</html>

弹性盒子模型

弹性盒子是由弹性容器和弹性子元素组成,弹性容器通过设置display属性值为flex来定义弹性容器,弹性盒子只对弹性子元素生效

通过flex-direction来设置子元素在容器中的位置(默认水平排列)row左对齐;row-reverse翻转右对齐;column纵向排列;column-reverse翻转纵向排列

子元素可以通过flex来分配空间

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .container{
 width: 500px;
 height: 500px;
 background-color: black;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .box1,.box2,.box3{
 width: 100px;
 height: 100px;
 }
 .box1{
 background-color: red;
 flex: 10%;
 }
 .box2{
 background-color: yellow;
 flex: 30%;
 }
 .box3{
 background-color: blue;
 flex: 60%;
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 </div>
</body>
</html>

浮动

增加一个浮层来放置内容

float的值值描述
left向左浮动
right向右浮动

浮动以后相当于在页面增加一个浮层来放置内容

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .box1{
 width: 100px;
 height: 100px;
 background-color: red;
 float: left;
 }
 .box2{
 width: 200px;
 height: 200px;
 background-color: yellow;
 }
 </style>
</head>
<body>
 <div class="box1"></div>
 <div class="box2"></div>
</body>
</html>

清除浮动

浮动元素会造成父元素高度塌陷,如下方例子,不设置父元素的高度,浮动就无法把父元素撑起来

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .box1{
 width: 200px;
 background-color: red;
 }
 .box2{
 width: 100px;
 height: 100px;
 background-color: yellow;
 float: left;
 }
 </style>
</head>
<body>
 <div class="box1">
 <div class="box2"></div>
 </div>
</body>
</html>

解决方案可以设置父元素的高度,也可以通过清除浮动,通过在父标签加overflow:fidden

 

.box1{
 width: 200px;
 background-color: red;
 overflow: hidden;
 clear: both;
}

除了造成父元素塌陷,同样也会影响后续元素,例子如下,我们同样无法看到box3,因为被浮动的box2遮挡

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .box1{
 width: 200px;
 background-color: red;
 overflow: hidden;
 clear: both;
 }
 .box2{
 width: 100px;
 height: 100px;
 background-color: yellow;
 float: left;
 }
 .box3{
 width: 100px;
 height: 100px;
 background-color: black;
 }
 </style>
</head>
<body>
 <div class="box1">
 <div class="box2"></div>
 <div class="box3"></div>
 </div>
</body>
</html>

解决方法就是,在需要处理的地方加上clear:both

.box3{
 width: 100px;
 height: 100px;
 background-color: black;
 clear: both;
}

定位

position的值值描述
relative相对定位
absolute绝对定位
fixed固定定位

设置后可以通过left、top、right、bottom来调整,每用一个position就会增加一个浮层:

固定定位是不会随着页面移动变动位置的,永远在固定位置

相对定位和绝对定位是根据具有定位的父元素进行定位的,如果父级没有定位就会根据页面来定位

相对定位是不脱离文档流的,绝对定位和固定定位都是脱离文档流的

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div{
 width: 100px;
 height: 100px;
 background-color: red;
 position: relative;
 left: 100px;
 top: 100px;
 }
 .box1{
 width: 100px;
 height: 100px;
 background-color: black;
 position: absolute;
 left: 100px;
 top: 300px;
 }
 </style>
</head>
<body>
 <div></div>
 <div class="box1"></div>
</body>
</html>

调整位置顺序通过z-index,如下方例子,原本是黑色遮盖红色,如果想调整为红色在上,只需要增加z-index

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div{
 width: 100px;
 height: 100px;
 background-color: red;
 position: relative;
 left: 100px;
 top: 100px;
 }
 .box1{
 width: 100px;
 height: 100px;
 background-color: black;
 position: absolute;
 left: 100px;
 top: 100px;
 }
 </style>
</head>
<body>
 <div></div>
 <div class="box1"></div>
</body>
</html>

z-index大的值在上方

div{
 width: 100px;
 height: 100px;
 background-color: red;
 position: relative;
 left: 100px;
 top: 100px;
 z-index: 2;
}
.box1{
 width: 100px;
 height: 100px;
 background-color: black;
 position: absolute;
 left: 100px;
 top: 100px;
 z-index: 1;
}

 

作者:yetangjian原文地址:https://www.cnblogs.com/yetangjian/p/17229658.html

%s 个评论

要回复文章请先登录注册