date: 2021-07-29
tags:
- 前端
- CSS
categories: 前端
文章目录
层叠样式表：给HTML标签添加样式，让其变得更好看
语法结构
选择器{
属性1:值1;
属性2:值2;
属性3:值3;
}
三种引入方法
<body>
<h1>你好</h1>
</body>
- style标签内部直接书写
<head>
<style>
h1 {
color:burlywood;
}
</style>
</head>
- link标签引入外部CSS文件(最正规方式)
<head>
<link rel="stylesheet" href="CSS文件路径">
</head>
- 行内式(一般不用)
<body>
<h1 style="color:green">你好</h1>
</body>
选择器
<body>
<div id="d1" class="c1 c2">div
<p>div里面的p</p>
<span>div里面的span</span>
</div>
<p id="d2" class="c1">ppp</p>
<span id="d3" class="c2">span111</span>
<span id="d4" class="c3">span222</span>
</body>
基本选择器
- id选择器(用的多)
#di {/*找到id是d1的标签，将文本变为绿黄色*/ color:greenyellow; }
- 类选择器(用的多)
.c1 {/*找到class值里包含c1的标签，不同标签可以有相同class值*/ color:red; }
- 元素/标签选择器
span {/*找到所有span标签*/ color:red; }
- 通用选择器(基本不用)
* {/*找到HTML页面上所有标签*/ color:green; }组合选择器
标签的嵌套用亲戚关系表述层级
下面div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div下面的span是弟弟，上面的是哥哥
<body> <span>span1</span> <span>span2</span> <div>div <p>div p</p> <p>div p <span>div p span</span> </p> <span>span</span> <span>span</span> </div> <span>span</span> <span>span</span> <body>
- 后代选择器
<style> div span {/*div内部的span变为红色。空格表示的是后代*/ color:red; } </style>
- 儿子选择器
<style> div>span {/*div内的儿子span(第一层级)变成红色*/ color:red; } </style>
- 毗邻选择器
<style> div+span {/*同级别紧挨着div的下面的第一个span*/ color:aqua; } </style>
- 弟弟选择器
<style> div~span {/*同级别在div下面的所有span*/ color:red; } </style>属性选择器
以 [ ] 作为标志
<body> <input type="text" username> <input type="text" username="jason"> <input type="text" username="egon"> <p username="tank">水箱</p> </body>
- 含有某个属性
<style> [username] {/*将所有含属性名username的标签背景色改为红色*/ background-color:red; } </style>
- 含有某个属性并且有某个值
<style> [username='jason'] {/*将所有属性名是username并且属性值是jason的标签背景色改为红色*/ background-color:red; } </style>
- 含有某个属性并且有某个值的某个标签
<style> input[username='jason'] {/*将所有属性名是username并且属性值是jason的input标签背景色改为红色*/ background-color:red; } </style>标签可以有默认的属性，还可以有自定义属性并且支持多个
分组与嵌套
分组：逗号表示并列关系，空格嵌套
嵌套：多个选择器之间可以混合用，用逗号隔开。id选择器 类选择器 标签选择器用逗号隔开
#d1,.c2,span伪类选择器
a:link /*访问之前的状态 */
a:hover /*鼠标悬停在上面 */
a:active /*鼠标点击不松开 */
a:visited /*访问之后的状态 */
基本都用a标签做，其他标签也可以但是没必要
input:focus /*input框获取焦点：即input框被点击 */
伪元素选择器
p:first-letter /*设置第一个文字的样式 */
p:before /*用CSS在文本开头添加文字，这种文字无法选中 */
p:after /*同上，只不过是在文本后面 */
before和after通常用来清除浮动带来的影响：父标签塌陷问题
选择器优先级
- 选择器相同，书写顺序不同
就近原则：谁近听谁的
2. 选择器不同行内 > id > 类 > 标签
精确度越高的选择器的优先级越高
操作标签样式
设置长宽
单位是px
height:200px
width:40px
行内标签不能设置长宽，例如span，写了也不生效
字体属性
font-family: 设置字体,可以写多个，第一个不生效就第二个
font-size： 单位px。12,14,16,46,48 等比较合适
font-weight： bolder加粗
字体颜色: 直接写英文，#编号，rgb数值，rgba数值（可以设置透明度）
文字属性
居中：text-align:center
左对齐：text-align:left
右对齐：text-align:right
文字装饰
text-decoration:underline(下划线),
overline,line-through,
none(可以用来去掉a标签的下划线)
text-indent:首行缩进
背景属性
背景图片：background-image:url("")
默认全部铺满background-repeat:no-repeat
不平铺background-repeat:repeat-x
水平方向平铺background-position:center,center
图片居中所有属性可以放在一起写
background:red url("") no-repeat center center <!--参数顺序任意-->background-attachment:fixed
边框
border-width:
border-style:
border-color:
border-radius:50%
画圆（前面要设置长宽一样）
display属性
display:none 隐藏标签不展示到前端而且原来的位置也让出，但是还存在于源代码
display:inline 将标签设置为行内标签的特点（一行显示并且无法修改长宽）
display:block 将标签设置为块级标签的特点（独占一行）
盒子模型
margin：标签与标签的距离
浏览器自带8px的margin，一般写的时候可以将body的margin去掉，就不会有留白
如果有两个，取大的那个，不会叠加
padding：内容到边框的距离
规律和margin一样
浮动
float:left 往左边浮动
float:right 往右边浮动
浮动的元素没有块级一说，本身多大，浮起来就占多大
只要涉及页面布局，都用浮动来规划
解决浮动的影响
造成父标签塌陷
<!--写HTML页面之前，先写好处理浮动影响的css代码，后面只要出现塌陷，就给标签加clearfix属性即可（class="clearfix"）--> .clearfix:after { content: " "; display: block; clear: both; }
溢出属性
overflow:hidden 溢出部分隐藏
overflow:scroll 溢出部分滚动查看#d1>img{ max-width: 100% } <!--img标签占div标签的全部--> #圆形头像的制作 overflow:hidden img { max-width:100%; }
定位
所有标签默认都是静态，无法改位置
相对定位
相对于标签原来位置做移动
不脱离文档流
绝对定位（常用）
相对于已经定位过的父标签做移动，如果没有父标签，就以body做为参照
脱离文档流（原来的位置被占据）
eg:小米网站购物车
当你不知道其他标签的位置和参数，只知道父标签的参数，就基于该标签做定位
固定定位（常用）
相对于浏览器窗口固定在某个位置
脱离文档流（原来的位置被占据）
eg:右侧边栏回到顶部的按钮
#d1{ height: 100px; width: 100px; background-color: red; left: 50px; /*从左往右 负数方向相反*/ top: 50px; position: relative; /*相对定位 默认是static不能改位置，变成relative就说明这个标签是已定位的标签，不管有没有参数移动位置，它也是已定位标签*/ position: absolute;/*绝对定位*/ position: fixed;/*固定定位 写了fixed之后，定位就是依据浏览器窗口*/ }
z-index模态框
.cover{ position: fixed; left: 0; bottom: 0; right: 0; left: 0; backgroung-color: z-index: 99; } .modal{ height: width: background: position:fixed; z-index: 100;/*只要大于99就行*/ }
透明度opacity
rgba只能影响颜色
opacity可以修改颜色和字体的透明度