css 选择器(第四天)

CSS的发展历程

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

CSS字体样式属性

CSS Unicode字体
font-size:字号大小
font-family:字体
font-weight:字体粗细
font-style:字体风格

开发者工具（chrome）

此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

“按F12”或者是 “shift+ctrl+i” 打开 开发者工具。

菜单： 右击网页空白出—查看

选择器

标签选择器（元素选择器）

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

通配符选择器

、* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
注意：
为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}

链接伪类选择器

• :link /* 未访问的链接 */
• :visited /* 已访问的链接 */
• :hover /* 鼠标移动到链接上 */
• :active /* 选定的链接 */

 		 /* ：hover 鼠标移到链接上 */
        a:hover{
            color: red;
        }

        /* :link 未访问链接 */
        a:link{
            color: orange;
        }

结构(位置)伪类选择器（CSS3)

• :first-child :选取属于其父元素的首个子元素的指定选择器
• :last-child :选取属于其父元素的最后一个子元素的指定选择器
• :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
• :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
  n 可以是数字、关键词或公式

li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}

目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {
  	color: red;
  	font-size: 30px;
}

CSS注释

CSS规则是使用 /* 需要注释的内容 / 进行注释的，即在需要注释的内容前使用 “/” 标记开始注释，在内容的结尾使用 “*/”结束。

CSS外观属性

color:文本颜色
line-height:行间距
text-align:水平对齐方式
text-indent:首行缩进
letter-spacing:字间距
word-spacing:单词间距

颜色半透明(css3)：

color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)

文字阴影(CSS3)

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

注意：
前两项是必须写的。 后两项可以选写。

sublime快捷方式

sublime可以快速提高我们代码的书写方式

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了