前端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的高级选择器
后代选择器用法如下:
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器的更多相关文章
- CSS简单的四种引入方式
CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...
- CSS 文件的4种引入方式
(1)链接式 : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css (用得比较多) : < ...
- CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
- CSS的四种基本选择器和四种高级选择器
做个快乐的搬运工:https://blog.csdn.net/DYD850804/article/details/80997251
- HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）
一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS引入方式的区别详解
在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...
- CSS的引入方式
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both
1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...
随机推荐
- GitHub 下载代码命令并且导入到IDEA环境
git clone项目到本地(项目有master和其他分支) 1.首先新建一个空文件夹,在文件夹里面git初始化操作,在文件夹的根目录下,右键选择git bash here,在弹出窗体中: ...
- LA2955 Vivian难题——梅森素数
题意 输入 $k$(1 \leq k \leq 100)个正整数 $p_1, p_2, ..., p_k$(1 < p_i < 2{31}),找出 $k$ 个非负整数 $e_i$ 使得 $ ...
- LeetCode 1123. Lowest Common Ancestor of Deepest Leaves
原题链接在这里:https://leetcode.com/problems/lowest-common-ancestor-of-deepest-leaves/ 题目: Given a rooted b ...
- LeetCode 528. Random Pick with Weight
原题链接在这里:https://leetcode.com/problems/random-pick-with-weight/ 题目: Given an array w of positive inte ...
- LeetCode 987. Vertical Order Traversal of a Binary Tree
原题链接在这里:https://leetcode.com/problems/vertical-order-traversal-of-a-binary-tree/ 题目: Given a binary ...
- Mybatis集成ehcache
Mybatis集成ehcache 1.为什么需要缓存 拉高程序的性能 2. 什么样的数据需要缓存 很少被修改或根本不改的数据 业务场景比如:耗时较高的统计分析sql.电话账单查询sql等 3. ehc ...
- [PHP] layui实现多图上传，图片自由排序，自由删除
实现效果如下图所示: 实现代码: css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: ; } .pic ...
- cocos:C++ 导出到lua, genbindings.py修改
cocos:C++ 导出到lua, genbindings.py修改 1. 准备 把tools目录下的cocos2dx_extension.ini, genbindings.py, userconf. ...
- CF1215E Marbles
CF1215E Marbles 传送门 思路 一道比较有意思的状压dp. 首先有一个结论,把一个序列通过交换相邻元素排序,那么交换次数的最小值就是逆序对个数. 证明:从小到大依次把元素换到最前面,那么 ...
- Laravel自动备份到阿里云OSS
背景 之前做备份时,主要是拿一台备份机对生产机做数据库做主备,用rsync同步上传的图片,文件.随着项目的增多,许多小项目都这样做感觉太过繁琐,每次都要在2台机器之间配置,同时单独拿一台机器做备份成本 ...
CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...
(1)链接式 : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css (用得比较多) : < ...
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
做个快乐的搬运工:https://blog.csdn.net/DYD850804/article/details/80997251
一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...
git clone项目到本地(项目有master和其他分支) 1.首先新建一个空文件夹,在文件夹里面git初始化操作,在文件夹的根目录下,右键选择git bash here,在弹出窗体中: ...
题意 输入 $k$(1 \leq k \leq 100)个正整数 $p_1, p_2, ..., p_k$(1 < p_i < 2{31}),找出 $k$ 个非负整数 $e_i$ 使得 $ ...
原题链接在这里:https://leetcode.com/problems/lowest-common-ancestor-of-deepest-leaves/ 题目: Given a rooted b ...
原题链接在这里:https://leetcode.com/problems/random-pick-with-weight/ 题目: Given an array w of positive inte ...
原题链接在这里:https://leetcode.com/problems/vertical-order-traversal-of-a-binary-tree/ 题目: Given a binary ...
Mybatis集成ehcache 1.为什么需要缓存 拉高程序的性能 2. 什么样的数据需要缓存 很少被修改或根本不改的数据 业务场景比如:耗时较高的统计分析sql.电话账单查询sql等 3. ehc ...
实现效果如下图所示: 实现代码: css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: ; } .pic ...
cocos:C++ 导出到lua, genbindings.py修改 1. 准备 把tools目录下的cocos2dx_extension.ini, genbindings.py, userconf. ...
CF1215E Marbles 传送门 思路 一道比较有意思的状压dp. 首先有一个结论,把一个序列通过交换相邻元素排序,那么交换次数的最小值就是逆序对个数. 证明:从小到大依次把元素换到最前面,那么 ...
背景 之前做备份时,主要是拿一台备份机对生产机做数据库做主备,用rsync同步上传的图片,文件.随着项目的增多,许多小项目都这样做感觉太过繁琐,每次都要在2台机器之间配置,同时单独拿一台机器做备份成本 ...