CSS2
1.CSS中常用的属性设置
css格式: 选择器{css属性名称:属性值;}
选择器--从htm文件中选中自己需要添加样式的html元素。
1.元素选择器---根据html元素的名称选中被控制的html标记。
2.id选择器--根据给html标记设置的id属性来选中被控制的html标记。
如果要使用id选择器那么首先需要给html标记去设置id属性。
3.类【class】选择器---根据给html标记设置的class属性来选中被控制的html标记。
如果要使用类【class】选择器那么首先需要给html标记去设置class属性。
4.包含选择器--选择所有被父元素包含的子元素。
5.属性选择器--根据html标记的属性来选中被控制的元素
1.元素 [属性名称] { sRules }:选择具有某个属性的元素
2.元素 [属性名称 = value【属性值】 ] { sRules }:选择具有某个属性且属性值等于 value 的元素
6.子元素选择器---选择所有作为E1子对象的 E2 。
选择器分组----将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“,”分割。
注意:css的选择器在使用的时候,不是单一去应用,而是通过不同的组合形式来使用。
1.1.关于字体的css属性设置
color--设置字体颜色[颜色单词/颜色码【#0000ff】]
font-family---设置字体名称[黑体.....]
font-size --设置字体大小【数字px】
font-style--设置字体倾斜【normal | italic | oblique 】
font-weight--设置字体粗细【整百的数字【100~900】】
text-decoration--设置字体的修饰线【none || underline下划线 || overline上划线 || line-through贯穿线 】
text-shadow--文本的文字是否有阴影及模糊效果
text-transform--文本的大小写转换【none | capitalize | uppercase | lowercase 】
line-height--行高【数字px】
letter-spacing--文字之间的间隔 normal | length 【数字px】
word-spacing--单词之间插入的空隔normal | length 【数字px】
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于字体的css属性设置</title>
<style>
p{
color:red;
font-family:楷体;
font-size:30px;
font-style:italic;
font-weight:900;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:10px;
word-spacing:20px;
text-shadow:10px 10px 20px red;
line-height: 30px;
}
</style>
</head>
<body>
<h1>关于字体的css属性设置</h1>
<h2 >color--设置字体颜色[颜色单词/颜色码【#0000ff】]</h2>
<h2>font-family---设置字体名称[黑体.....]</h2>
<h2>font-size --设置字体大小【数字px】</h2>
<h2>font-style--设置字体倾斜【normal | italic | oblique 】</h2>
<h2>font-weight--设置字体粗细【整百的数字【100~900】】</h2>
<h2>text-decoration--设置字体的修饰线【none || underline下划线
|| overline上划线 || line-through贯穿线 】</h2>
<h2>text-shadow--文本的文字是否有阴影及模糊效果</h2>
<h3>text-shadow:10px 0px 0px red;</h3>
<h3>第一个值:水平移动距离 0px 0px red;</h3>
<h3>第二个值:前后移动距离 0px 0px red;</h3>
<h3>第三个值:模糊效果</h3>
<h3>第四个值:阴影颜色</h3>
<h2>text-transform--文本的大小写转换【none |
capitalize | uppercase | lowercase 】</h2>
<