CSS常用汇总
文章目录
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
- 字体相关属性
- 文本对齐
- 文本装饰
- 文本缩进
- 内部样式表
- 外部样式表
- Emmet语法
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
- 块元素
- 行内元素
- 行内块元素
- 元素类型的转换
- snipaste
- 背景图片
- CSS三大特性
- 盒子模型
- 圆角边框
- 盒子阴影
- 文字阴影
- 浮动
- PS切图
- 定位
- 元素的显示与隐藏
- 精灵图
- 字体图标
- CSS三角
- 鼠标样式
- 用户界面样式
标签选择器
<style>/*标签选择器：写上标签名*/p {color: red;/*将p标签内容改成红色*/font-size: 25px;}</style>
类选择器
语法
.类名{
属性1：属性值1；
…
}
一个类可以有多个类名，类名之间要用空格隔开
<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>.red {color: red;}.font{font-size: 20px;}</style></head><body><br><h4>我承诺</h4><ul><li class="red font">年满18岁,单身</li><li>抱着严肃的态度</li><li>真诚的寻找另一半</li></ul></form></body>
id选择器
<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>#pink{ /*#号声明id*/color: pink;}</style></head><body><div id="pink">zyj</div></body>
通配符选择器
语法：
*{
属性1：属性值
…
}
所有的标签都被选中
字体相关属性
先选用第一个字体，没有的话再去选择第二个……
#font{font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif;font-size: 20px;font-weight: 700;/*700不用加单位*/font-style: italic; /*italic是斜体 ，normal是正常*//*复合属性：简写方式*//* font:font-style font-weight font-size/line-height font-family */font: italic 700 16px 'Microsoft yahei';}
文本对齐
对齐文本：text-align
文本装饰
去掉超链接的下划线
a{text-decoration: none;}文本缩进
line-height属性用于设置行间的距离（行高）。可以控制文字与行之间的距离。
p{line-height:26px;
}
内部样式表
外部样式表
css文件中只管写样式，不用加style
<link rel="stylesheet" href="style.css"> /*直接把style.css引入*/
Emmet语法
后代选择器
<style>ol li{color: pink;}/*只选中包含在ol里的li标签的内容*/</style><body><div id="font">我是zyj</div><ol><li></li><li></li><li></li></ol><ul><li></li><li></li><li></li></ul>
</body>
子选择器
.nav>a{color:red}/*选择class为nav下的a标签*/
并集选择器
伪类选择器
链伪类选择器
块元素
常见的块元素有
~
、
、
、
- 、
- 、
- 等
把块元素转化为行元素加display:inline;
行内元素
为了控制行元素的宽度和高度，需要加：display:block;把行元素转化为块元素
行内块元素
元素类型的转换
snipaste
练习：简易小米侧边栏
<!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>简介小米侧边栏</title><style>a{display: block;width: 230px;height: 40px;background-color: gray;font-size: 14px;color: white;text-decoration: none;text-indent: 2em;line-height: 40px;/*文字行高等于盒子行高，就能垂直居中*/}button{color: white;}a:hover{background-color:#ff6700 ;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body></html>
背景图片
background-image：url(图片的路径);
background-repeat: 设置图片的展示格式
1.repeat 平铺
2.no-repeat 不平铺
3.repeat-x 沿x方向平铺
4.repeat-y 沿y方向平铺
background-position属性改变图片在背景中的位置
background:x y;
background-attachment属性设置背景图片是否固定或者随着页面的其余部分滚动
默认值是scroll，修改f为ixed可以使图像固定
背景色半透明
background：rgba（r，g，b，透明度）; 透明度取值在0~1之间
CSS三大特性
层叠性
继承性
优先级
复合选择器权重会叠加
盒子模型
div{width: 300px;height: 200px;/*border-width 边框的粗细 一般情况下都用px*/border-width: 5px;/*border-style 边框的样式 solid实线边框 dashed是虚线边框 dotted是点线边框*/border-style: solid;border-color: pink;/*上边框、下边框、左边框、右边框的情况*/border-top: 10px dashed purple;border-bottom: 10px solid red;border-left: 10px,solid yellow;border-right: 10px solid blue;/*合并相邻的边框*/border-collapse: collapse;/*上右下左的内边距*/padding: 5px,5px,5px,5px;/*margin属性用于设置外边框，即控制盒子和盒子之间的距离，用法与padding一致，复合属性为margin*/}
list-style:none;去掉li前面的小圆点
圆角边框
border-radius: xxpx;
四组值：border-radius:1px 1px 13px 2px;
三组值border-radius:10px 5px 1px ;
二组值border-radius:10px 1px ;
一组值border-radius:10px ;
盒子阴影
文字阴影
浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
<style>.left{float:left;/*浮动到左边*/width: 200px;height: 200px;background-color: pink;}.right{float: right;/*浮动到右边*/width: 200px;height: 200px;background-color: red;}</style>
PS切图
定位
轮播图的左侧按钮的样式实现
.prev{position: absolute;/*如果有left，也有right，执行left，原则上先上后下，先左后右*/left: 0;top: 50%;margin-top: -15px;/*加了绝对定位的盒子可以直接设置高度和宽度*/width: 20px;height: 30px;background-color: rgba(0,0,0,.3);color: white;text-align: center;line-height: 30px;text-decoration: none;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}
元素的显示与隐藏
精灵图
字体图标
CSS三角
三角做法
.box2{width: 0;height: 0;border: 100px solid transparent;border-top-color: black;margin-top: 100px;}
鼠标样式
用户界面样式
white-space:nowrap;如果一行显示不开，也强制要一行内显示
