语法:元素名称{属性:属性值;}
说明:
a)元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。
b)所有的页面元素都可以作为选择符;
用法:1)如果想改变某个元素得默认样式时,可以使用类型选择符;(如:改变一个div、p、h1样式)
2) 当统一文档某个元素的显示效果时,可以使用类型选择符(如:改变文档所有p段落样式)
语法:#id名{属性:属性值;}说明:A)当我们使用id选择符时,应该为每个元素定义一个id属性如:B)id选择符的语法格式是“#”加上自定义的id名如:#box{width:300px; height:300px;}
C) 起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)如:head标记D)一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素对象。E) 最大的用处:创建网页的外围结构。
3)class选择器
"用法:class选择符更适合定义一类样式;
4)*通配符
<span class="oo oos"><span class="oo oos">5)群组选择器
<blockquote class="textcon">语法:选择符1,选择符2,选择符3{属性:属性值;}说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。
6) 包含选择器
<span class="oo oos"><span class="oo oos"><span class="oo oos">7) 伪类选择器(伪类选择符)
<blockquote class="textcon">语法 :a:link{属性:属性值;}超链接的初始状态;a:visited{属性:属性值;}超链接被访问后的状态;a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;<span class="oo">要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。说明:A)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;B)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;例如:a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变颜色。?
五、CSS属性
?
font-family?设置使用的字体
常用字体:"Courier New",Courier,monospace,"Times New Roman",Times,serif,Arial,Helvetica,sans-serif,Verdana
font-style?设置字体的样式,是否斜体
oblique;(偏斜体) italic;(斜体) normal;(正常)
font-variant?设置字体的大小写
small-caps;(小型大写字母) normal;(正常)
font-weight?设置字体的粗细
100-900(数值100、200类推到900分为9个程度,呈递增趋势;100最细 900最粗) bold(粗) bolder(超粗) lighter(细) normal;(正常)
font-size?设置字体的大小
x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD;
letter-spacing 设置字间距
数值 inherit normal;word-spacing 设置单词间距
数值 inherit normal;
text-align?设置文本的水平对齐方式
left right center(居中对其) justify(分散对其)
text-indent?设置文本的首行缩进
数值 inherit
line-height?设置文本的行高
数值 inherit normal;
text-decoration 设置文本修饰
inherit none underline(下划线) overline(上划线) line-through(删除线) blink(闪烁线)?
vertical-align?设置文本的垂直对齐方式
inherit top bottom text-top text-bottom baseline middle sub super
background-color? 背景颜色
数值 rgb(255,255,255)background-image? 背景图片
url(URL) nonebackground-repeat? 背景重复
inherit no-repeat repeat repeat-x repeat-ybackground-attachment??背景固定
fixed scrollbackground-position? 背景定位?
数值 top bottom left right center
border-width??边框宽度? (包括各个方向? border-top-width border-right-width border-bottom-width border-left-width)
thin medium thick 数值?border-color?边框颜色
数值 数值 数值 数值 数值:分别代表top、right、bottom、left颜色值?border-style???边框风格
none hidden inherit dashed(点线) solid(实线) double(双线) inset(凹线) outset() ridge(脊线) groove(槽线)
?
5? 列表符号
list-style-type 列表类型
disc(圆点) circle(圆圈) square(方块) decimal(数字) lower-roman(小写罗马数字)
upper-roman(大写罗马数字) lower-alpha(小写字母) upper-alpha(大写字母) nonelist-style-image?图形列表
URL
list-style-position???位置列表
inside outside