已经两周过去了,想着坚持着也还是偷了个懒~
就看过的css,自己做了些笔记,如下:以后也好翻找出来当个目录查阅什么的。O(∩_∩)O哈哈~继续加油哦~
2.css的优点:
css可以缩减文件大小
css一方面可以大大减少下载时间,另一方面又能够大大提升读者的满意度
HTML是一种结构化语言,而css是它的补充:是一种样式语言
HTML中比较常用的元素:p,table,div,span,a
css中替换(<img src='howdy.gif'>)和非替换元素
块级元素和行内元素
3.选择器
h2 {color:gray,font-size:18;}
选择器 声明块
声明和关键字
p {font : medium Helvetica;}声明块中有两个关键字,使用空格隔开
只有一种关键字之间可以使用/: h2 {font:large/150% sans-serif;}斜线分割了用来设置元素字体大小和行高的两个关键字
选择器分组
h2,p {background:yellow;}//h2元素和段落p都是黄色背景
通配选择器
* {color:red;}//将文档中所有元素的颜色置为红色
将声明分组
h1 {font:18px Helvetica;color:purple;background:aqua;}//h1标题紫色文本,背景淡绿色。或者
h1 {
font:18px Helvetica;
color:purple;
background:aqua;
}
文档选择器,类选择器,ID选择器(它们允许以一种独立于文档元素的方式来指定样式)
类选择器
<p class="warning">hello,good evening everyong,nice to meet you</p>
*.warning {font-weight:bold;}
.点号标记这是一个类选择器
p.warining可以解释为“其class属性包含词warining的所有段落”
多类选择器
<p class="urgent warning">include urgent and warning包含紧急和警告</p><span class="warning">只包含警告</span>
.warning {font-weight:bold;}
.urgent {font-style:italic;}
.waring.urgent {background:silver;}
p.waring.urgent {background:silver;}也可以匹配<p class="warning urgent help ">Help!</p>
ID选择器
*#first-para {font-weight:bold;}
这个规则会让所有id属性中包含first-para的元素显示为粗体文本
<p id="first-para">This paragraph will be boldfaced</p>
在HTML文档中,一个ID选择器将被使用一次,且仅被使用一次。
4.属性选择器(2014.11.25)
对于类和ID选择器,只是选择属性值,前面两小节用法是对HTML,SVG,MathML文档特定的。
属性选择器可以根据元素的属性及属性值来选择元素。共有四类
1)简单属性选择器
选择有某个属性的元素,而不论元素之是什么
eg1.选择有class属性的元素:h1[class] {color:silver;}//还可以更具体范围h1[class="aa"] {color:silver;}
<h1 class="hoopla">Hello</h1>
<h1 class="severe">Word</h1>
eg2.同时将具有href和title属性的HTML超链接的文本置为粗体
a[href][title] {font-weight:bold;}
2)根据具体属性值选择
h1[class="aa"] {color:silver;}
//注意ID选择器和制定id属性的属性选择器不是一回事。换句话说h1#page-title和h1[id="page-title"]之间存在着微妙但是很重要的差别。
3)根据部分属性值选择
p[class~="warning"] {font-weight:bold;} 波浪号~是部分选择的关键
p.warning和p[class~="warning"]应用到HTML文档时是等价的。
4)特定属性选择类型
*[lang |="en"] {color:white;}
这个规则会选择lang属性等于en或者以en-开头的所有元素
这种属性选择器最常见的用途是匹配语言值。
5.使用文档结构
/\s/是非空字符在JS里的正则表达式
后代选择器
h1 em {color:gray;}//这个规则会把h1元素后代的em元素的文本变为灰色
//h1 em这种语法会选择从h1元素继承的所有em元素,而不论em元素的嵌套层次有多深。
选择子元素
h1 > strong {color:red}
//只作为一个h1元素子元素(而不是后代元素)的子元素
h1>strong可以理解为“选择作为h1元素子元素的所有strong元素“
选择相邻兄弟元素
h1 + p {margin-top:0;}
去除紧接在一个h1元素后出现的段落的上边距
6.伪类和伪元素
利用这些选择器,可以为文档中不一定具体存在的结构指定样式,或者为某些元素(甚至是文档本身)的状态所指示的幻想类指定样式。换句话说,会根据另外某些条件而非文档结构想文档中的某些部分应用样式,而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。
伪类选择器
Mosaic协议指定未访问页面的链接为蓝色,已访问页面的链接为红色。
css定义了伪类,使已访问页面的锚就好像已经有了一个"visited"类一样:
a:visited {color:red;}
链接伪类(2个)
:link 指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚。注意,有些浏览器可能会不正确地将:link解释为指向任何超链接,包括已访问和未访问的超链接
:visited 指示作为已访问地址超链接的所有锚
动态伪类(3个)
伪类名 描述
.focus 指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种元素激活的元素
:hover 指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上,:hover就会指示这个超链接
:active 指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接
选择第一个子元素
静态伪类:first-child来选择元素的第一个子元素
根据语言选择
lang()伪类就像是|=属性选择器(|=的意思是说会选择lang属性等于**或者以**-开头的所有元素)
eg.要把所有法语元素变成斜体
*:lang(fr) {font-style : italic;}
伪选择器和属性选择器主要差别:语言信息可以从很多来源得到,而且其中一些可能在元素之外。伪类比属性选择器稍微健壮些。
结合伪类
a:link:hover {color:red;}
a:visited:hover {color:red;}
注意:不要把互斥的伪类结合在一起使用。
伪元素选择器
就像伪类为锚制定幻像类一样,伪元素能够在文档中插入假想的元素,从而得到某种效果
设置首字母样式
第一个伪元素用于设置一个块级元素首字母的样式,而且仅对该首字母设置样式:
p:first-letter {color:red;}
这个规则会把每一段的第一个字母变成红色。
设置第一行的样式
p:first-line {color:purple;}//可以让一个文档总第一段的第一行变成紫色
注意:first-letter和:first-line的限制
设置之前和之后元素的样式
h2:before {content:"}}";color:silver;}//在元素之前插入内容
body:after {content : "The End.";}