CSS选择器
- 语法结构：
选择器{属性:值;属性:值;…….}
- 选择器分类：
- 基础选择器
1.1 标签选择器
1.2 类选择器
1.3 ID选择器 - 复合选择器
标签选择器其实就是html代码中的标签
HTML中标签:<html>、<body>、<h1>、<p>、<img>等等
CSS简单属性:
width：设置宽度，单位px像素
height：高度
color：前景色，也就是文字的颜色
background-color：背景色。
font-size:字体的大小。
设置p标签的背景色为红色，设置H1标签的字体颜色为绿色，设置span标签的文本为14像素
<style type="text/css">
p {
background-color: red;
}
h1 {
color: green;
}
span {
font-size: 14px;
}
</style>
<style type="text/css">
.p1 {
color: green;
}
#my-id {
font-size: 14px;
}
</style>
- 页面布局常见命名规范
| 头 | header |
| 内容 | content/container |
| 尾 | footer |
| 导航 | nav |
| 侧栏 | sidebar |
| 栏目 | column |
| 页面外围控制整体布局宽度 | wrapper |
| 左右中 | left right center |
| 登录条 | loginbar |
| 标志 | logo |
| 广告 | banner |
| 页面主体 | main |
| 热点 | hot |
| 新闻 | news |
| 下载 | download |
| 子导航 | subnav |
| 菜单 | menu |
| 子菜单 | submenu |
| 搜索 | search |
| 友情链接 | friendlink |
| 页脚 | footer |
| 版权 | copyright |
| 滚动 | scroll |
| 内容 | content |
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。（一般不用）其基本语法格式如下：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，设置所有HTML标记字体大小
* { font-size:18px; }
| 属性 | 值 | 描述 |
|---|---|---|
| text-align | center,left,right | 文字居中格式 |
| font-size | 18px | 设置文字大小 |
| font-family | 微软雅黑,宋体 | 设置字体 |
| font-weight | Normal默认，bold粗体，100px | 设置字体加粗 |
| font-style | Normal默认，italic斜体 | 设置字体风格 |
| color | 颜色 | 设置文字颜色 |
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | microsoft yahei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
CSS字体合写语法格式：
选择器{font: font-style font-weight font-size/line-height font-family}
注意:必须有 字体大小 (font-size )和字体(font-family) , 必须严格按顺序写;
css复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，具体如下
1、标签指定式选择器（即…又…）
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special 或 p#one。h3.class { color: red;}
2、后代选择器(包含选择器)
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。.class h3 { color: red;}
3、并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。.class, h3 { color: red; font-size:25px;}
请根据以下Css样式写出对应的html结构
<style>
div.div1 ul.box li, div.div1 p {
color : red;
}
</style>
<style>
div.box p.p1, div.box div.div1 p, p {
color : red;
}
</style>
上一篇： CSS学习篇（二） 选择器
下一篇： HTML常用标签属性的使用