CSS样式表和选择器

第四天内容

1. 什么是样式表

css 全称是Cascading Style Sheet

Cascading 级联、层叠

Style 样式、风格

Sheet 表

作用：是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

语法：css规则由两个主要的部分构成：选择器，以及一条或多条申明（每条申请由一个属性和一个值组成）

例子：h1{color:red;}

这里的h1就是选择器，{}里面就是申明

2、CSS的引用

（1）标签内定义

例子：<p style=”font-size:12px;”>文本内容</p>

（2）内部样式标签定义

例子：    <style>

P{font-size:12px;}

</style>

（3）外部样式表引入

例子：<linkrel="stylesheet" href="style.css"type="text/css">

 

3、申明的优先级

最高：行内定义

中等：内部样式标签定义

最低：外部样式表引入

同一css定义内容中，可以用!important提升优先级

例子：    <style>

Body{background-color:red !important;}

Body{background-color:blue;}

</style>

4、客户端兼容性

注意：同样的CSS在不同浏览器、同样浏览器的不同版本上显示可能会有

不同的显示（渲染）样式。

例子：    <style>

Ul{margin;0px;}

</style>

<ul>

<li>项目1</li>

<li>项目2</li>

<li>项目3</li>

</ul>

分别用不同浏览器打开

5、css的注释语法

例子：    <style>

/*被注释掉的css内容*/

</style>

6、单位

（1）长度单位：像素（px）

（2）颜色单位：十六进制颜色#eeffdd、可以简写为#efd

 

CSS里的选择器

内部和外部样式列表用来区分渲染对象的选择工具

 

选择器的分类

（1）基本选择器

（2）多元素组合选择器

 

1、基本选择器

*           通用元素选择器，匹配任何元素

标签名      标签选择器，匹配所有标识的标签

.classname  类选择器，匹配所有class属性为classname的元素

#idname     id选择器，匹配所有id属性为idname的元素

2、多元素组合选择器

（1）多元素选择器，多个用逗号分隔，同时匹配所标识的元素

（2）后代元素选择器，多个用空格分隔，匹配所有属于父元素内部的元素