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)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
随机推荐
- 【Java基础】可变参数
下面是一个简单的小程序: import java.util.Arrays; class lesson6 { public static void main(String[] args) { ,,,,, ...
- C# 单例模式(转)
C#设计模式学习笔记-单例模式 最近在学设计模式,学到创建型模式的时候,碰到单例模式(或叫单件模式),现在整理一下笔记. 在<Design Patterns:Elements of Resuab ...
- Cisco密码恢复
1.利用超级终端连接路由器,重新启动路由器,按CTRL+BREAK进入ROM监控模式 注:配置寄存器(2B)第六位控制是否读取NVRAM中的配置文件 2.修改配置寄存器:2600系列:1): con ...
- js页面换行与空格
1.换行 +'<br/>\n': 2.空格 1#JS——输出内容document.write#用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容.1.输出内容用“”括起, ...
- PHP学习笔记四【类型运算】
<?php //类型运算符 class Dog { } class Cat { } $a=new Cat; var_dump($a instanceof Cat); //在实际开发中,判断某一个 ...
- php不区分大小写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Java IO之序列化
序列化机制是Java语言内建的一种对象持久化方式,可以很容易的在JVM中的活动对象和字节数组之间转换.它的一个重要用途就是远程方法调用的时候,用来对开发人员屏蔽底层实现细节(远端的开发人员不知道这个对 ...
- 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别(跳出iframe方法)
"window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...
- Hibernate 体系结构简述
SessionFactory: Hibernate的关键对象,它是单个数据库映射关系经过编译后的内存镜像,同时它是线程安全的.它是生成Session的工厂,本身需要依赖于ConnectionProvi ...
- SQL Server数据库空间管理 (2)
本篇内容主要解决剩余的两个问题:2).日志文件不停增长 4).自动增长和自动收缩 日志文件不停增长的解决 首先,当日志文件超过预期的时候,我们然要看看日志文件中存放了什么内容:DBCC LOG ; ...