HTML学习-CSS
1、css语法
(1) 可以将css样式编写到head中的style标签里，将样式表编写的style标签中，然后通过css选择器选中指定元素
<style type="text/css">
p{
color:red;
font-size:40px;
}
(2)还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入当前的页面中。
<link rel="stylesheet" type="text/css" href="style.css"> 前两个不改，只改后一个（为 设置内容的位置）
2、块元素和内联
（1）块元素<div>标签（独占一行元素，主要对页面进行布局的）
p、h1、h2、h3.....也是块元素
（2）span是一个内联元素（只占自身大小，不会独占一行，专门用来选中文字，设置样式）
a、img、igrame、span
3、常用选择器
（1）元素选择器（可以选择页面中所有指定元素）语法：标签名{ }
（2）id许选择器（通过id属性值选中唯一的元素） 语法：#id属性值{ }
class属性类似id属性，但是class属性可以重复（通过元素class属性值选中一组元素） 语法： .class属性值{}
同时为一个元素设置多个class属性，多个值之间使用空格隔开
（3）选择器分组（可以同时选中多个选择其对应的元素）语法：选择器1，选择器2，选择器n{ }
（4）通配选择器（选择页面中所有的元素）语法：*{}
p {
color:blue;
font-size:40px;
}
#p1{
color:green;
}
.p2{
color:red;
}
.p3{
font-size:50px;
}
<p>这是css学习</p>
<p id="p1">这是css学习</p>
<p class="p2">这是css学习</p>
<p class="p2 p3">这是css学习</p>
4、伪类选择器（专门表示元素的一种特殊状态，例如访问过的超链接、普通链接、获取焦点的文本框）
正常链接：a：link 访问过的链接： a：visited(只能定义字体颜色)
鼠标划过的链接：a：hover 正在点击的链接：a：active
a:link{ color:yellow;}
<a href="#">正常链接</a>
a:visited{ color:red;}
<a href="#">访问过的链接</a>
(1) input（创建文本框文本框） focus(文本框获取焦点)
input：focus { background：yellow; }
<input type="text"/>
(2)selection（为p标签中选中的内容使用样式）
p：：selection{ background-color：yellow;}
(3)伪元素
first-letter（为标签中第一个元素设置特殊样式）
first-line（为标签中第一行设置特殊样式）
before（表示元素最前边的部分，一般都需要结合content这个样式一起使用，通过content可以向befor或after的位置添加一些内容）
after（表示元素最后边的部分）
例如：为p标签中第一个字符设置一个特殊样式
p:first-letter{ color:red; }
<p>我是一个段落</p>
5、属性选择器(可以根据元素的属性或属性值来选取指定元素)语法：
[属性名]选取含有指定属性的元素 例如：p[title=hello]{ color=red； }
[属性名=“属性值”]选取含有指定属性值的元素
[属性名^=“属性值”]选取属性值以指定内容开头的元素
[属性名$=“属性值”]选取属性值以指定内容j结尾的元素
[属性名*=“属性值”]选取属性值包含指定值的内容的元素
title属性（可以给任何标签指定，当鼠标移入到元素上时，title属性值会作为提示文字显示） 语法：<p title="hello">我是一个段落</p>
6、子元素的伪类
：first-child 可以选择中第一个子元素 语法： p：first-child{ }
：last-child 可以选择最后一个子元素
：nth-child 可以选择任意一个子元素 语法： p：nth-child（1、3、...n、odd、even）{ } odd表示奇数的子元素，even表示偶数的子元素
：first-of-type ：last-of-type这些与 ：first-child类似，只是child是在所有的子元素中排列而type在当前类型的子元素中排列
7、否定伪类（可以从已选中的元素中剔出某些元素）语法：：not（选择器）
p：not（.hello）{ }
<p>我是一个p标签</p>
<p class=”hello“>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
