css样式规则的简要总结
css与文档关联起来发挥作用。
css文件中是各种样式规则,由选择器和声名块构成。声明块由多条声明组成。选择器是声明要作用的对象,声明是对具体规则的描述。
声明由属性和值组成,值或是属性的错误都会使该条声明失效.但是后续的声明可以继续发挥作用.一般情况下,属性值是由关键字或是关键字列表组成.关键字之间通常是空格来分界,但例外是可以在:字体大小/行高格式上使用"/".选择器分为:通配选择器、元素选择器、id选择器、类选择器、属性选择器、伪类选择器、伪元素选择器、后代选择器、子代选择器、相邻兄弟选择器、普通兄弟选择器。下面分开说明:
1、元素选择器
元素是构成文档的基础。当然主要是html文档但是并不限于html,在xml中也可以使用。这自不用说,直接使用元素就是了。
2、通配选择器
该选择器使用通配符*,匹配所有的元素。问题在于不要滥用,在特殊性上,它的特殊性位0,但是强过没有特殊性的继承的方式。
3、id选择器和类选择器
二者独立于元素,也就是说可以代表了一类条件,而且是区分大小写的。不同在于:id具有唯一性,不支持多类的多个词空格的形式。书写上的差异不表。id会在javascript中建立全局变量。
4、属性选择器。该选择器会依据属性的特性来选择元素。分为:简单属性选择器(包含属性的有无,同常是做校验使用)、具体属性选择器、部分选择器(~= ^= *= $=)、特殊属性选择器(|= 通常用于选择语言,健壮性不如:lang这个伪元素)。
5、后代选择器。它是基于良好的文档结构的。所以良好的文档结构是非常重要的。直接将元素列出来就可以了。不管嵌套结构有多么深都会使用.
6、子代选择器。由于子代应用的面太大,需要更加精确地控制方式。子代选择就出现了。
7、相邻兄弟选择器。该选择器实际上要求比较严格,选择的是元素之后紧邻的元素,只会是一个。但有时好像选择了第一个之后的所有,只是因为本是选择了全部了。例如:ol li + li 会选择除第一个之后的所有。原因是ol li选择了所有的li.然后是所有的li选择兄弟元素。
8、 普通兄弟选择器.a ~ b.这种方式会更加的宽松,允许间隔,只要有相同的父元素就可以了。
9、伪类与伪元素。二者在元素的文档中都不会存在,而是由用户代理(主要是浏览器)产生。这是一种幻象的产生方式。伪类::link :visited :focus :hover :active :lang() :first-child :nth-child。伪元素也是由用户代理来产生的。主要有::first-line :first-letter :after :before等。前两个主要用于块级元素,但不会限与块级元素。但对可用的属性还是有限制。而且必须在选择器的最后,如P:first-line em就会出错。后二者如:after {content:"value";}。
css样式规则的简要总结的更多相关文章
- css样式规则
在css样式规则中: 1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式. 2.属性和属性值以"键值对"的形式出现. 3.属性是对指定的对象设置的样式 ...
- 强制改变css样式优先级
.list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
- 引入CSS样式表(书写位置)
CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...
- 2.1.4- css 样式规则
CSS初识 CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽 ...
- 2.1.3- 体会css样式
css初始 css样式规则 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- CSS样式表的书写位置
行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
随机推荐
- Android图片编译报错
一. AAPT err(1118615418): ERROR: 9-patch image icon_item_bottom_line.9.png malformed No marked region ...
- synchronized关键字的用法
synchronized用于给方法或者块加锁用的,只有获得该对象或者块的锁的对象才能够执行里面的代码,否则将阻塞在那里,等待该锁被释放,然后获得该锁继续执行.比如下面模拟售票的代码: /** * 模拟 ...
- iOS 获取系统目录
//获取根目录 NSString *homePath = NSHomeDirectory(); NSLog(@"Home目录:%@",homePath); //获取Document ...
- C#调用SAPWebService
其实和调用其它WebService 没有很大不同 只是不了解SAP的人 可能不太明白 SAP接口中的相关参数 //调用接口 , 创建对象 ServiceReference1.Z_IF_MM_VEND ...
- Centos6.5下安装php
安装php: yum -y install php 重启httpd服务激活php: /etc/init.d/httpd restart 测试php是否安装完成 vim /var/www/html/in ...
- 恶补ASP.NET基础【1】枚举和结构
有时我们希望变量提取的是一个固定集合中的值,此时就可以用枚举类型, 例: enum OpenMode : byte { 新增=, 编辑=, 查看= } class Program { static v ...
- EntityFramework+Autofac+MVC+EasyUI 搭建公司基本服务项目
去年年底用了2个星期的时间搭建了 这套框架,从ORM,IOC,MVC,EasyUI都仔细的研究了下,还有日志,异常等等.mvc 我已经开发过很多项目了,我就觉得自己写套框架,看看自己的水平如何.欢迎大 ...
- android 手势滑动
1.概述, 两次都是画曲线统计图用到手势滑动.左滑动,右滑动曲线图翻页 2.直接上代码 3.注: 第一次使用的时候是implement了 OnTouchListener 接口,是在画图布局上layou ...
- Oracle EBS-SQL (INV-11):检查子库存会计信息.sql
select OOD.ORGANIZATION_CODE 库存组织代码, ...
- VirtualBox 上安装CentOS 6.5
目标:1.在VirtualBox中安装CentOS2.配置虚拟机网络,实现: a.主机联网后,宿机能够通过主机上网 b.不管主机联网与否,主机都能SSH登录宿机,并且主宿机能互相传送文件 ...