现在那个网站做宣传有效果,付网站首期合同款怎么做分录,动态ip代理,wordpress自定义模板2016-10-28
《CSS入门经典》第五章
以下提示注意事项#xff1a;
1.如何选择使用id选择符还是class选择符#xff1a;当确信id选择符在页面的唯一性时#xff0c;就可以使用id选择符。
2.通用选择符在所有元素上设置样式#xff0c;并不是只设置继承的默认值。
eg
1.如何选择使用id选择符还是class选择符当确信id选择符在页面的唯一性时就可以使用id选择符。
2.通用选择符在所有元素上设置样式并不是只设置继承的默认值。
eg 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title笔记/title6 style7 *{8 color: green;9 }
10 h1{
11 color: blue;
12 }
13 /style
14 /head
15 body
16 h1This is emvery/em important/h1
17 /body
18 /html 注意使用通用选择符em标签里的内容显示为绿色而不是h1标签的蓝色它没有继承h1标签的样式。
更改代码 1 style
2 body{
3 color: green;
4 }
5 h1{
6 color: blue;
7 }
8 /style 此时em继承了h1的样式。
3.注意后代选择器与子选择器的区别。另总结
4.简单伪类
1active 被激活的元素例如激活的链接。
2first-child 元素的第一个子元素。
3focus 有焦点的元素例如接收输入的表单字段。
4hover 指向的元素例如通过鼠标。
5lang 特定语言的样式。
6link 未跟踪的链接。
7visited 以前访问过的链接。
注意
(1) 将伪类和其他的类和伪类放在一起使用时中间不要留空格只有.和:指示符。 eg a.offsite:link{color:green;}
(2) link伪类和visited伪类经常一起使用用link伪类设置链接未访问时的样式用visited设置链接访问后的样式。
(3) first-child伪类用于选择元素选择的元素是另一个元素的第一个子代。如果第一个子代匹配选择符的基本类型。first-child 伪类前面的部分那么将规则应用于该元素。
eg: 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title笔记/title6 style7 body{8 color: green;9 }
10 h1{
11 color: blue;
12 }
13 #content p:first-child{
14 background-color: silver;
15 font-size: x-large;
16
17 }
18 /style
19 /head
20 body
21 h1李白/h1
22 div idcontent
23 p明月出天山苍茫云海间。
24 长风几万里吹度玉门关。
25 汉下白登道胡窥青海湾。
26 由来征战地不见有人还。
27 戍客望边邑思归多苦颜。
28 高楼当此夜叹息未应闲。/p
29 p.../p
30 p.../p
31 /div
32 /body
33 /html 浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器 chrome IE FirefoxSafari Opera:first-child4.07.03.03.19.6
注意: :first-child在IE8和更早版本IE版本中必须声明!DOCTYPE
ie7.0以前的浏览器是不支持first-child选择器的所以使用class给特定元素设置样式。
4lang伪类
指示规则应用于匹配某种语言的元素
eg 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title笔记/title6 style7 :lang(en-uk) {8 background-color: #ccccff;9 };
10 /style
11 /head
12 body
13 pHe cried out in a bad Monty Python imitation,
14 span langen-ukHes pinin for the fjords!/span
15 /p
16 /body
17 /html 5.CSS中的伪元素
before 插入元素前的内容
after 插入元素后的内容
first-letter 块元素的第一个字母
first-line 块元素的第一行
1first-line伪元素是虚拟伪元素它只添加应用于首行的特殊样式指示元素的首行。
eg 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title笔记/title6 style7 p:first-line{8 background-color: green;9 }
10 /style
11 /head
12 body
13 p《蝴蝶效应》是一部由埃里克·布雷斯、J·麦凯伊·格鲁伯执导艾什顿·库彻、艾米·斯马特、约翰·帕特里克·阿梅多利、杰斯·詹姆斯等主演的科幻惊悚电影 于2004年1月23日在美国正式上映。电影讲述伊万艾什顿·库奇 饰在小时候经历了一系列糟糕的事情损坏了他原本完美的人生。 在童年可怕记忆的折磨下伊万请求心理医生的帮助医生鼓励他把发生的事情一件件详细记下来但是事情变得越来越糟糕。
14 /p
15 /body
16 /html 注意当浏览器窗口字体的大小改变时设置的css样式同样能适用。所以span标签不能复制first-line。因为当它显示在用户浏览器上时网页作者不知道首行 在哪里结束。
2:first-letter伪元素可以为块元素的首个字母添加特定的样式。
eg 1 style
2 p:first-letter{
3 background-color: green;
4 }
5 /style 更多专业前端知识请上
【猿2048】www.mk2048.com
