一、CSS简介
1、什么是CSS
-
CSS：Cascading Style Sheet 层叠样式表
-
是一组样式设置的规则，用于控制页面的外观样式
2、为什么使用CSS
- 实现内容与样式的分离，便于团队开发
- 样式复用，便于网站的后期维护
- 页面的精确控制，让页面更精美
3、CSS作用
- 页面外观美化
- 布局和定位
二、基本用法
1、CSS语法
<head>
<style>
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
</head>
- 选择器：要修饰的对象（东西）
- 属性名：修饰对象的哪一个属性（样式）
- 属性值：样式的取值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
background: #cccccc;
}
h2{
color:blue;
}
</style>
</head>
<body>
</body>
</html>
2.CSS使用方法
- 直接写在标签
- 写在style 标签内
- 使用外部 .css 文件
示例：
<!--直接写在标签内-->
<p style=" color: aqua;">样式1，在标签内:你虽然没有出过国，但是你每天都在倒时差啊。</p>
<!------------------------------------------------------------------------------------------->
<!--写在style标签内-->
<style type="text/css">
div{
background: yellowgreen;
width: 300px;
}
</style>
<p>样式2，在sty1e中:人的想法是会变的。以前我也是想致富的，现在只想脱贫。</p>
<!------------------------------------------------------------------------------------------->
<!--使用外部.css 文件-->
<link rel=" stylesheet" type= "text/css" href="css/01css_ test.css"/>
div {
color: red;
}
<p>样式3，在css文件中:别跟我说晚饭后需要节食，如果夜里不能吃东西，那冰箱为什么会有灯。</p>
<!-----------------------------------------------------------------------------=-------------->
三、选择器
1.选择器简介
选择器的作用：给指定的元素设置样式，能够更加精准。
选择器权重：选择器也有权重差别，当出现冲突样式的时候，选择权重大的样式。
选择器种类：有标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、复杂选择器、伪类选择器…
2.基础选择器
1 默认标签选择器
2. id选择器
3. class选择器
4.通配符选择器
/* 默认标签选择器-作用 于后面所有的div标签*/
div{
background: yellowgreen;
width: 300px;
/* id选择器-作用于某个id,给标签添加一个id属性*/
#div1 {
background: orange;
width: 200px;
}
/* class选择器-作用于多个class标签，可以给多个标签添加c1ass属性*/
.wrap {
background: azure;
height: 150px;
/* *是通配符选择器，作用于页面上的所有选择器*/
.wrap{
margin: 0;
padding: 0;
}
3.复杂选择器
| 选择器 | 作用 | |
|---|---|---|
| 1 | 群组选择器 | 同时对多个选择器进行样式设置，每个选择器之间用逗号分隔 |
| 2 | 兄弟选择器 | div后面的兄弟都会选中，~两边的空格可写可不写 |
| 3 | 相邻选择器 | 只会选择相邻的标签，这个+号可以也可以写多个 |
| 4 | 后代选择器 | 作用于所有满足的后代.上面中间是空格这个是使用最多的选择器 |
| 5 | 子代选择器 | 只会作用于子代，不会作用于孙子辈 |
| 6 | 属性选择器 | / |
/*群组选择器-同时对多个选择器进行样式设置，每个选择器之间用逗号分隔*/
div,P {
background: ye1l owgreen ;
width: 300px;
}
/*兄弟选择器-div后面的兄弟都会选中，~两边的空格可写可不写*/
div~ul {
background: skyblue;
}
/*相邻选择器-只会选择相邻的标签，这个+号可以也可以写多个*/
div+ul {
background; 8kyblue;
}
/*后代选择器-作用于所有满足的后代.上面中间是空格 这个是使用最多的选择器*/
div ol{
list-style; none ;
}
/*子代选择器-只会作用于子代，不会作用于孙子辈*/
div>ol {
list-style: none;
}
/*属性选择器*/
input [ type-checkbox ] {
width: 10px;
height: 10px;
}
4.伪类选择器
作用：通过伪类选择器，可以实现划入的时候再显示
根据不同的状态显示不同的样式，一般多用于 标签
四种状态：
- :link 未访问的链接
- :visited 已访问的链接
- :hover 鼠标悬浮到连接上，即移动在连接上
- :active 选定的链接，被激活
注：默认超链接为：蓝色、下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*a:link{
font-size: 12px;
color:black;
text-decoration: none;
}
a:visited{
font-size: 15px;
color:;
}
a:hover{
font-size: 20px;
color:blue;
}
a:active{
font-size: 40px;
color:green;
}*/
a:link,a:visited{
color:#666666;
font-size: 13px;
text-decoration: none;
}
a:hover,a:active{
color:#ff7300;
text-decoration: underline;
}
/*普通的标签也可以使用伪类选择器*/
p:hover{
color:red;
}
p:active{
color:blue;
}
</style>
</head>
<body>
<a href="复杂选择器.html">复杂选择器.html</a>
<p>CSS从入门到精通！</p>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「是叽叽呀」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43331963/article/details/106784229
5.选择器的优先级
- 选择器优先级概括如下：
在id > class > 标签
-
复杂选择器的优先级比较如下：
1.先比 id（最高位），再比 class，最后比 tagName （标签个数）
2.id 个数不等，id越多，优先级越高
3.id相同，class越多，优先级越高
4.id，class都相同，则标签越多，优先级越高
四、常用属性
1.字体属性
| 属性 | 含义 | 说明 |
|---|---|---|
| font-family | 字体 | 字体浏览器；要求系统中要安装指定的字体，一般建议写3种字体：首选、其次、备用。以逗号隔开。 |
| font-size | 字体大小 | 1. inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited；2.px像素 pixel；3.%百分比，相对父标签字体大小的百分比；4.em倍数，相对于父标签字体大小的倍数 |
| font-style | 字体样式 | 取值：normal普通/italic斜体 |
| font-weight | 字体粗细 | 取值：normal普通（默认）/bold粗体/ 自定义400 normal 700 bold |
| font-variant | 大小写 | / |
| font | 复合样式 | 使用单个类型，比较麻烦，因此可以使用复合类型，便于书写。注意：复合类型一定要严格按照样式来书写 |
font简写属性：font:font-style|font-weight|font-size|font-family
2.文本属性
| 属性 | 含义 | 说明 |
|---|---|---|
| color | 颜色 | |
| line-height | 行高 | 行之间的高度 |
| text-align | 水平对齐方式 | 取值：left、center、right |
| vertical-align | 垂直对齐方式 | 取值：top、middle、bottom可以用于图片和文字的对齐方式 |
| text-indent | 首行缩进 | |
| text-decoration | 文本修饰 | 取值：underline、overline、line-through |
| text-transform | 字母大小写转换 | 取值：lowercase、uppercase、capitalize首字母大写 |
| letter-spacing | 字符间距 | |
| word-spacing | 单词间距 | 只对英文有效 |
| white-space | 空白的处理方式 | 文本超出后是否换行，取值：nowrap |
3.背景属性
| 属性 | 含义 | 说明 |
|---|---|---|
| background-color | 背景颜色 | 取值：transparent 透明 |
| background-image | 背景图片 | 必须使用url()方式指定图片的路径；如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件 |
| background-repeat | 背景图片的重复方式 | 取值：repeat(默认)，repeat-x，repeat-y,no-repeat |
| background-position | 背景图片的显示位置 | 默认背景图显示在左上角；取值：关键字：top、bottom、left、right、center；坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向 |
| background-attachment | 背景图片是否跟随滚动 | 取值：scroll(默认)、fixed固定不动 |
| background | 简写 | 简写以空格隔开，书写顺序没有要求 |
4.列表属性
| 属性 | 含义 | 说明 |
|---|---|---|
| list-style-type | 设置列表前的标记 | 取值：none、disc、circle、square、decimal；此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了 |
| list-style-image | 将图像作为列表前的标记 | |
| list-style-position | 设置标记的位置 | 取值：outside(默认)、inside |
| list-style | 简写 |
5.表格属性
border-collapse:表格中相邻的边框是否合并（折叠）为单一边框
取值：separated（默认） collapse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:500px;
border:1px solid blue;
border-collapse:collapse;
}
td{
border:1px solid blue;
}
</style>
</head>
<body>
<!-- table>(tr>td{td$}*5)*4 -->
<table cellspacing="0px"cellpadding="0px">
<tr>
<td>bbb</td>
<td>aaa</td>
<td>aaa</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>bbb</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</table>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「是叽叽呀」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43331963/article/details/106784229
五、盒子模型
简介
盒子模型(Box Model)：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
盒子模型包含内容：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
。
各部分解释：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
1.边框样式(border)
表示盒子的边框分为四个方向：
- 上top、右right、下bottom、左left
- border-top、border-right、border-bottom、border-left
每个边框包含三种样式：
- border-top-color、border-top-width、border-top-style
- border-right-color、border-right-width、border-right-style
- border-bottom-color、border-bottom-width、border-bottom-style
- border-left-color、border-left-width、border-left-style
样式style的取值：
- solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线
.rap{
widtht 3O0Px:
height: 300px;
background: deepskyblue;
border: 10px 801 id red;
border-w1dth: 3px 5px 10px 1 5px:
border-color:yellow blueviolet ;
border-style:soild dotted daahed double;
/*boder :边框类型颜色
border--width style color 复合样式
border- width边框大小
border-alyle so11d实线dashed虚线dolLed点线double双边框
border-color颜色
一个值的时候:代表四个方向值一样顺序为:，上右下左(顺时针方向)
二个值的时候:上下右左
三个值的时候:上 右左、下
四个值的时候:上右、下左
border-top- width:上 边框大小
border-right-width:右边框大小
border- bottom- width: 下边桩大小
border-left- width:左边柜大小
border-style 边框样式
border-top-style顶部边框样式
border- right-sty1e:右边框样式
border-bottom-style:底部边框样式
border- left-style:左边框样式
border: 10px double eadd1 ebrown;
border-tops 10px coubie salmon ;
border-rights : 10px double salmon；
border-bottom: 10px doub1e salmon;
border-left : 10px double salmon; */
}
<div class=" rap">生活不能给你的甜，或许我可以。</div>
2.内边距样式（padding）
表示盒子的内边距，即内容与边框之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准
.rap{
width: 300px;
height: 300px;
background: deepskyblue ;
/* padding内边距:边框与 内容之间的距离
一个值的时候:代表四个方向一样，上右 下左
两个值的时候:上下右左
三个值的时候:上右左下
四个值的时候:上右下左
*/
padding: 50px;
padding-top: 100px;
}
<div class=" rap">生活不能给你的甜，或许我可以。</div>
3.外边距样式（margin）
表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
*{
/*在实际中最好都加上这个，去掉其本身的边距*/
margin: 0 ，
padding= 0 i
}
.rap{
width: 300px;
height: 300px;
background: deepskyblue;
margin: 100px;
overflow: hidden ;
/*margin: auto; */ /*左右居中没有上下居中*/
/* margin-left: auto; */ /*左居中*/
/* margin-right: auto: */ /*右居中中*/
/*margin外边距元素与其他元泰的距离(边框 以外的距离)
一个值的时候:四个方向值一样，上 右下左(顺时针)
两个值的时候:上下右左
三个值的时候:上右左下
四个值的时候:上右左“下
auto快速左右居中
垂直方向: margin-bottom, margin-top 取两者之间的较大值
水平方向: margin-left. margin- right取两者的和
overflow: hidden; 解决内边距重叠问题。 超出隐藏，清除浮动
*/
. ov{
width: 1 00px;
height: 1 00px;
background: #FF0000;
margin: 100px ;
}
4.其他
页面中的元素实际所占的空间
- 宽度=width+左右padding+左右border+左右margin
- 高度=height+上下padding+上下border+上下margin
盒子属性默认值
不同标签的盒子属性默认值可能不同，需要自己设置
六、CSS浮动
1.简介
文档流
像水流，流动的是水，电磁流流动的是电磁。文档流流动的就是元素！
可以将屏幕中显示的内容都可以一一对应为文档中的一个元素.
CSS浮动
浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。
CSS浮动优缺点
- 优点：使元素脱离文档流，按照指定的(左右)方向移动，遇到父级边界或者相邻元素停下来。
- 缺点：浮动会带来高度塌陷的问题。
2.浮动的实现
.rap{
width:100px;
height: 100px;
background: aquamarine;
float: left; /* float设置浮动， left为左浮动*/
}
.rap1 {
width: 200px;
height: 200px;
background: blueviolet;
}
<div class="rap" >生活不能给你的甜，或许我可以。</div>
<div class="rap1">生活不能给你的甜， 或许我可以。</div>
上面的盒子还是会显示，但是没有在页面占据位置
3.浮动的清除
清除浮动的方式：
- 给父级增加高度（不推荐使用）
- 给父级加 overflow：hidden
- 添加一个空div
- 给父级加一个类：
.clearfix::after{
content: “”;
display: block;
clear: both;
}
.clearfix: :after{
content :””;
display: block;
clear: both;
}
ul{
width: 4 00px;
/* height: 50px; */
border: 2px solid darkgoldenrod;
/* overflow: hidden; */
}
li{
list-style: none;
width: 60px;
height: 50px;
background: chartreuse;
float: right ;
}
<!--uL> li{li$}*5 -- >
<ul class="clearf ix">
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
<div class=" rap1">生活不能给你的甜，或许我可以。</div>
4.浮动的应用
浮动的特点：
- 脱离文档流
- 按照指定的(左右)方向移动，遇到父级边界或者相邻元素停下来
- 浮动会导致高度坍塌
- 浮动元素不占空间
li{
list-style:none ;
width:60px;
height: 50px;
backg round: chartreuse;
float: right;
/*小圆圈*/
margin: 5px;
line-height: 50px;
text-align:
center;
/*处理角度*/
border-radius: 50% ;
}
七、CSS定位
1.简介
定位就是将元素定在网页中的任意位置。
| 取值 | 含义 | 作用 |
|---|---|---|
| static | 静态定位(没有定位) | 默认 |
| fixed | 固定定位 | 相对于浏览器窗口进行定位方形词； left 、right、 top、 bottom |
| relative | 相对定位 | 相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置 |
| absolute | 绝对定位 | 没有占据位置，使元素完全脱离文档流； 没有定位父级，则相对整个文档发生偏移； 参考最近非static定位的父级进行定位 |
设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right
2.相对定位（relative）
先设置元素的position属性为relative,然后再设置偏移量
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
.rap{
width: 200px;
height: 200px;
background: chocolate;
/* relative 相对定位*/
position: relative;
left: 50px; */ /*只有定位之后才有整个属性，否则没有*/
top: 300px; */
margin: auto;
margin: 50px;
}
.rap1 {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="rap">生活不能给你的甜，或许我可以。</div>
<div class="rap1">生活不能给你的甜，或许我可以。</div>
</div>
</body>
</html>
相对定位还是会占据原来的位置
3.绝对定位（absolute）
绝对定位类似于浮动，不会占据原来的位置
绝对定位，如果没有父级的话，是相对于整个文档定位，这里的父级定位和父级是两个概念。
如果有多个父级定位，会使用最近的那个定位
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.rap{
width: 200px;
height: 200px;
background: chocolate;
/* relative 相对定位*/
position: absolute;
left: 100px; /*只有定位之后才有整个属性，否则没有*/
/*top: 300px; *!*/
/*margin: auto;*/
/*margin: 50px;*/
}
.rap1 {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
绝对定位类似于浮动，不会占据原来的位置
4.固定定位(fixed)
先设置元素的position属性为fixed，然后再设置偏移量
设置元素为固定定位后，元素会浮动在面面上方
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
.fixed{
width: 399px;
height: 999999999999px;
background: chocolate;
position: fixed;
bottomf: 0;
right: 0;
}
</style>
</head>
<body>
<div style="width:99px;height:10000000px;">
<div class="fixed">生活不能给你的甜，或许我可以。</div>
</div>
</body>
</html>
相对于浏览器窗口进行定位方形词
5.层级（z-index）
设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序
取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)
注意：只能给非static定位的元素设置z-index属性
当多个窗口在一起的时候会有覆盖，那么到底该显示那个，可以通过层级来控制，z-index 默认都是0，可以通过这个来控制优先级
八、重置样式（ResetCSS）
- 浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致；
- 公司里会根据每个公司的业务不同，会自己写一套属于自己公司的RESETCSS；
- 我们可以使用别人提供的 ResetCSS 来去掉浏览器的样式，重新开始写自己的样式。
参考ResetCSS：https://meyerweb.com/eric/tools/css/reset/
扫一扫
3278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
