~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 css选择符
1.1 基本选择符
标签
body {background-color:blue;}
id选择符
#content {
text-align:center
}
class选择符
.title {
font-family:arial;
}
1.2 群组选择符
h1,h2,h3,p,span {
font-size:12px;
}w
1.3 包含选择符
h1 span {
font-weight:bold;
}
对h1下面的span进行样式指派
1.4 标签指定式选择符
h1#content{}
针对所有id=content的h1标签
h1.p1{}
针对所有class为p1的h1标签
(注意:中间没有空格)
1.5 组合选择符
h1 .p1{}
针对h1标签下的所有class为p1的标签
#content h1{}
针对id=content标签下的所有h1标签
h1 .p1,#content h1{}上面的组合
h1#content h2{}
针对id=content的h1标签下的h2标签
1.6 伪类
a:hover{
background-color:#3333333;
}
1.7 通配选择符
*{
color:blue;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 CSS数值单位
px:
em:
ex:
pt:
pc:
in:
mm:
cm:
rgb:
#RRGGBB:
Color Name:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3 CSS之DIV
head+left+right
<style>
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
#head {
background-color:#cccccc;
border: 2px solid red;
width:100%;
}
#left {
background-color:#cccccc;
border:2px solid #333333;
width:20%;
height:100%;
float:left;
}
#right {
padding-left:0px;
background-color:#cccccc;
border:2px solid #333333;
/* width:80%; */
height:100%;
/* float:left; */
}
</style>
<div id = "head"></div>
<div id = "left" ></div>
<div id = "right" ></div>
几个比较常用的css属性设置:
margin:上 下 左 右;
padding: 上 下 左 右
position: absolute; /* 绝对位置
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4 层叠与覆盖
上下层叠和覆盖z-index
4.1 z-index属性就用来控制层叠和覆盖的。
按照定义,z-index的数值越大,则元素容器越在上层。
z-index的属性值可以是正整数,0和负整数.
h1 {
color:red;
color:blue;
}
blue会把red覆盖。
4.2 层叠采用以下重要度次序:
1 标为!important的用户样式
2 标为! important的作者样式
3 作者样式
4 用户样式
然后,根据选择器的特殊性决定规则的次序。具有更特殊选择器的选择器的规则
优先于具有比较一般选择器的规则,如果两个规则的特殊性相同,那么后定义的
规则优先。
特殊性:
选择器的特殊性分为四个成分等级:a,b,c,d
1 如果样式是行内样式,那么a = 1
2 b = ID选择器的总数。
3 c = 类,伪类和事项选择器的数量
4 d = 类型选择器和伪元素选择器的数量
例如:
style = ""; 特殊性 abcd = 1000;
#wrapper #content{} 特殊性 abcd = 0200;
div#content{} 特殊性 abcd = 0101;
特殊值谁大谁优先!
4.3 超链接样式
a:link,a:visited {
color:#666;
text-decoration :none;
}
a:hover,a:active {
text-decoration:underline; /* line-through,underline */
background-color:#ffe;
}
分享到:
相关推荐
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
css样式,很好用好,很不错,可以试试
html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习...
DIV+CSS教程——第一天XHTML_CSS基础知识
css基础样式
css基础教程,适合新手使用,仅供参考
CSS核心基础--CSS基础选择器 CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS...
Html+css基础
css基础知识简介,刚学习css布局的童鞋可以下载看看
CSS基础-介绍及语法,css入门必备资料
书名:CSS基础教程 作者:(英)柯林森 著,刘志忠 等译 来源:人民邮电出版社 出版时间:2007年09月 ISBN:9787115164629 定价:49元 内容介绍: 本书是优秀的CSS 入门书,重点讲述了如何使用CSS 实现基于Web ...
CSS基础教程.rar CSS基础教程.rar CSS基础教程.rar CSS基础教程.rar CSS基础教程.rar CSS基础教程.rar
css 基础 代码 CSS之入门篇——推荐新手
html&css入门基础知识点.pdf
[SitePoint] CSS 基础教程 英文版 [SitePoint] Jump Start CSS E Book ☆ 图书概要:☆ This short SitePoint book provides readers with a fun and yet practical introduction to Cascading Style Sheets ...
css-ppt 为打基础学习的ppt 蛮不错的
html+css的基础学习html+css的基础学习html+css的基础学习html+css的基础学习 html+css的基础学习html+css的基础学习html+css的基础学习html+css的基础学习 html+css的基础学习html+css的基础学习html+css的基础学习...
也许你曾听说过CSS,但并不真正清楚CSS到底是什么。在这一课,你将学到更多CSS的 知识,并了解CSS可以做些什么。 CSS是Cascading Style Sheets(级联样式表)的缩写。
HTML5与CSS3基础教程(中文第8版) 本书自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版...
(1)基础选择器 (i)标签选择器 (ii)类选择器 (iii)id选择器 (iv)通配符选择器 (2)复合选择器 (i)后代选择器 (ii)子代选择器 (iii)并集选择器 (iv)伪类选择器 三、CSS字体属性 (1)字体大小 (2...