抑郁症健康 > 前端1-----CSS层叠样式表了解 css的引入方式三大选择器(标签类 id) 高级选择器...

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

时间：2019-12-25 11:51:19

相关推荐

前端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><span>div-->span 子标签</span><p><span>span 子标签</span></p><div><span>div-->span 子标签</span></div></div></body>

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

<style>/* 毗邻(兄弟)选择器+ 相连 ,所有的邻居应用样式*/span+a{color: aqua;}</style><body><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>/* 并集选择器逗号分隔,所有的标签都应用样式*/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 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

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

W3C更多~~更全

属性选择器用法如下:?

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

<!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>

如果觉得《前端1-----CSS层叠样式表了解 css的引入方式三大选择器(标签类 id) 高级选择器...》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。