CSS
介绍
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
使用
选择器
<!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>CSS</title>
<style>
/* 选择器 */
.app {
/* 类选择器 */
padding: 0;
}
.red {
background-color: red;
}
#appdiv {
/* id选择器 */
font-size: 12px;
}
div {
/* 标签选择器 */
color: blue;
}
* {
/* 通配符选择器 给所有元素使用*/
margin: 0;
}
</style>
</head>
<body>
<div class="app red" id="appdiv">
<!-- 可以添加多个类 -->
<p></p>
</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>
/* 后代选择器 */
div p {
width: 20px;
}
span p {
width: 10px;
}
/* 子选择器 必须为"亲儿"子标签 */
div > p {
background-color: red;
}
/* 并集选择器 可以选择多个标签 */
div, p {
color: royalblue;
}
/* 伪类选择器 用于添加特殊的效果*/
/* 链接伪类选择器 */
a:link {
/* 选择所有违背访问的链接 */
}
a:visited {
/* 选择已被访问的链接 */
}
a:hover {
/* 鼠标位于其上的指针 */
}
a:active {
/* 鼠标按下未弹起的链接 */
}
/* focus 选取获得焦点的表单元素*/
input:focus {
/* 焦点即光标 */
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<span>
<p></p>
</span>
</body>
</html>
字体属性
<style>
div {
/* 定义字体 */
font-family: 'Courier New', Courier, monospace;
/* 字体大小 */
font-size: 12px;
/* 字体粗细 */
font-weight: bold;
/* 字体样式 */
font-style: normal;
/* 复合属性写法 必须保留font-size font-family*/
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px/20px "Microsoft yahei";
}
</style>
文本属性
<style>
div {
/* 文本颜色 */
color: red;
/* 文本对齐 left 默认 right center*/
text-align: center;
/* 文本装饰 天加下划线 上划线 删除线等 none underline overline line-through*/
text-decoration: red;
/* 文本缩进 段落的首行缩进*/
text-indent: 0%;
/* 行间距 */
line-height: 10px;
}
</style>
引入
<!-- 行内 -->
<p style="width: 10px;"></p>
<!-- 外部样式 -->
<link rel="stylesheet" href="./style.css">
行内元素 块元素 行内块元素
<!-- 块元素 独占一行-->
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
<p></p>
<div></div>
<ul></ul>
<ol></ol>
<li></li>
<!-- 行内元素 一行可以多个 不能直接设置高度宽度-->
<a href=""></a>
<strong></strong>
<b></b>
<em></em>
<i></i>
<del></del>
<s></s>
<ins></ins>
<u></u>
<span></span>
<!-- 行内块元素 -->
<img src="" alt="">
<input type="text">
<td></td>
display属性
元素类型转换 none隐藏元素
背景
<style>
div {
/* 背景颜色 一般情况下默认透明 transparent*/
background-color: red;
/* 背景图片 none / url() */
background-image: url();
/* 背景平铺 默认情况下平铺 repeat no-repeat repeat-x repeat-y */
background-repeat: repeat;
/* 背景位置 图片在背景中的位置 精确位置background-position: x y;*/
background-position: top;
/* 背景固定 视差滚动 fixed scroll*/
background-attachment: fixed;
/* 复合写法 background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;*/
background: black url() no-repeat fixed center top;
}
</style>
盒子模型
<style>
div {
width: 100px;
height: 100px;
border-width: 8px;
border-style: solid;
border-color: springgreen;
border: 1px solid black;
margin: 1px;
padding: 1px;
/* 盒子阴影 box-shadow: h-shadow必须 阴影位置 v-shadow必须 阴影位置 blur可选 模糊距离 spread可选 阴影尺寸 color可选 阴影颜色 inset可选 外部阴影改为内部;*/
box-shadow: 10px 10px 10px 10px black;
/* 文字阴影 text-shadow: h-shadow v-shadow blur color*/
}
</style>
浮动
<style>
div {
/* 浮动元素具有行内块特性 */
float: left;
/* 清除浮动 1.父级添加overflow 2.父级添加after伪元素 3.父级添加双伪元素*/
}
</style>
定位
static 静态定位 absolute 绝对定位 relative 相对定位 fixed 固定定位 sticky 粘性定位
visibility
visible 元素可见 hidden元素隐藏 但继续占有原来的位置
overflow
溢出显示和隐藏
小三角
<!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>
#box {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: red;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
鼠标样式
cursor:
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
综合
取消表单轮廓
outline: none;
防止拖拽文本域
resize: none;
设置图片或表单内元素和文本内容垂直对齐
vertical-align: baseling 默认 top 顶部 middle 中间 bottom 下端
单行文字溢出省略表示
1.先强制一行内显示文本
2.超出部分隐藏
3.文字用省略号代替超出的部分
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文本溢出省略
overflow: hidden;
text-overflow: ellipsis;
1.弹性伸缩盒子模型显示
display: -webkit-box;
2.限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
3.设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;