id和class选择器
id和class值均不能以数字开头(在 Mozilla/Firefox 浏览器中不起作用)
id选择器:以 “#” 来定义。不同的标签id值不能相同。
/*适用于id = "para1"*/
#para1
{
text-align:center;
color:red;
}
class选择器:以”.”定义。不同的标签class值可以相同。
.center {text-align:center;}
也可以指定特定的HTML元素使用class,例如所有的p元素:
p
{
color:red;
text-align:center;
}
颜色值的写法
p { color: red; } == p { color: #ff0000; } == p { color: rgb(255,0,0); } == p { color: rgb(100%,0%,0%); }
注意:当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下不需要这么做,比如当尺寸为 0 像素时,0 之后不需要使用 px 单位。
样式表(外部、内部、内联)
外部样式表:样式需要应用于很多页面,样式表以.css为拓展名。
需要在头部用标签链接到样式表。
例:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
mystyle.css:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(/images/back40.gif);}
注:不要在属性值与单位之间留有空格。例如使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表:单个文档需要特殊的样式。
在头部用<style>
标签定义。比如说在上文讲id和class选择器的时候用的就是内部样式表。
例:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式表:当样式仅需要在一个元素上应用一次时。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
优先级
内联样式表>内部样式表>外部样式表>浏览器缺省样式
但是比如同时拥有内联和外部样式,相同的属性使用内联样式表的属性值,而外部样式独有的属性(内联样式表没有该属性)依旧存在(使用外部样式表的值)。
下列是一份优先级逐级增加的选择器列表,其中数字 7 拥有最高的优先权:
1.通用选择器(*)
2.元素(类型)选择器
3.类选择器
4.属性选择器
5.伪类
6.ID 选择器
7.内联样式
!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明,无论它处在声明列表中的哪里。但是使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。
权重计算:内联样式表:1000; ID 选择器:100; Class 类选择器: 10; HTML 标签选择器: 1;
标签选择器指的是比如<p>、<em>
这种,有冲突的话相加看看哪个比较大,当然正常人也不会故意把样式写得很复杂,还要算来算去算权重= =当权值相等时,后出现的样式表设置要优于先出现的样式表设置;继承的CSS 样式不如后来指定的CSS 样式;
背景——background
背景颜色:background-color
可以为所有元素设置背景色,包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承,其默认值是 transparent。如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才可见。背景图像:background-image
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。
background-repeat:repeat-y;
可设置只在某一方向进行平铺(比如这里是y轴方向)
设置定位不平铺:background-repeat:no-repeat;
<style>
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
</style>
background-position 属性可以改变图像在背景中的位置:关键字top、bottom、left、right 和 center;
只要保证不超过两个关键字:一个对应水平方向,另一个对应垂直方向,那么可以设置位置关键字以任何顺序出现,比如top left,left top。如果只有一个关键字,则会默认另一个关键字为 center。
background-position 属性值还可以由百分比和长度表示,例如: background-position:66% 33%;
表示以左上角为起点,将图片的中心放在距离左边2/3,距离顶端1/3的地方。而长度,例如:background-position:50px 100px;
即为图片左上角距离内边距区左边50px,距离上边100px。
background-attachment属性用于固定背景图像。background-attachment:fixed
.设置了fixed说明,无论怎么上下滚动页面,图片都是在页面中的同一个地方(不会消失也不会变化),而不会比如说在顶部,往下一滚,图片滚到了不可见的地方。
3.背景简写:将所有属性合并到一个属性background中
例:body {background:#ffffff url('img_tree.png') no-repeat right top;}
属性值的顺序:1.background-color 2.background-image 3.background-repeat 4.background-attachment 5.background-position
以上属性无需全部使用,可以按照实际需要使用.
4.背景图片宽高自适应:
background-size:100% 100%
text-文本格式
- text color-设置文字颜色。
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
注:如果定义了颜色属性,就必须定义背景色属性。
2.text-align 文本对齐方式
属性值:left:左对齐;right:右对齐;center:中心对齐;justify:两端对齐;inherit:从父类继承。
3.text-decoration:文本修饰
a {text-decoration:none;}
用于删除链接的下划线
h1 {text-decoration:overline;}
属性值还可以是through-line或者underline;
4.text-transform:大小写转换
属性值:uppercase、lowercase、capitalize。分别对应所有字母大写、所有字母小写、所有单词首字母大写。
5.text-indent:文本缩进
p {text-indent:50px;}
在这里所有p元素的第一行都可以缩进一个给定的长度。
6.word-spacing:文本间隔
p { word-spacing:30px; }——每个字或单词间的间隔为30像素
word-spacing是单词间的距离,字符之间(单词内)的距离调整用letter-spacing.
line-height:行距。p {line-height:200%;}
大多数浏览器的默认行距大约是110%-120%左右。
7.text-shadow:文字阴影
h1 {text-shadow:2px 2px #FF0000;}
向右偏移量、向下偏移量、颜色。
字体——font
font-family:
p{font-family:"Times New Roman", Times, serif;}
属性值一般会设置几个不同字体名称作为一种”后备”机制,如果浏览器不支持第一种字体将会尝试下一种字体,字体中间用逗号分隔。 如果字体系列的名称超过一个字或单词,它必须用引号,如Font Family:”宋体”。
CSS 定义了 5 种通用字体系列:Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体。font-style:属性值:normal-正常字体,italic-斜体,oblique-倾斜的文字。通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样(…)。
设置字体大小:
p {font-size:40px;}
一般文字的默认大小为16px,但是在IE9以下版本的IE浏览器中是不支持px的,因此推荐使用em作为单位:1em=16px。(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 30px,那么1em=30px。因此其实在IE9以下时用em的确可以调整大小,但是可能会偏大或者偏小) 为了解决这一问题,我们经常设置body的字体大小为100%:body {font-size:100%;}
font-weight:控制文本粗细
属性值:normal、lighter、bold或数字。font-weight:normal;=font-weight:400; lighter:300;bold:900;font:声明所有字体属性
顺序:1.font-style。2.font-size。3.font-weight。4.font-family。(可缺省)
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
链接的四种状态:link、visited、hover、active
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时(未点击)
a:active - 链接被点击的那一刻(点击时)
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
可以分别设置四种状态的颜色、背景色、大小、下划线、字体等,使其点击前后以及鼠标悬浮时显示出来的状态不同。
注:a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面。
列表样式(ul)
使用list-style-type属性:{list-style-type: upper-roman;}
常见属性值:1-4是无序列表的样式,5-9是有序列表的样式。
1. none:不使用项目符号
2. disc:实心圆
3. circle:空心圆
4. square:实心方块
5. demical:阿拉伯数字
6. lower-alpha:小写英文字母
7. upper-alpha:大写英文字母
8. lower-roman:小写罗马数字
9. upper-roman:大写罗马数字
list-style-image:作为列表项标记的图像
list-style-image: url('sqpurple.gif');
list-style:列表的缩写属性
使用缩写属性值的顺序是:1.list-style-type。2.list-style-position (设置列表中列表项标志的位置)。3.list-style-image。