前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
一丶CSS简介
叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化
特点:
1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠
2.使数据和显示分开
3.降低网络流量
4.使整个网站视觉效果一致
5.使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)
二丶CSS的引入方式
行内样式
### 在body标签内
唉不穿的覆盖惠健康
内接样式
### 在head标签内
div{
color: darkmagenta;
}
外接样式-链接式
### 在head标签内
外接样式-导入式
@import url('commons.css');
三丶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非常相似 任何的标签都可以加类,但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类,用空格隔开
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
段落1
段落2
段落3
ID选择器
同一个页面中id不能重复。
任何的标签都可以设置id ,id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
娃哈哈 爽歪歪 QQ星
通用选择器
/*通用选择器:
如果标签没有设置属性,会被统一进行操作.比如:上色
所有的标签都会被选中*/
* {
color: yellow;
}
段落
div标签
四丶CSS的高级选择器
后代选择器用法如下:
CSS简单的四种引入方式
CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例
CSS 文件的4种引入方式
(1)链接式 :在网页的
标签对中使用标记来引入外部样式表文件,使用html规则引入外部css (用得比较多) : < ...
CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:
st ...
CSS的四种基本选择器和四种高级选择器
做个快乐的搬运工:/DYD850804/article/details/80997251
HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)
一.标签选择器
css层叠引入方式有 前端1-----CSS层叠样式表了解 css的引入方式 三大选择器(标签 类 id) 高级选择器...