CSS
CSS
一、CSS概述
CSS全称层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
层叠：
多个样式可以作用在同一个html的元素上
样式表：
提供了丰富的样式修饰内容
作用：
① 样式丰富，功能强大 ② 内容和样式分离(解耦)
二、CSS与HTML结合方式
CSS有三种引入方式：
1.行内样式
在标签内使用style属性指定css代码。该方式定义样式作用于为整个页面。
优缺点: 由于复用性不好，实际在写页面时不提倡使用，在测试的时候可以使用。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式</title>
</head>
<body>
<!-- 行内样式
属性 style 编写css代码
文本颜色 color
字体大小 font-size:30px
-->
<p style="color: brown; font-size: 30px; ">星辰大海</p>
<p>星辰大海</p>
</body>
</html>
2.内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码。
优缺点: 由于样式与结构未全部分离, 如果只控制当前页面的标签样式的话使用内部样式, 复用性不好。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式</title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>
星辰大海
</p>
<p>老人与海</p>
</body>
</html>
3.外部样式
定义css文件，在head标签中使用link标签，引入外部的资源文件。
该方式定义样式可以作用于其他页面。
语法格式：
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
优缺点: 重用性较强, 一个css样式文件可以控制多个页面。
代码
外部css default.css
p{
color: pink;
font-size: 20px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/default.css">
</head>
<body>
<p>
星辰大海
</p>
<p>老人与海</p>
</body>
</html>
复用性：
外部样式>内部样式>行内样式
优先级问题:
行内样式 > 内部样式 & 外部样式(后加载的先生效)
三、CSS语法格式
无论使用HTML还是CSS都需要遵从一定的规范。
css定义规则如下：
选择器{
属性1:属性值;
属性2:属性值;
属性3:属性值;
...
}
或者：
选择器{属性1:属性值;属性2:属性值;属性3:属性值;... }
其中:
选择器：指css样式作用的HTML对象。
{}：限定范围，指当前花括号内的所有样式都属于当前选择器。
注意事项：
选择器严格区分大小写，属性和属性值不区分大小写。
属性和属性值推荐都是小写
四、CSS选择器
想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。
筛选具有某一特征的元素
（一）基本选择器
基本选择器是我们使用频率最高的选择器。
基本选择器:
标签选择器 ID选择器 类选择器
1、标签选择器
HTML标签指HTML的标记名称、如div、html、body、input等。所有符合HTML规范的标记都可以作为标签选择器。
写法格式:
标签名{
样式一;
样式二;
....
}
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
p{
color: red;
}
h3{
font-size: 60px;
}
</style>
</head>
<body>
<p>mysql</p>
<h3>sqlserver</h3>
<a>html</a>
</body>
</html>
2、ID选择器
ID选择器用来匹配id值，因此html中元素赋予id属性。这个属性的值应该保证是唯一的。
ID选择器CSS中用“#”开头定义，后面跟随ID名称。 例如：#name
ID为当前HTML元素的ID属性值。
写法格式:
#id名称{
样式一;
样式二;
....
}
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
#p1{
color: greenyellow;
}
/* p{
color: greenyellow;
} */
</style>
</head>
<body>
<p id="p1">helloworld</p>
<p>您好世界</p>
</body>
</html>
3、类选择器
把某一些具有相同特征的html元素归为一类。可以通过类选择器找到这一类元素
在css中类选择器使用“.”符号开头定义，后面跟随类名。例如：.name
类名即是HTML中class属性的值，大多数HTML元素都可以定义class属性。
写法格式:
.类名{
样式一;
样式二;
...
}
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.today{
color: hotpink;
}
</style>
</head>
<body>
<p>helloworld</p>
<p>您好世界</p>
<p class="today">今天是星期一</p>
<p class="today">今天天气很好</p>
</body>
</html>
总结：
标签选择器： html规范的标记定义 p、table、h 等等
p{
}
id选择器： 元素赋予id属性，属性值尽可能保证唯一 <p id="p1">111</p>
#p1{
color:red;
}
类选择器: 元素赋予class属性. <p class="rrr"></p><p class="rrr"></p>
.rrr{
color:red;
}
（二）其它选择器
其它常见的选择器有:
1.全局选择器
2.伪类选择器
1、全局选择器
全局选择器又称通用选择器，将匹配任何标签, 使用来表示。 *
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选选择器</title>
<!-- 全局选择器一般用于 取消标签的自带样式
比如 p、h、ul 这一类标签 边距等等
-->
<style>
*{
color: red;
}
</style>
</head>
<body>
<p>helloworld</p>
<p>您好世界</p>
<p>今天是星期一</p>
<p>今天天气很好</p>
<h3>哈喽</h3>
<a href="#">点击试试</a>
</body>
</html>
2、伪类选择器
伪类选择器主要有:
a:link{} 未被访问时
a:visited{} 访问过后
a:hover{} 鼠标悬浮时
a:active{} 鼠标激活时(鼠标左键按住超链接，不放开)
使用场景： 各大电商 超链接
需要掌握的是 link、hover
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接伪类样式</title>
<style>
a:link{
color: lightblue;
}
a:visited{
color: red;
}
a:hover{
color: gold;
}
a:active{
color: pink;
}
p:hover{
font-size: 60px;
}
</style>
</head>
<body>
<a href="http://www.jd.com2">京东2</a>
<a href="http://www.jd.com">京东</a>
<p>碰到会变大</p>
</body>
</html>
五、CSS常见样式
（一）尺寸修饰
| 属性名 | 属性说明 |
|---|---|
| height | 设置元素的高度 |
| width | 设置元素的宽度 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>尺寸样式</title>
<style>
p{
width: 385px;
}
</style>
</head>
<body>
<p>
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
</p>
</body>
</html>
（二）字体样式
| 属性名 | 属性说明 |
|---|---|
| font-size | 字体大小,比标签font调整更细致，精确到像素 |
| font-style | 字体风格(取值：italic/normal...):italic : 斜体。normal : 默认值。正常的字体 |
| font-family | 字体类型(取值：隶书/微软雅黑...) |
| font-weight | 字体粗细取值:Normal 默认值。bold 粗体字符 bolder 更粗的字符 lighter 定义更细的字符 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体样式</title>
<style>
p{
/*字体大小*/
font-size: 30px ;
/*字体风格 字体是否倾斜 */
font-style:italic;
/*字体粗细 是否加粗 */
font-weight: bold;
/*字体系列*/
font-family:黑体
}
</style>
</head>
<body>
<p>野比大雄</p>
</body>
</html>
（三）文本样式
| 属性名 | 属性说明 |
|---|---|
| color | 文本颜色（取值：colorname或#0000FF） |
| text-align | 文本水平方向对齐（取值：left/right/center...） |
| text-decoration | 文本装饰，取值:none默认。underline下划线。 overline上划线。line-through删除线 |
| line-height | 设置行高。 （妙用：通过行高设置垂直文本居中）。当元素的高度和行高一致，元素内的文本自动居中 |
| text-shadow | 文本的阴影 四个参数 h-shadow v-shadow blur color; 第一个参数 x轴偏移量 第二个参数y轴偏移量 第三个参数 阴影范围，第四个参数阴影的颜色 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本样式</title>
<style>
p{
/*文本颜色*/
color: black;
/*水平对齐方向*/
text-align: center;
/*元素宽度*/
width: 200px;
/*文本装饰
text-decoration: line-through;
*/
/*元素高度*/
height: 100px;
border:1px solid red;
/*当元素的行高和元素的高度相等时，自动垂直方向居中*/
line-height: 100px;
/*文本阴影*/
text-shadow: 0px 0px 3px red;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
</style>
</head>
<body>
<p>极乐净土</p>
<a href="">手机数码</a>
</body>
</html>
（四）边框样式
| 属性名 | 属性说明 |
|---|---|
| border-width | 边框宽度按方向设置：border-(left/right/top/bottom)-width |
| border-color | 边框颜色按方向设置：border-(left/right/top/bottom)-color |
| border-style | 边框风格按方向设置：border-(left/right/top/bottom)-style |
可以简写：
border:1px solid red; 表示四个方向的宽度都是1px，都是实线，都是红色。
设置圆角边框
| 属性名 | 属性说明 |
|---|---|
| border-radius | 圆角边框按方向设置值：border-radius |
该属性取值单位可以是像素，也可以是百分比，如果整体设置值，最多可以给四个值，按照左上，右上，右下，左下的顺序给值。
一个值：四个角有相同的边界半径；
两个值：第一个值表示左上角和右下角，第二个值表示右上角和左下角；
三个值：第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角；
四个值：左上，右上，右下，左下。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框样式</title>
<style>
p{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
/*border-top-color: red; 上边框的边框线颜色*/
/* border-top-width: 1px; 上边框的边框线粗细*/
/* border-top-style: solid; 上边框的边框线类型 细实线*/
/* border-bottom: 1px double blue ;
border-left: 3px dotted gold ;
border-right: 5px dashed orange; */
border: 1px solid red; /*四条边框线都是一样的效果*/
/* border-radius: 10px 20px 30px 40px; */
border-radius: 5%;
}
</style>
</head>
<body>
<p>
牛
</p>
</body>
</html>
（五）背景样式
| 属性名 | 属性说明 |
|---|---|
| background-color: yellow; | 背景颜色 |
| background-image: url(img/1.jpeg); | 背景图片 |
| background-repeat | 背景是否平铺取值:repeat-x : 水平方向平铺repeat-y : 垂直方向平铺repeat : 水平和垂直方向同时平铺no - repeat : 不平铺 |
| background-position: center; | 背景偏移 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景样式</title>
<style>
p{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
border: 1px solid red;
border-radius: 50%;
/*背景颜色*/
background-color: gold;
/*背景图片*/
background-image: url(./img/htl.gif);
/*背景设置不平铺*/
background-repeat:no-repeat;
/*背景偏移*/
/* background-position-x: 50px;
background-position-y: 50px; */
background-position: 50% center;
}
</style>
</head>
<body>
<p>
牛
</p>
</body>
</html>
练习
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习1</title>
<style>
div{
width: 320px;
}
.first{
height: 40px;
background-color: rgb(15,124,191);
color: white;
font-weight: bold;
font-size: 20px;
line-height: 40px;
/*首行缩进*/
text-indent: 16px;
}
.second{
height: 30px;
background-color: rgb(228,241,250);
text-align: center;
line-height: 30px;
color: rgb(40,129,208);
}
.third{
height: 50px;
text-align: center;
}
#big{
border: 1px solid gray;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- 标题标签自带功能 加粗、字体放大、换行、边距 -->
<!-- p标签 换行、边距-->
<!-- div 自动换行-->
<div id="big">
<div class="first">家用电器</div>
<div class="second">生活电器</div>
<div class="third">
<a href="">电风扇</a> 净化器 吸尘器 <br>
净水设备 挂烫机 电话机
</div>
<div class="second">厨房电器</div>
<div class="third">
电风扇 净化器 吸尘器<br>
净水设备 挂烫机 电话机
</div>
</div>
</body>
</html>
（六）盒子模型
什么是盒子模型:
CSS 的框模型 (Box Model) 规定了元素框 处理元素内容、内边距、边框 和 外边距 的方式。
平时我们所说的宽度和高度仅仅指的是内容的宽和高，而盒子的实际宽高通过下面的公式计算。
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
属性解析:
内边距 padding:也叫填充（padding），设置元素内容与元素边框之间的距离。
填充的属性有四个取值：padding-(top/bottom/left/right) padding
一个值：padding:20px; 表示四个方向都是20px
两个值：padding:20px 30px ; 表示上下是20，左右是30
三个值：padding:10px 20px 30px;表示上10px，右20px，下30px，左同右20px
四个值：padding:10px 20px 30px 40px; 上右下左
外边距 margin：也叫空白边（margin），位于盒子的最外围，设置不同元素之间, 它们边框与边框之间的距离。
空白边的属性有五种:margin-(top/bottom/left/right) margin
其赋值方式同padding
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型-练习</title>
<style>
#left{
background-color: hotpink;
height: 100px;
width:300px ;
}
#right{
background-color: gold;
height: 100px;
}
#center{
background-color: blue;
height: 400px;
margin-top: 10px;
margin-bottom: 10px;
}
#footer{
background-color: yellowgreen;
height: 100px;
}
</style>
</head>
<body>
<div id="right">
<div id="left">左上</div>
</div>
<div id="center">中间</div>
<div id="footer">尾部</div>
</body>
</html>
（七）浮动样式
HTML有些标签默认从左到右排列，如input。有些则默认从上到下排列，如div。
如果将这些默认从上到下的标签改变排列规则，按照从左到右的顺序排列，就需要用到浮动属性。float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动属性的取值有三个：left：元素左浮动 right：元素右浮动 none：默认值，不浮动
元素设置浮动后就会脱离标准文档流，所以会对页面中其他未设置浮动的元素排版产生影响，我们还可以使用clear属性清除浮动。
属性解析:
float:float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动属性的取值有三个：
left：元素左浮动
right：元素右浮动
none：默认值，不浮动
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
#red{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#blue{
width: 100px;
height: 20px;
background-color: blue;
float: left;
}
#green{
width: 100px;
height: 40px;
background-color: green;
float: right;
}
#clear{
clear: both;
}
</style>
</head>
<body>
<!-- 从上到下排列的标签有哪些 div p h1-h6 li ul ol 等等 -->
<!-- 从左往右排列的标签 a input img span 等等-->
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="clear"></div>
<p>
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所
</p>
</body>
</html>
浮动练习
代码：
<!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>
#box{
width: 260px;
height: 250px;
border: 1px solid red;
}
.yuan{
width: 100px;
height: 100px;
border: 1px solid blue;
border-radius: 50%;
float:left;
margin: 10px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div class="yuan">左上</div>
<div class="yuan">右上</div>
<div class="yuan">左下</div>
<div class="yuan">右下</div>
</div>
</body>
</html>
（八）定位样式
1.relative 相对定位
相对元素原来的位置定位,定位完成后可以去偏移(移动),不会脱离标准文档流,不影响后续元素正常排版。
会留白
2.absolute 绝对定位
绝对定位后，脱离文档流,位置移动看父标签中有没有定位，如果有定位则相对父标签偏移，如果父标签没有定位，相对<body>标签偏移.绝对定位会影响后续元素排版
3.固定定位
4.默认定位
相对定位
绝对定位:
绝对定位:
（九）列表修饰
HTML有丰富的标签，这些标签被定义成不同的类型，一般被分为块标签、行标签和行块标签。
块标签：以区域块方式出现。每个块标签独自占一整行或者多行，且可设置宽高。
常见的块级元素：<div> 、<h> 、<ul>、<p>、<li>等
行标签：按行排列。无法设置宽高
常见的行标签：<span> 、 <strong> 、<a>等
行块标签：按行排列，但又可以设置宽高的标签。
常见的行块标签：<img>、<input>、<textarea>等
在实际开发中，如果希望这些标签之间可以相互转换，需要用到display属性
属性解析:
display:用于定义建立布局时元素生成的显示框类型.
其取值如下:
inline：此元素将显示为行元素（行内元素display的默认值）
block：此元素指定为块元素（块元素display的默认值）
inline-block:将对象呈现为内联元素(行块元素)，对象内的元素块级展示。
none：隐藏元素
列表标签默认是带有项目符号的，如果不需要显示项目符号可以将列表样式中的list-style-type属性设置为none值去除，下面结合display属性和列表样式属性实现一个横向导航的效果。
总结:
改变布局的样式: float（浮动）、定位（相对定位、绝对定位）、display(转换样式)
比较常用的样式:
字体颜色 color
字体大小 font-size
字体粗细 font-weight
水平居中 text-align:center
行高 line-height
高度 height
宽度 width
去除下划线 text-decoration:none
边框 border
倒圆角 border-radius
背景颜色 background-color
hover伪类样式 a:hover
首行缩进 text-indent
外边距 margin
内边距 padding
浮动 float
定位 position:relative postion:absolute
转换样式 display（ inline、block、inline-block、none）
清除列表序号 list-style:none
