【Michiko】我的学习笔记之 ---前端第二讲CSS

一：CSS介绍
概念：CSS:层叠样式表(Cascading Style Sheets)
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰
所谓层叠，可以将整个网页想象成一层一层的结构，层次高的将会覆盖层次低
css可以分别为网页的各个层次设置样式。

优势:内容与表现分离
网页的表现统一，容易修改。
丰富的样式，使得页面布局更加灵活。
减少网页的代码量，增加网页的浏览速度，节省网络带宽。
运用独立于页面的CSS，有利于网页被搜索引擎搜录。

基本语法
CSS由两个主要的部分构成：选择器，以及一条或多条声明。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来：
p {color:red;text-align:center;}
为了让CSS可读性更强，你可以每行只描述一个属性

注释
CSS注释以 “/” 开始, 以 “/” 结束
二：基本样式
文本样式
1.text-align:设置文本水平对齐方式，常用值：
left right center
2.line-height:设置文本行高属性
3.text-indent：设置文本首行缩进
4.text-decoration:设置文本装饰
none；
underline：设置文本下划线 （超链接默认） ；
line-through：设置文本删除线
背景样式
background-image 设置背景颜色
background-image: url(…); 设置背景图片
background-repeat；平铺
链接样式
一定要遵守这个顺序 :爱恨原则 LoVe HAte
未访问时的链接样式 a:link；
已访问时的链接样式 a:visited
鼠标移动到时的链接样式 a:hover
鼠标点击时的链接样式 a:active
最常用的 a:link a:hover 不要添加过多的链接样式
列表样式
list-style-type
表格样式
border-collapse 合并边框
三：CSS选择器
标签选择器(元素选择器)
文档的元素就是最基本的选择器
如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a{}

ID选择器：要给添加样式的标签设置一个ID名称
可以为标有特定ID的HTML元素指定特定的样式(独一无二)
HTML元素以Id属性来设置ID选择器，CSS中ID选择器以”#”符号来定义。
格式： #ID名{ }

类选择器：就是给要添加样式的标签加上一个类名，关键字class
用于描述一组元素的样式，class选择器有别于id选择器可以在多个元素中使用
在HTML中以class属性表示，在CSS中类选择器以一个点”.”符号显示。
语法：.类名（例如:.class1）{ }

并集选择器:
创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素
或者理解成将多个相同样式定义的选择器以逗号进行分组。

后代选择器
多个选择器以空格分开，组合成包含关系，且右边的选择器从属于左边
即右边的选择器只能在左边的选择器范围内选择
子代选择器和后代选择器很像，不过只选择匹配元素中的直接后代
目标元素为匹配第一个选择器的元素的直接后代,且匹配第二个选择器
用于选择指定标签元素的第一代子元素
语法：第一个选择器>第二个选择器
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

伪类选择
动态伪类选择器：根据条件的改变匹配元素，是相对于文档的固定状态来说的。
:link选择器 选择未访问链接元素
:visited选择器 选择已访问的链接元素
:hover选择器 鼠标悬停在其上的元素
:active选择器 被用户激活的元素，通常意味着用户即将点击该元素

属性选择器:
对带有指定属性的 HTML 元素设置样式
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性

     form input[name = "UserName"]{
    color: red;
    background-color: yellow;
   }

    a[href="#"]{
        color: red;
        font-size: 30px;            
    }

四：CSS样式引入
1内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。
使用