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.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast to javax.servlet.Filter
java.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast ...
- dojo.create\dojo.place\dojo.empty\dojo.destroy\dojo.body
1.dojo.create 1.create a node; 2.set attributes on it; 3.place it in the DOM. dojo.create(/*String| ...
- 链接<a href="javascript:void(0)" />
1.<a href="#"></a>——点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP 2.<a href="javascript ...
- iOS二进制和资源包的自检
因为现在做的是企业版的APP,不能保证用户不越狱,也不能保证有些用户喜欢自己修改ipa包里的资源文件,比如更换一些资源图片.因此,我们有必要在请求报文中,增加正版应用的二进制和资源文件的标识,让服务器 ...
- ps 网页布局
910 1680 找一个页面作为参考 双击小手回到正常视角 新建组 把他们放到一个组里 新建组改名(创意专家) 放入一个图片 内发光投影 Shiftalt 复制 新建组 改名创意案 ...
- c++网络通信(与服务器通信聊天)和c#网络通信
c++网络通信(有待整理) 链接:http://pan.baidu.com/s/1i3nMLKT 密码:ksi8 c#网络通信(tcp/udp两部分) TCP发送端: using System; us ...
- spring的IOC,DI及案例详解
一:spring的基本特征 Spring是一个非常活跃的开源框架:它是一个基于Core来架构多层JavaEE系统的框架,它的主要目的是简化企业开发.Spring以一种非侵入式的方式来管理你的代码,Sp ...
- weblogic上部署应用程序
weblogic上部署应用程序有三种方法: 一:修改配置文件config.xml在文件中加入如下代码片段: <app-deployment> <name>FAB</nam ...
- 【Heritrix基础教程之4】开始一个爬虫抓取的全流程代码分析
在创建一个job后,就要开始job的运行,运行的全流程如下: 1.在界面上启动job 2.index.jsp 查看上述页面对应的源代码 <a href='"+request.getCo ...
- WINDOWS API 函数(超长,值得学习)
一.隐藏和显示光标 函数: int ShowCursor ( BOOL bShow ); 参数 bshow,为布尔型,bShow的值为False时隐藏光标,为True时显示光标:该函数的返回值为整型 ...