css基础教程之其他常用css知识

老雷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");