HTML(WEB)开发day03
作者：gqk
1，多类名选择器：(一个标签给定多个class属性值)
<style> .red{ color:red; } .font2{ font-size:20px; } </style> <div class="red font20"></div>
注意：多类型选择器和class的顺序没有关系，和样式的上下顺序有关系，比如演示 .font2 中编写 color：blue；
2，id选择器（根据id找到对应的选择器）
#id{
属性1：属性1值；
}
注意：id选择器只能使用一次 class选择器可以使用多次
3，通配符选择器
*{
属性1：属性1值；
}
一：CSS字体样式属性
font-size：字号的大小
用于设置字体的大小，该属性可以使用相对的长度单位，也可以使用绝对单位，长度单位比较常用，推荐使用像素px；
font-family：用于设置字体，网页中常用的字体，宋体，微软雅黑，
--设置字体为宋体
p{
font-family:"宋体";
}
注意：可以指定多个字体，中间以“,”隔开，表示如果浏览器不支持第一个字体会去找第二个字体，如果都没有回去执行浏览器默认字体
常用技巧：
1，现在网页中常用14px+ 2，尽量使用偶数的数字字号。ie6使用奇数会有bug 3，各种字体之间必须使用英文状态下以逗号隔开 4，中文字体需要加引号，英文字体一般不需要加引号，当设置英文字体时，英文字体必须设置在中文字体之前 5，如果字体中有特殊符号比如空格，#，$,必须加引号比如“Times New Roman” 6，尽量使用系统默认字体，
CSS Unicode字体
在css中设置字体名称，直接写中文是可以的，但是在文件编码中（UTF-8）不匹配时会产生乱码，xp系统就不支持类似的微软雅黑字体
解决方案：
1，可以使用英文：比如 font-family："Microsoft YaHei"；
2,可以使用Unicode来设置字体：比如 font-family："\5B8B\4F53"；
font-weight：字体的粗细
我们之前学习的b标签，strong标签之外，还可以使用css来控制字体的粗体
设置或检索对象中的文本字体的粗细。
语法：
font-weight：normal | bold | bolder | lighter | <integer>
说明：
normal： 正常的字体。相当于number为400
bold： 粗体。相当于number为700。
bolder： 特粗体。也相当于strong和b对象的作用
lighter： 细体
<integer>： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style：字体风格
设置或检索对象中的文本字体样式。 语法： font-style：normal | italic | oblique 默认值：normal 说明： normal： 指定文本字体样式为正常的字体 italic： 指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique oblique： 指定文本字体样式为倾斜的字体
font：综合设置字体样式（重点）
说明：设置或检索对象中的文本特性。该属性是复合属性。
语法：
选择器{
font：font-style font-weigth font-size/line-height font-family;
}
注意：
使用第一种声明方式参数必须按照如上的排列顺序，且font-size和font-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
CSS外观属性
color：文本颜色：
取值方式有如下三种
1，需定义的颜色：red，green，yellow等 2，十六进制：#FF0000,#FF6600等，在实际开发中此方式用的最多 3，RGB代码:红色为rgb（255，0，0）或rgb（100%，0%，0%）
line-height：检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
语法： line-height：normal | <length> | <percentage> | <number> 默认值：normal 说明： normal： 允许内容顶开或溢出指定的容器边界。 <length>： 用长度值指定行高。可以为负值。 <percentage>： 用百分比指定行高，其百分比取值是基于字体的高度尺寸。可以为负值。 <number>： 用乘积因子指定行高。可以为负值。
text-align：设置或检索对象中内容的水平对齐方式。
语法： text-align：left | center | right 默认值：start 说明： left： 内容左对齐。 center： 内容居中对齐。 right： 内容右对齐。 start： 内容对齐开始边界。（CSS3）
text-indent：检索或设置对象中的文本的缩进。
语法： text-indent：<length> | <percentage> 默认值：0 说明： <length>： 用长度值指定文本的缩进。可以为负值。 <percentage>： 用百分比指定文本的缩进。可以为负值。 建议使用em作为单位，，1em就是一个汉字的宽度，2em就是两个字的宽度
text-decoration：复合属性。检索或设置对象中的文本的装饰。
语法：
text-decoration：none || underline || blink || overline || line-through
说明：
none：无装饰
underline：下划线
blink：闪烁
line-through：贯穿线
overline：上划线
关系选择符：
1，包含选择符：
语法：
E F{ sRules }
说明：
选择所有被E元素包含的F元素。
<style>
ul li{color:#f00;}
</style>
</head>
<body>
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
2，子选择符：
语法：E>F{ sRules }
说明：子选择器
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>子选择符 (E>F)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
.test>li>a{color:#f00;} /* 让li下面的第一个a标签变色 */
</style>
</head>
<body>
<ul class="test">
<li>
<a href="?">列表项目1</a>
<ul>
<li><a href="?">项目列表1.1</a></li>
<li><a href="?">项目列表1.2</a></li>
</ul>
</li>
<li>
<a href="?">列表项目2</a>
<ul>
<li><a href="?">项目列表2.1</a></li>
<li><a href="?">项目列表2.2</a></li>
</ul>
</li>
<li><a href="?">列表项目</a></li>
<li><a href="?">列表项目</a></li>
</ul>
</body>
</html>
3，相邻选择符号
语法：
E+F{ sRules }
说明：
选择紧贴在E元素之后F元素。
<style>
p+p{color:#f00;} 相邻元素
</style>
</head>
<body>
<div class="test">
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
</div>
4，兄弟选择器：
语法：
E~F{ sRules }
说明：
选择E元素后面的所有兄弟元素F
<style>
p~p{color:#f00;}
</style>
</head>
<body>
<div class="test">
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<div>
<p>dasdasdasd</p>
</div>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
</div>
伪类链接选择器
1，E:link
语法：E:link{ sRules }
说明：
设置超链接a在未被访问前的样式。
<style>
a:link{color:pink;}
.external:link{color:red;}
</style>
</head>
<body>
<ul>
<li><a href="?" class="external">外部链接</a></li>
<li><a href="?">内部链接</a></li>
<li><a href="?" class="external">外部链接</a></li>
<li><a href="?">内部链接</a></li>
</ul>
</body>
2，E:hover
语法：
E:hover{ sRules }
说明：
设置元素在其鼠标悬停时的样式。
<style>
h1{font-size:16px;}
a,div{display:block;border:1px solid #ddd;}
a:hover{background:#ddd;color:#f00;}
div:hover{background:#ddd;color:#f00;}
</style>
</head>
<body>
<h1>请将鼠标分别移动到下面2个元素上</h1>
<a href="?">我是一个a</a>
<div>我是一个div</div>
</body>
E:active：
语法：
E:active{ sRules }
说明：
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
<style>
h1{font-size:16px;}
a,div{display:block;margin-top:10px;padding:10px;border:1px solid #ddd;}
a:active{display:block;background:#ddd;color:#f00;}
div:active{background:#ddd;color:#f00;}
</style>
</head>
<body>
<h1>请将分别激活(点击与释放之间)下面2个元素</h1>
<a href="?">我是一个a</a>
<div>我是一个div</div>
</body>
