前端开发 03 CSS基础-柚子小站

CSS是Cascading Style Sheets 层叠样式表的简称.所谓层叠样式表,就是浏览器在读到HTML的结构,也就是各种标签及其内容之后,在显示到屏幕之前,会按照CSS里的样式设置,按照一定的次序,一层一层的呈现不同的效果,最后将这些不同的样式层叠起来成为单个的页面展现在浏览器窗口中. 样式的引入有如下几种方式:

写在标签的style属性内
写在Head标签的style标签内
通过Head标签的Link标签引入外部CSS样式表

在web刚开始发展的阶段,MVC模型还没有建立,web应用不像现在这么发达,方法1和方法2经常使用,但是现在,标准的做法是引入外部CSS样式表.

CSS文件结构及语法

既然CSS是外部文件,说明CSS文件也是一个能够被浏览器认识和解释的代码,一般CSS文件是后缀名为css的文本文件.其中的每一个语句都是一个CSS格式的语句,由CSS选择器和声明组成,来看一个例子

p {
    color: #0000CC;
    font-size: 20px;
    text-align: center;
}

其中p的部分叫做CSS选择器,顾名思义,就是用来选择HTML标签,以对其应用样式.后边大括号内的部分,叫做声明,每一行由属性和对应的值构成,用分号隔开每一行内容.其中的属性就对应一种样式,值表示用什么样的样式去展现标签的内容.这个例子里,就是指定所有段落标签的文字内容是深蓝色,字体大小为20像素,文字水平居中对齐.实际显示的效果,由于p是块级元素,宽度默认与浏览器一样宽,因此蓝色字居中显示,大小为20像素由此可见,CSS的关键是两部分,一部分是如何运用选择器选择需要的元素,一部分是样式属性如何控制最后显示的效果.

CSS选择器

CSS选择器
简单选择器	p {}	直接写标签名称,表示选中整个页面内的所有该标签,一般用于对整体设置一些通用的样式
	#id_name {}	用#加上id名称,直接选择某一个属性为该id名称的标签,由于id在HTML页面里是唯一的,该方法适合快速定位某一个元素.由于不太可能对一个页面里所有元素都加上id属性,该方法常使用在页面内的某几个关键元素上.
	tagname.classname {}	表示选择某个标签里,类名为classname的标签.如果省略tagname,则表示选取页面内全部的该类标签.这种比较常用,经常用于批量修改某一个类型的标签,比如列表项目或者图片等
	* {}	表示选取所有标签统一设置某些格式,一般用于修改浏览器的基础样式,实际使用中,不推荐用*,推荐对body标签设置样式,可达到同样效果
组合选择器	li a {}	这个叫做后代选择器,是指选中li标签内嵌套的所有a标签,不管嵌套几层,统统选中.
	div>p {}	这个叫做子代选择器,以例子来说,就是选中div下边第一层嵌套的p元素,如果有两层或更多嵌套的p元素,不会选中它们,仅选中直接子代
	div+p	这个叫做毗邻选择器,以例子来说,表示选择div同级的,然后在div下边紧邻的p标签.在div上边紧邻的p标签不被选中.上和下毗邻指的是标签在HTML文件里的顺序.
	div~p	这个叫做同级元素通用选择器,以例子来说,表示选择div同级的,在div之后出现的所有p元素.在div上边出现过的p元素不被选中.
属性选择器	[cony]	这个是选择所有的有cony这个属性的标签.自定义的属性未必能够被浏览器解释,但可以被CSS选择器找到.
	[cony="youzi"]	这个是通过属性还必须是对应的值,才能选择到该标签
	[title^="hello"]	title属性以hello开头的标签
	[title$="hello"]	title属性以hello结尾的标签
	[title*="hello"]	找到所有title属性中包含（字符串包含）hello的元素
	[title~="hello"]	找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素,这几个类似正则一样的选择器常用来选择a标签等含义url的标签
伪类选择器	:link	未访问过的链接
	:visited	已访问过的链接
	:hover	鼠标移动的链接上
	:active	选中的链接,指的是点击那一下.上边几个和链接相关的伪元素选择器经常和a标签连用
	input:focus	input元素获得输出焦点时候的样式,即在input内做动作时候的样式
伪元素选择器	:first-letter	选中标签的内容的第一个字符,常用在给首字符设置样式
	p:before	在p元素内部的最前边插入内容并修改内容的样式,比如 p:before{content:"*"; color:red;}
	p:after	用法与before类似,before和after经常用于清除浮动元素.此外after经常在一行文字后插入一个小链接比如<a>[?]</a>,来实现针对一个单词或者句子的链接解释这种效果

注意,:after和:before是在选中的标签内部的最前边和最后边来增加内容,不是在标签的前后.选择器也是可以嵌套的,这里举的例子里边的div li等,也都可以替换成其他选择器来连续使用.此外还可以分组,即用逗号隔开不同的选择器,对这些选择器都使用同一个样式.伪类和伪元素是CSS2中的一些要素,伪类可以用CSS来模拟一些事件从而动态的设置样式,伪元素则可以方便实现某些特殊效果.CSS选择器详细看W3School的CSS选择器教学/.

CSS选择器的优先级

通过不同的选择器可以选择同一个元素并针对同一个属性设置样式,此外还有内联样式.那么这个元素到底使用哪一个样式呢?这就涉及到CSS的优先级. CSS选择器优先级

说到优先级的时候,还必须知道继承,即父标签的一些属性会继承到子标签上,有一些特殊的属性不能继承,比如border, margin, padding, background等.继承的优先级和低,只有0,也就是任何其他样式都可以覆盖继承的同名样式如果全部的选择器优先级都相同,谁靠近标签谁就生效. 一般在设计良好的网页中,应该通过合理设置HTML的标签及属性来对需要进行样式处理的结构进行分组,在CSS文件里按照设计目的有层次的选择标签进行处理,尽量避免CSS优先级冲突.