目录
1.基础选择器(单个选择器组成)：标签/类/id/通配符选择器
基础用法
1.字体属性：
1.字体:font-family:"宋体"，"微软雅黑..."(不同字体用（,）隔开，表示优先级，从前往后若无宋体，就是微软)
2.字体大小font-size:
p{
font-size:16px;
}
3.字体粗细font-weight:normal/bold(粗)/bolder(特粗)/lighter(细)/number(100/200/...900(400=normal)):
<style>
.bold{
font-weight:bold/700/lighter
}
</style>
<p class="bold"></p>
4.文字样式font-style:italic(斜体)/normal(正常)
p{
font-style:normal
}
5.复合书写（font:style(italic) weight(700) size/lin-height(16px) family(宋体)）（顺序不可更改且字号与字体必须有）2.文本属性：
1.color:red.../16进制/rgb(255.0.0/100%.0%.0%)
2.text-align:center(居中对齐)/right/left
3.text-decoration(文本装饰):underline/line-through(删除线)/overline(上划线)/none(取消默认下划线)
4.text-indent(文本缩进):2em(em是1个文字间距)/10px(10是当前文字像素大小)
5.line-height(行间距):16px
div{
color/text-align/text-decoration/...:red(div文本均变为red)
}3.行内及块级元素
1.块元素:
div/p/h/ul/ol/li
特点:1.独占一行
2.高，宽，外边距及内边距都可控制
3.宽度默认是容器(父级宽度)的100%
4.内部可放块级和行内元素
注意:1.文字类的元素不可用块级元素
2.<p>用于存放文字，所以不可放块级元素
3.<h1>...等都不可放块级元素
2.行内元素:
<a>/<strong/b/em/i/del/s/ins/u/span>...
特点:1.一行可写多个
2.宽高直接设置是无效的（只会改变行内背景）
3.默认宽度就是他本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
注意:1.链接内不可再放链接
2.特殊情况链接<a>内可以放块级元素，但<a>转换一下块级模式最安全
3.行内块级元素:
<(img/)/(input/)/td> (既有块元素又有行内元素特点)
特点:1.和相邻行内元素在一行上，但他们间会有空白间隙，一行可以显示多个
2.默认宽度就是它本身内容的宽度
3.高度，行高。外边距及内边距都可控制
<style>
input{
width:248px;
height:35px;
}4.表单域及表格
1.<table></table>用于定义表格标签
2.<tr></tr>定义表格的行，必须在<table>内
3.<td></td>用于定义表格中的单元格，必须在<tr>内
4.字母td指表格数据，即数据单元格的内容
5.<th>表示HTML表格的表头部分
6.<thead>标签表格的头部区域（在<table内但可以包含<tr/th/td）,内部必须有<tr>
7.<tbody>标签表格的主体区域,用于放数据本体（也放在<table内）合并单元格:
1.跨行合并:rowspan="合并单元格个数"即y轴
2.跨列合并:colspan="合并单元格个数"即x轴
<form>(用来定义表单域，以实现用户数据收集)
.....
</form><form action="url地址" method="提交方式"，name="表单域名称">(method可以是post/get用于设置数据的提交方式，name用于指定表单名称，以区分同一页面的多个表单域)
各种表单元素
</form>
<input/>
<input type="属性值" name="名称" vaule="在文本框里显示"/>:输入表单元素
type值:1.button(按钮)(<input type="button" vaule="获取验证码"/>)
2.checkbox:定义复选框
3.file:定义输入字段和"浏览"按钮，供文件上传
4.hidden:定义隐藏的输入字段
5.image:定义图像形式的提交按钮
6.password:密码（字符会被隐藏）
7.radio:单选
8.reset:设置重置按钮（<input type="reset" vaule="重新填写"/>
9.submit:提交按钮，把表单数据发送到服务器（默认名称提交，可以用value=""改名称）
10.text:定义单行输入字段，用户可在其中输入文本，默认为20个字符
checked:默认选中，放在input中
maxlength:最大长度<lable>标签:当点击标签内部文本时，流浪器自动将焦点转到对应表单元素上
<lable>标签的for属性应当与相关元素的id的属性相同<select>选择表单
<option selected="selected">选项</option>(默认选中项)
....
</select>
<textarea rows="" cols="">:用于定义多行文本输入的控件
rows指行数，cols指每行字符数
5.列表
无序列表:(只能有<li>标签，但可以在<li>中放任意标签)
<ul>
<li>列表1</li>
........
</ul>
有序列表:(会自动加序号:1,2,3...,其他与无序列表一样)
<ol>
<li>...</li>
....
</ol>
自定义列表:(只能出现<dt><dd>.....<dt/dd>可放任意标签)
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
....
</dl>
6.基础符号：
加粗：<strong></strong>,<b></b> 倾斜:<em></em>,<i></i> 下划线:<ins></ins>,<u></u> 删除线:<del></del>,<s></s> <div>占一行 <span>文本多大占多大 <img/>图像标签，但必须搭配src使用<img src=""/>,src指图像路径 height:图像高 width:图像宽 border:图像边框的粗细 alt:替换文本不能显示的文字 title:提示文本，把鼠标放图像上是显示的文字
7.链接：
<a href="跳转目标" target="跳转方式">文本或图像</a> href:用于指定链接url地址，当标签应用为href时，他有了超链接功能 target:用于指定链接打开的方式，_self为默认打开，即在当前窗口打开，_blank跳转页面打开 内部链接:直接在href处输入地址即可 空链接:可用#代替(在链接未想好时) 下载链接:若链接为压缩包，则自动下载 锚点链接:当我们点击链接时，可快速到页面某个位置 1.在href处，设置属性#名字的形式，如<a href='#two'>第二集</a> 2.找到目标位置标签，里面加id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>
8.背景设置
background-color:背景颜色transparent(默认透明)
透明度opacity不仅仅可以修改颜色的透明度还可以修改字体的透明度
#d2{background-color:black;opacity:0.3;color:blue;}background-image:url(图像地址)背景图像(默认无)
background-repeat:no-repeat(图像不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/repeat(平铺)背景平铺
background-position:x,y(坐标，可用方位名词或精确单位)
background-position:center(中间对齐) top(顶部对齐);top left=left top(左上角对齐)
background-position:20px(x轴) 50px(y轴)；(background-color:背景颜色transparent(默认透明)
background-image:url(图像地址)背景图像(默认无)
background-repeat:no-repeat(图像不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/repeat(平铺)背景平铺
background-position:x,y(坐标，可用方位名词或精确单位)
background-position:center(中间对齐) top(顶部对齐);top left=left top(左上角对齐)
background-position:20px(x轴) 50px(y轴)；(前面为x轴，后面为y轴)
background-position:center 20px(水平居中对齐，垂直距离顶部是20像素)
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment:scroll(图像随页面滚动而滚动)/fixed(图像固定,不动)【只有两个属性值】
background:没有固定顺序，一般是颜色，地址，平铺，位置，滚动background:rgba(0,0,0,0.3);最后一个参数是alpha透明度，取值范围在0-1之间，0可以省略（.3）
在图像下方做标识，如下图
9.特殊符号
空格
> 大于号
< 小于号
& &和号
© ©版权
® ®注册商标
¥ ¥
±: 正负号+—
÷:除号
×:乘号
²:平方2
³:立方3
°:摄氏度样式表：
1.内部样式表：
1.是写到HTML页面内部，将所有css代码抽取，单独放在一个style标签中
2.style标签理论上可以html文档的任何地方，但一般都会放在head标签中
3.通过这个可以控制当前页面的元素样式设置
<style>
div{
color:red
...
}
</style>2.行内样式表：
1.修改简单样式(直接在标签内修改)：
<div style="color:red;font-size:12px"></div>3.外部样式表（适合样式较多时使用）
新建css一个文件，通过<link rel="stylesheet" herf="新建的文件名" (也可在后加type="text/css")/>
rel 属性规定当前文档与被链接文档之间的关系
只有rel属性的 "stylesheet" 值得到了所有浏览器的支持，其他值只得到了部分地支持。
rel的value值:
alternate 文档的替代版本（比如打印页、翻译或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
css基础选择器：
选择器：基础选择器，复合选择器
1.基础选择器(单个选择器组成)：标签/类/id/通配符选择器
color:(颜色) font-size:(像素大小)
2.标签选择器：(按标签名分类)
<head>
<style>
p/span/div{
color:green
}
</style>
3.类选择器:(可单独选择一个)
<style>
.red/sting{ (一定有点(.),red可以用其他值换，但不可用标签名)
color:red
}
</style>
<body>
<ul>
<li class="red/sting">qq</li>(内部要有class属性且属性值与style相同)
.... (class=''可以写多个属性值，中间用空格隔开)
</ul>
4.id选择器(只可调用一次)
#id{
属性：属性值
}
#pink{
color:red
}
<div id="pink"> </div>
5.通配符:*{}
*{
color:red
}
把所有标签均改为红色
复合选择器：
1.后代选择器(包含选择器)：（重点）
元素1，元素2(样式声明) 元素间用空格隔开
2.子元素选择器：元素1(父级)>元素2(子级)
3.并集选择器：（重点）
可以选择多组标签为他们定义相同样式，是各选择器用（,）链接的结果
div，p,
.pig li{
color:red
}
</style>
<body>
<div>oo</div>
<p>..
<ul class="pig">
<li>...</li>(三种均变为红色)
...
</ul>
<span>(不变)
4.链接伪类选择器：（重点）
a:link 选择所有未被访问的链接 a:visited 选择所有已被访问的链接 a:hover 选择鼠标指针位于其上的链接 a:active 选择活动链接（鼠标按下未弹起的连接） 顺序必须是l>v>h>a
5.focus伪类选择器：为了获取焦点的表单元素
input:fouce{
background-color:yellow;
}
3056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
