老雷html/css开发视频教程之学习css的其他常用css知识
老雷html/css开发视频教程之其他常用css知识
一、content
用来和:after及:before伪元素一起使用，在对象前或后显示内容
normal 默认值
<url> 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
<string> 插入字符串
.box:after{
content:"a",
content:url(bg.jpg)
}二、outline
设置或检索对象外的线条轮廓
outline：<' outline-width '> || <' outline-style '> || <' outline-color '>
outline-width ： 指定轮廓边框的宽度。
outline-style ： 指定轮廓边框的样式。
outline-color ： 指定轮廓边框的颜色。
.box{
width:100px;padding:10px;outline:2px solid #f00;border:3px solid #333;
}三、cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
auto 默认
pointer 手势 这个是重要的参数，在iphone需要设置这个才会使交互生效
help 帮助
.pointer{cursor:pointer;}四、user-select 设置或检索是否允许用户选中文本
none 文本不能被选择
text 可以选择文本
all： 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
五、!important 提升指定样式规则的应用优先权。
div{
color: #f00 !important;
}六、长度单位
1.px 绝对长度单位。像素（Pixels）
2.rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
html{font-size:12px;}
p{font-size:1rem;}七、@import 指定导入的外部样式表及目标媒体。
@import url("global.css");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>其他常用css</title>
</head>
<body>
<style>
html{
font-size: 48px;
}
body{
font-size: 14px;
}
.box:after{
content:"a"
}
</style>
<div class="box"></div>
<style>
.box2{
width:100px;
padding:10px;
outline:2px solid #f00;
border:3px solid #333;
cursor: pointer;
user-select:none !important;
font-size:0.5rem;
}
</style>
<div class="box2">asdasd中<span style="font-size: 24px;">中</span></spam></div>
</body>
</html>