css指的是层叠样式表 样式的定义html如何进行显示.
样式通常存储在样式表中,解决内容与表现分离的问题.
css语法
由选择器 属性和属性值三部分构成.
p
{
color:red;
text-align:center;
}
css中的注释位/*ccc*/ html中的注释位<!--ccc-->
css中有id选择器和class选择器
#para1 { text-align:center; color:red; }
id为单个元素的 class可以有多个元素的.
.center {text-align:center;}
也可以所有的p元素使用class = center
p.center {text-align:center;}
重点 插入样式表有3中形式
外部样式表 内部样式表 和内联样式
外部样式表通过link标签链接到样式表中 <link>标签必须在文档的head中
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表 通过在head中包含style标签来进行显示
<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>
一般情况下 加载优先级如下
内联样式 > 内部样式 > 外部样式 >浏览器默认样式
注意:如果外部样式放在内部样式的后面,则外部样式会覆盖内部样式.
文本的对齐方式,可以用text-align 进行实现 text-align:center;left;right;
文本修饰可用text-decoration 来实现
h1 {text-decoration:overline;}
文本转换 将所有句子变成大写或小写字母,或首字母大写.
p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
文本缩进:可用text-indent:10px来实现.
优先级: 标签权重 1 如h1 类权重 10 如class id权重 100 如id 内联样式最高为1000 如style=
style中修改样式使用font-size = "" 这种风格 在js中修改样式采用驼峰式风格,a.fontSize = 10px