CSS3

一.初始CSS3:

1.     CSS3通过<style>标签引入CSS样式

2.      css样式有3种引入样式:

    a.    行内样式:在HTML标签中直接使用style属性设置CSS样式

<h1 style="color:red;"></h1>

    b.内部样式:把CSS代码写在<head>的<style>标签中,与HTML内容位于同一个HTML文件中;

    c.外部样式表:把CSS代码保存为一个单独的样式表文件,文件扩展名为.css;在页面中引用外部样式表即可;

3.        引用外部样式表有两种方式,链接式,导入式;

a.   链接式:

语法:

<head>

    <link href=“style.css" rel=”stylesheet" type="text/css"/>

</head>

rel="stylesheet"是指在这个页面种使用这个外部样式表;type是指文件的类型是样式表文件

在css文件中,不需要<style>标签,直接编写样式即可

b.    导入式:

<head>

    <style>

        @import url("css/common.css");


    </style>

</head>

4.       连接式和导入式的区别:

<link/>标签属于XHTML范畴,而@import是css2.1中特有的;

链接式显示出来的网页效果和用户预期一样;而导入式先将HTML结构呈现出来,再将css文件加载到网页中,会给用户不好的体验

5.      样式优先级:就近原则,行内>内部>外部,


二:CSS3基本选择器:

1.标签选择器:

2.类选择器;

.green{

    color:red;

}

<a class="green">哈哈</a>

3.ID选择器:

#a{

    color:red;

}

<a ID="a">哈哈</a>

4.3种选择器的优先级:ID>Class>标签


三、多元素的组合选择器(层次选择器)

序号选择器含义
5.E,F多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6.E F后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7.E > F子元素选择器,匹配所有E元素的子元素F
8.E + F毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

实例:

div p { color:#f00; }

#nav li { display:inline; }

#nav a { font-weight:bold; }

div > strong { color:#f00; }

p + p { color:#f00; }

三、CSS 2.1 属性选择器

序号选择器含义
9.E[att]匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
10.E[att=val]匹配所有att属性等于“val”的E元素
   
25.E[att^=”val”]属性att的值以”val”开头的元素
26.E[att$=”val”]属性att的值以”val”结尾的元素
27.E[att*=”val”]属性att的值包含”val”字符串的元素

实例:

p[title] { color:#f00; }

div[class=error] { color:#f00; }

td[headers~=col1] { color:#f00; }

p[lang|=en] { color:#f00; }

blockquote[class=quote][cite] { color:#f00; }

四、结构伪类选择器

序号选择器含义
13.E:first-child匹配父元素的第一个子元素
14.E:link匹配所有未被点击的链接
15.E:visited匹配所有已被点击的链接
16.E:active匹配鼠标已经其上按下、还没有释放的E元素
17.E:hover匹配鼠标悬停其上的E元素
18.E:focus匹配获得当前焦点的E元素
19.E:lang(c)匹配lang属性等于c的E元素

实例:

p:first-child { font-style:italic; }

input[type=text]:focus { color:#000; background:#ffe; }

input[type=text]:focus:hover { background:#fff; }

q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; }

五、 CSS 2.1中的伪元素

序号选择器含义
20.E:first-line匹配E元素的第一行
21.E:first-letter匹配E元素的第一个字母
22.E:before在E元素之前插入生成的内容
23.E:after在E元素之后插入生成的内容

实例:

p:first-line { font-weight:bold; color;#600; }

.preamble:first-letter { font-size:1.5em; font-weight:bold; }

.cbb:before { content:”"; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }

a:link:after { content: ” (” attr(href) “) “; }

六、CSS 3的同级元素通用选择器

序号选择器含义
24.E ~ F匹配任何在E元素之后的同级F元素

实例:

p ~ ul { background:#ff0; }


div[id^="nav"] { background:#ff0; }


阅读更多
个人分类: HTML5
想对作者说点什么? 我来说一句

css3参考手册css3参考手册

2011年06月23日 367KB 下载

css2|css3

2011年08月09日 903KB 下载

CSS3教程和css3新特性专题

2011年11月02日 1.43MB 下载

揭秘HTML5和CSS3揭秘HTML5和CSS3

2011年08月05日 657KB 下载

css3翻转文字

2018年02月05日 7.46MB 下载

css3 下拉菜单

2018年02月05日 11KB 下载

css3 chm 手册

2011年06月05日 2.64MB 下载

没有更多推荐了,返回首页

不良信息举报

CSS3

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭