笔记01:CSS 样式及特性

CSS样式及特性.jpg

1、标签选择器

以文档中对象类型的元素作为选择器,如p,div,span等。

如果希望为标签重复样式或者希望统一文档中标签的样式时,可以使用标签选择器。

对于div、span等通用元素,不建议使用标签选择器,因为它们应用广泛,使用标签选择器会互相干扰。

2、ID选择器

以元素的id属性作为选择器。

#box{width:100px;height:100px;}

一般对于模块包含框元素使用id属性,内部元素可以定义class属性。因为包含框都是唯一的,而内部元素可能出现重复。

3、类选择器

以对象的class属性作为选择器。

 .red{color:red;}

ID选择器比类选择器具有更大的优先权。

4、指定选择器

为ID选择器或类选择器指定目标标签的一种特殊选择器形式。

5、包含选择器

包含选择器是最有用的复合选择器,它选择被第一个选择符包含的第二个选择符匹配的所有后代元素对象。

包含选择器可以实现跨层包含,即父对象可以包含子对象、孙对象或孙的子对象等等。

div span{font-size:12px;}

6、子选择器

子选择器是复合选择器,它选择被第一个选择符包含的第二个选择符匹配的所有子对象。

div>span{font-size:12px;}

子选择器只能控制子元素

7、相邻选择器

相邻选择器是复合选择器,它选择与第一个选择符相邻的第二个选择符匹配的所有同级对象。

div+span{font-size:12px;}

8、兄弟选择器

兄弟选择器是复合选择器,它选择与第一个选择符后面的第二个选择符匹配的所有同级对象。

div~span{font-size:12px;}

9、分组选择器

分组选择器是复合选择器,是一种选择器的特殊用法,它不是一种选择器类型。

h1,h2,h3,h4,h5,h6,p{

line-height:2px

}

10、伪选择器

包括伪类和伪对象两种选择器,主要是用来选择特殊区域或者特殊状态下的元素或者对象。

div:hover{font-size:12px}

11、属性选择器

以对象的属性作为选择器。

div[id="heard']{font-size=12px;]

1. 匹配属性名

[class]{color:red;}

2.匹配属性值

a[href="https://www.baidu.com"][title="css"]{font-size=12px;}

3.前缀匹配

[class^="my"]{color:red;}

4.后缀匹配

[class$="test']{color:red;}

5.模糊匹配

[class*="est"]{color:red;}

12、通用选择器

确定文档中所有类型元素作为选择器,表示每个该样式适用所有网页元素。

*{

   padding:0;

   margin:0;

}

13、CSS特性

CSS两个特性:层叠性和继承性。

并不是所有的属性都具有继承性,下面的属性就不具备继承性:

边框属性、边界属性、补白属性、背景属性、定位属性、布局属性、元素宽高属性。

打赏 支付宝打赏 微信打赏
本文标题:笔记01:CSS 样式及特性
本文链接:https://chenshuangyi.com/post/46.html
作者授权:除特别说明外,本文由 陈双义 原创编译并授权 陈双义博客 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

为您推荐

CSS3 西游记师徒取经场景动画

CSS3 西游记师徒取经场景动画

CSS3西游记师徒取经场景动画,师徒四人西天取经行走动画代码。在线演示  *本站所有资源(包括模板、...

2018-07-10 标签:CSS3西天取经西游记
Jquery+CSS3实现访问网页预加载动画特效

Jquery+CSS3实现访问网页预加载动画特效

网站首页增加一个预加载动画,让用户首次访问网站的时候不会因为等待资源准备时间过长而感到枯燥。CSS3的动画效果利用的是k...

2018-05-03 标签:JqueryCSS3
笔记02:CSS设置字体和文本样式

笔记02:CSS设置字体和文本样式

font-family:字体类型font-size:字体大小,字体大小单位选择 em 、%比较好。color:字体颜色f...

2018-04-10 标签:CSS3
纯CSS3制作超逼真打火机火焰动画

纯CSS3制作超逼真打火机火焰动画

用CSS3构画出一个打火机好像没什么问题,但要能打开还带有逼真的跳动火焰,这样就有点酷了。今天分享这款CSS3动画特效,...

2018-03-26 标签:CSS3

发表评论

百度一下
百度搜索
百度广告
站点信息
  • 文章总数:735
  • 页面总数:9
  • 分类总数:19
  • 标签总数:1179
  • 评论总数:149
  • 浏览总数:320169

当前非电脑浏览器正常宽度,请使用移动设备访问本站!