一、CSS层叠样式表介绍

1.什么是CSS？

• CSS指层叠样式表(Cascading style Sheets)
• 样式定义如何显示控制HTML元素,从而实现美化HTML网页。
• 样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题
• 外部样式表(CSS文件)可以极大提高工作效率
• 多个样式定义可层叠为一，后者可以覆盖前者样式

2.CSS的语法

 

格式:选择器{属性:值;属性:值;属性:值;.…….}

案例如下:其中选择器也叫选择符
P{ color:red; text-align:center; } 

3.CSS中的注释

格式：/*...*/

4.在HTML中如何使用CSS样式

共计有三种方式:
(1).内联方式(行内样式)

(2).内部方式(内嵌样式)

(3).外部导入方式（外部链入)

• 优先级:

*当样式冲突时,就采用就近原则，是值css属性离被修饰的内容最近的为主。
*若没有样式冲突则采用叠加效果。

 二、CSS常用选择器

1.常用兼容选择器

• html选择符(标签选择器)
• class类选择符(使用点.将自定义名(类名)来定义的选择符)
•  ld选择符:
• 关联选择符(包含选择符)
• 组合选择符(选择符组)
• 伪类选(伪元素)择符:  

（1）html选择器 

 使用html标签的名字作为选择器。

（2）类选择器

定义：.类名 

对class 进行属性的设置，.cc是指所有class=”cc“的都设置为红色；而li.cc更加的缩小了范围，只是指li标签中class="cc"的属性。

值得注意的是后面又设置了li.dd的颜色是蓝色，因为就近原则（是指距离标签最近的css的设置，也就是后面设置的），所以第四行本来是红色现在要改为蓝色。

（3）id选择器 

 定义：#id名

这里需要注意选择符的优先级。

（4）关联选择符（包含选择符)

格式:选择符1选择符2I选择符3 ...{样式....}
table a{... .}/*table标签里的a标签才采用此样式*/

h1 p{color:red}/*只有h1标签中的p标签才采用此样式*/

例：ol li{color:green}

（5）组合选择符（(选择符组)

格式:选择符1,选择符2,选择符3 ...{样式....}
h3,h4,h5{color:green;}/*h3、h4和h5都采用此样式*/

(6).伪类选(伪元素)择符:

格式:标签名:伪类名{样式....}
a: link {color: #FF0000; text-decoration: none}        /*未访间的链接*/
a:visited {color: #00FF00; text-decoration: none}        /*已访间的链接*/
a : hover {color: #FF0OFF ; text-decoration: underline}        /*鼠标在链接上*/
a:active {color: #0000FF ; text-decoration: underline}        /*激活链接*/

 

2.其他选择器

• 关系选择器:
• 属性选择器
• 结构性伪类选择器:
• 状态伪类选择器
• 其他伪类选择器 

（1）关系选择器

• div>p 选择所有作为div元素的子元素
• pdiv+p选择紧贴在div元素之后p元素
• div~p 选择div元素后面的所有兄弟元素p 

 

 （2）属性选择器:

[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表,其中一个等于value的元素。
[attribute|=value]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素

[attribute*=value]匹配具有attribute属性、且值中含有value的E元素

（3）结构性伪类选择器:

: :first-letter设置对象内的第一个字符的样式。

::first-line设置对象内的第一行的样式。

: before设置在对象前（依据对象树的逻辑结构）发生的内容。

:after设置在对象店（依据对象树的逻辑结构）发生的内容。

:lang(language)匹配使用特殊语言的E元素。

:element1~element2:
:first-of-type匹配同类型中的第一个同级兄弟元素

:last-of-type匹配同类型中的最后一个同级兄弟元素

:only-of-type匹配同类型中的唯一的一个同级兄弟元素

:only-child匹配父元素仅有的一个子元素 

*:nth-child(n)匹配父元素的第n个子元素

:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素

*:first-child匹配父元素的第一个子元素

:last-child 匹配父元素的最后一个子元素

: root匹配元素在文档的根元素。在HTML中，根元素永远是HTML

:empty匹配没有任何子元素（包括text节点）的元素

（4）*状态伪类选择器

: link设置超链接a在未被访间前的样式。
:visited 设置超链接a在其链接地址已被访间过时的样式

:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
*:hover 设置元素在其鼠标悬停时的样式
* :focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配用户界面上处于可用状态的元素

:disabled匹配用户界面上处于禁用状态的元素

:checked匹配用户界面上处于选中状态的元素

: not(selector)匹配不含有selector选择符的元素

: : selection设置对象被选择时的样式 

（5）其他伪类选择器N

E:not(s) :{attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg){background-color:#00FFO0;}

三、CSS常用属性

1.color颜色属性

 

 

 2.字体属性：font

font:简写

*font-size:        字体大小: 20px，60%基于父对象的百分比取值
*font-family :        字体:宋体，Arial
font-style:        normal正常;italic斜体;oblique倾斜的字体
*font-weight:        字体加粗: bold
font-variant:        small-caps小型的大写字母字体
font-stretch:        [了解]文字的拉伸是相对于浏览器显示的字体的正常宽度（大部分浏览器不支持）。

3.文本属性

text-indent:        首行缩进:text-indent :2em;
text-overflow:        文本的溢出是否使用省略标记（...)。clip|ellipsis（显示省略标记)
*text-align:        文本的位置:left center right
text-transform:        对象中的文本的大小写: capitalize(首字母)|uppercase大写|lowercase小写*text-decoration:        字体画线:none无、underline下画线，line-through贯穿线
text-decoration-line:        [了解]文本装饰线条的位置（浏览器不兼容)
*text-shadow:        文本的文字是否有阴影及模糊效果
vertical-align:        文本的垂直对齐方式
direction:        文字流方向。ltr / rtl
white-space:nowrap;/*强制在同一行内显示所有文本*/ 

*letter-spacing:        文字或字母的间距

word-spacing:        单词间距
*line-height:        行高
*color:        字体颜色

4.背景属性：background

background:简写

*background-color:背景颜色

*background-image: 背景图片

*background-repeat:是否重复，如何重复?(平铺)

*background-position:定位

background-attachment:是否固定背景，
                              scroll:默认值。背景图像是随对象内容滚动

                              fixed:背景图像固定

css3的属性:
*background-size:背景大小，如 background-size:100px 140px;

多层背景:
background : url(test1.jpg） no-repeat scroll 10px 20px,
                      url(test2.jpg)no-repeat scroll 50px 60px,

                      url(test3.jpg)no-repeat scroll 90px 100px;
background-origin:content-box , content-box, content-box;

background-clip:padding-box,padding-box, padding-box;

background-size:50px 60px , 50px 60px , 50px 60px;

5.边框

 

border:宽度 样式 颜色;

border-color;
border-style;边框样式:solid实现，dotted点状线，dashed虚线

border-width:
border-left-color;
border-left-style;

border-left-width:
csS3的样式
border-radius:圆角处理
box-shadow:        设置或检索对象阴影

margin:        检索或设置对象四边的外延边距,如margin: 10px;margin: 5px auto;
margin-top:        检索或设置对象顶边的外延边距
margin-right:        检索或设置对象右边的外延边距
margin-bottom:        检索或设置对象下边的外延边距

margin-left:        检索或设置对象左边的外延边距

6.position定位

*position:        定位方式:absolute(绝对定位)、fixed（固定)（relative定位参考
可对内部相对absolute定位)
*z-index:        层叠顺序，值越大越在上方。
*top:        检索或设置对象与其最近一个定位的父对象顶部相关的位置
right:        检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom:        检索或设置对象与其最近一个定位的父对象下边相关的位置
*left:        检索或设置对象与其最近一个定位的父对象左边相关的位置

7.Layout布局

*display:        是否及如何显示:none隐藏，block块状显示...
*float:        指出了对象是否及如何浮动:值none \ left l right
*clear:        清除浮动:none \ left | right / both两侧
visibility:        设置或检索是否显示对象。visible|hidden|collapse。
                      与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip:        检索或设置对象的可视区域。区域外的部分是透明的。rect(上-右-下-左)如:clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow:         超出隐藏:hidden，visible:不剪切内容
overflow-x:        内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y:        内容超过其指定高度时如何管理内容