您的位置：首页 > Web前端 > CSS

关于css样式的若干小问题

2017-07-28 15:27 183 查看

一.类选择器

例 1:

<p class="important warning">

This paragraph is a very important warning.

</p>

这两个词的顺序无关紧要，写成 warning important 也可以。

我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素

还有一个银色的背景。就可以写作：

.important {font-weight:bold;}

.warning {font-style:italic;}

.important.warning {background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一
个类名，匹配就会失败。
例 2:
.filter.is-active .x-icon-wrapper .x-icon {

transform: translateX(0);

}
即可用上边的情况来解释,注意空格表示'与'也就是'和'的意思.
二.区分

p span{

p,span{

两个有什么区别？

p span{}选择了P元素下的所有span元素。这是后代选择器，空格是后代选择器的标识符。

p,span{}选择了P元素和span元素。这是多元素选择器，同时选择多个元素，元素之间用逗号分隔。

三.一个冒号与两个冒号的区别

一个冒号(:)用于css3伪类,两个冒号(::)用于css3伪元素.

伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。

对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

四.calc()函数

个人第一次用到这个函数,总结一下.
calc() =
calc(四则运算)

用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：

height: calc(100% - 30px)

；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
例如:
<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>calc()函数</title>

<style>

.test {
width: calc(100% - 50px);
background: grey;

}

</style>

</head>

<body>

<div class="test">宽度为100% - 30px</div>

</body>

</html>

五.
.cur文件

cur是cursor(光标)的缩写，格式是静态光标文件。图标文件:一种是扩展名是·ico的文件。

一般情况下，你可以把一个图标文件改名后直接作为鼠标指针来使用。当然，一些色彩丰富的大图标，如果用作鼠标指针的话，在硬件不足的情况
下，会出现闪烁的现象。

怎么使用:
  cursor
属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
  cursor:help;此光标指示可用的帮助（通常是一个问号或一个气球）。

cursor:url(),auto;需使用的自定义光标的URL.

注释：请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

更多的样式使用可以参考w3c.网址:http://www.w3school.com.cn/cssref/pr_class_cursor.asp

六. div边框显示阴影
这个还是比较简单的,所以就不班门弄斧了,直接上例子.
例子:
  <!DOCTYPE html>

<html>

<head>

<style type="text/css">

.shadow {

width: 100px;

height: 100px;

background: rgba(33, 150, 243, 0.69);

box-shadow: 10px 10px 5px #636161;

}

</style>

<body>

<div class="shadow"></div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

关于css样式的若干小问题

四.calc()函数

五. .cur文件

五.
.cur文件