前端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的高级选择器

后代选择器用法如下:?

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

<style>/*后代选择器使用 '空格' 表示后代选择器*/div span {color: peachpuff;}
</style>      <body><!--后代选择器使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）--><div>父选择器<span>子代选择器</span><div><p><span>重孙代选择器</span></p><span>孙代选择器</span></div></div>
</body>

子代选择器用法如下:?

使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

<style>/*子代选择器> 号, 只找子代div标签的span儿子标签*/div>span{color: darkorange;}
</style>      <body><!--子代选择器> 号,找到div下的所有的子标签--><div><span>div-->span  子标签</span><p><span>span 子标签</span></p><div><span>div-->span 子标签</span></div></div>
</body>

毗邻(兄弟)选择器用法如下:?

<style>/*  毗邻(兄弟)选择器+ 相连 ,所有的邻居应用样式*/span+a{color: aqua;}
</style>      <body><!--邻居选择器+ 号相连, span标签的 a标签应用样式--><div><a href="#">第一个a标签</a><span>span 标签 </span><div><span>span标签</span><a href="#">第二个a标签</a></div><div><a href="#">第三个a标签</a></div><a href="#">第四个a标签</a><span >span 标签 </span><a href="#">第五个a标签</a></div>
</body>

弟弟选择器用法如下:?

<style>/*  弟弟选择器~ 相连,在div之下的都是弟弟标签,都应用样式,嵌套必须重新定义div,否则无效*/div~span{color: darkturquoise;}</style>      <body><!--弟弟选择器~ 号 ,只找所有的弟弟,在其之下的都是弟弟标签--><div>哥哥1<div><span>这是孙代标签</span></div><span>这是嵌套的弟弟</span></div><hr><span>这是离得近的弟弟标签</span><span>这是离得近的弟弟标签</span><span>这是离得近的弟弟标签</span><hr><div>哥哥2</div><a href="#">123</a><label>这是邻居</label><br><span>这是离得远的弟弟标签</span>
</body>

并集选择器(组合选择器)用法如下:?

多个选择器之间使用逗号隔开.表示选中的页面中的多个标签.一些共性的元素,可以使用并集选择器

<style>/*  并集选择器逗号分隔,所有的标签都应用样式*/ul,ol,span{background-color: darkturquoise;}
</style>      <body><!--并集选择器(组合选择器)逗号分隔 , 所有的标签都应用样式--><ul><li>u-li1</li><ul><li>u-li2</li></ul></ul><ol><li>o-li</li></ol><div><div> <span>span标签</span></div></div><span>123<br><span>span标签</span></span>
</body>

交集选择器用法如下:?

使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器语法：div.box1.box2那么它表示两者选中之后元素共有的特性。

<style>/*交集选择器*/div.box1.box2{background-color: red;width: 200px;height: 200px;}div.box1{background-color: green;width: 200px;height: 200px;}
</style>      <body><!--交集选择器点( . ) , 应用符合div标签的类选择器的标签--><div class="box1 box2">box1box2</div><div class="box2">box1</div><div>aaa<div class="box1">这是嵌套的div</div></div><span class="box1 ">span标签</span></body>

伪类选择器用法如下:?

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte

 <style>a:link{/* 没有浏览过,应用此颜色 */color: cornflowerblue;}a:visited{/* 浏览过后,应用此颜色*/color: chartreuse;}a:active{/* 鼠标点击事件 */color: rebeccapurple;}a:hover{/* 鼠标悬浮事件*/color: firebrick;}input:focus{/* 点击聚焦事件*/background-color: fuchsia;}div{width: 100px;height: 100px;background-color: lightgray;}div:hover{/* div标签 鼠标悬浮事件 */background-color: pink;}
</style>
<body><!--####    伪类选择器a : link visited activeinput: focus通用: hover--><a href="http://www.xiaohuar.com">这是应用了伪类选择器</a><input type="text"><div></div>
</body>

伪元素选择器用法如下:?

W3C更多~~更全

<style>/* 伪元素选择器   */p:first-letter{/* 在文本的最开头用于第一个字 */color: greenyellow;}div:before{/* 在文本的最开头添加content 内容,并应用样式 */content: '$$$';color: pink;}span:after{/* 在文本的最末尾添加content 内容,并应用样式 */content: 'abc';color: aqua;}
</style><body><!--####    伪元素选择器标签:first-letter  在文本的最开头用于第一个字标签:before   在文本的最开头添加content 内容,并应用样式标签:after    在文本的最末尾添加content 内容,并应用样式--><p>你好啊~~,今天吃了吗1</p><div>你好啊~~,今天吃了吗2</div><span>你好啊~~,今天吃了吗3</span>
</body>

属性选择器用法如下:?

属性选择器，字面意思就是根据标签中的属性，选中当前的标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 属性选择器语法:属性选择器 [属性]/[属性='值']# 单个属性 : input[type='text']# 多个属性 : input[type='password'][id='in']*/input[type='text']{background-color: mediumspringgreen;}input[type='password'][id='in']{background-color: gold;}</style>
</head>
<body>
<div><input type="text"><input type="password" id="in">
</div>
</body>
</html>

转载于:https://www.cnblogs.com/dengl/p/11324001.html