CSS:层叠样式表 用于美化页面,修改标签样式
排版专用标记:<div>与<span>
这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行 以上的数据.如果没有一样,则<span> 与</span>该数据显示前后都不会跳行.
写法分类:
1、内联:写在标签里面,以属性的形式表现 属性名style
格式:<标记名称 style=”属性1:属性值1;属性2:属性值2”>…</标记名称>
例 :
<p style=”font-size:20pt;color:red;text-align:center”>排版样式</p>
2、内嵌:写在head标签中,以标签的形式表现 标签名style
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又必须在<head>..</head>之间.
格式: <head>
<style>
选择器
</style>
</head>
选择器:通过各种方式找元素,例如:标签名 id属性值
选择器格式:
选择器{
样式属性:样式值;
样式属性:样式值;
}
选择器类型:
1、通用选择器: *{}
所有标签都需要用该选择器的属性,包括<head>、<body>
一般不常用,只有几个样式属性:
2、标签选择器: 标签名{}
<head>
<style type=”text/css”>
标记名称{属性1:属性值1;属性2:属性值2;}
标记名称{属性1:属性值2;属性2:属性值2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
以<body>内的标签名称为选择器,具有不唯一性,所有用该标签的内容都包括
3、Id选择器: #id属性值{}
<head>
<style type="text/css">
#定义名称{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
在<body>内的标签名中,定义id属性,以#id属性值为选择器,具有唯一性,id 在 HTML 文档中必须是唯一的。
4、Class选择器:.class属性值{}
<head> <style type=”text/css”> .定义名称1{属性1:属性值1;属性2:属性值2;} </style> </head> <body> <标记名称 class=”定义名称1 定义名称2”>…</标记名称> </body>
在<body>内的标签名中,定义class属性,以.class属性值为选择器,不具备为一性
一个 class可以有多个class值,以空格分开,以优先值确定以哪个为准。
组合选择器
5、后代选择器: 选择器1 选择器2{} (所有内嵌,只要是选择器2 的)
选择器1和选择器2间加空格,予以筛选,表示符合选择器1后代的所有选择器2的内容
6、子类选择器: 选择器1>选择器2{}
与后代选择器不同,只筛选选择器1的子类中的内容
7、并列选择器: 选择器1,选择器2,选择器3,,,,{}
多个选择器间用逗号分开,表示并列的选择器都有效
8、伪类选择器: 选择器:伪类
9、根据属性: 选择器[属性=”属性值”]{}
根据选择器内的某标签的属性值确定内容
3、外部引用:引入外部文件
写在head标签中,以标签的形式表现,标签名 link
<link rel="stylesheet" href="css.css">
在css.css页面中直接输入选择器,不用加style
html中:
<head> <link rel=”stylesheet” type=”text/css” href=2.css> </head>
<body>
<h1>这是一个标题<h1>
<h1 id="color">这是一个标题<h1>
</body>
css中
#color{ color:red }
优先级概念
权值越高,优先级越高,显示优先级高的设置
写法 | 权值 |
内联(行内) | 1000 |
id | 100 |
class | 10 |
标签名 | 1 |
通用* | 0 |
并列选择器,权值可叠加。