前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

一丶CSS简介

   叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

​   特点:

      1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠

      2.使数据和显示分开

      3.降低网络流量

      4.使整个网站视觉效果一致

      5.使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

二丶CSS的引入方式

行内样式

### 在body标签内
<!-- 行内样式:优先级最高-->
<p style="color: darkcyan">唉不穿的覆盖惠健康</p>

内接样式

### 在head标签内
<!-- 内接样式 -->
<style>
div{
color: darkmagenta;
}
</style>

外接样式-链接式

### 在head标签内
<!-- 外接样式 链接式 -->
<link rel="stylesheet" href="commons.css">

外接样式-导入式

<!--外接样式 导入式 -->
<style>
@import url('commons.css');
</style>

三丶CSS的基本选择器

​      CSS优先级 : id选择器 > 类选择器 > 元素选择器

标签选择器

​      标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“

body{
color:gray;
font-size: 12px;
} /*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}

类选择器

​      所谓类:就是class . class与id非常相似 任何的标签都可以加类,但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类,用空格隔开

<style>
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
</style> <body>
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
</body>

ID选择器

      同一个页面中id不能重复。

​      任何的标签都可以设置id ,id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

<style>
#box{
background:green;
} #s1{
color: red;
} #s2{
font-size: 30px;
}
</style> <body>
<div id="box">娃哈哈</div>
<div id="s1">爽歪歪</div>
<div id="s2">QQ星</div>
</body>

通用选择器

<style>
/*通用选择器:
如果标签没有设置属性,会被统一进行操作.比如:上色
所有的标签都会被选中*/
* {
color: yellow;
}
</style> <body>
<p>段落</p>
<div>div标签</div>
</body>

四丶CSS的高级选择器

后代选择器用法如下:

上一篇:1226: [SDOI2009]学校食堂Dining - BZOJ


下一篇:hdoj4871