css的存在方式和选择器
css的存在方式
- 元素内联
- 页面嵌入
- 外部引入
元素内联
直接在html的标签中定义样式，类似于：
<div style="属性1;属性2;属性3"><div>
页面嵌入
在html的头部<head>中定义样式，在body中引用，将样式信息集中在了头部,定义方式如下：
<style>
样式一{
属性1;
属性2;
......
}
样式二{
属性1;
属性2;
......
}
.......
</style>
外部引用
将css作为一个单独的文件存在，然后在html的头部导入css文件，然后在body中引用，css文件的导入方式如下：
<link rel="stylesheet" href="路径/css文件" type="text/css">
推荐使用第三种方式
css选择器
- 标签选择器 p { color:green; }
凡是在body中使用这种标签的都会应用该样式
- id选择器 #info { background:#ff0; } 是益“#”开始的
在body元素中指定了该di的元素会引用该样式，在开发中不同的元素的指定的id都不应该相同，所以该样式最好只能被一个元素引用
- class属性选择器 .info { background:#ff0; }
在body元素中通过class="样式名"来引用，这是最常见的引用方式
- *通用元素选择器 匹配所有的标签
上面4种是基础的选择器，都是选择单一的标签，如果要选择多元素的话就要使用组合选择器下面来看一下常用的组合选择器
- 多元素选择器，同时匹配多个元素，元素之间用逗号分隔
- 后代元素选择器，比如 E F 匹配所有属于E元素后代的F元素，E和F之间用空格分隔
- 子元素选择器，比如 E>F 匹配所有E元素的子元素F
- 毗邻元素选择器，E+F 匹配所有紧随E元素之后的同级元素F
此外还有属性选择器，下面来看一下有哪些属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，
比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}
css的存在方式和选择器的更多相关文章
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- 学习总结：CSS(一)定义方式、选择器、选择器权重
一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...
- Unit 4.css的导入方式和选择器
一.什么是css CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
随机推荐
- JAVA逻辑运算符
逻辑运算符,用于链接boolean类型的表达式. AND与 (&)OR或 (|)XOR异或 (^)Not非 (!)AND双与短路 (&&)OR双与短路 (||) 与(& ...
- Linux驱动技术(五) _设备阻塞/非阻塞读写
等待队列是内核中实现进程调度的一个十分重要的数据结构,其任务是维护一个链表,链表中每一个节点都是一个PCB(进程控制块),内核会将PCB挂在等待队列中的所有进程都调度为睡眠状态,直到某个唤醒的条件发生 ...
- Apache工作原理
Apache工作原理 在开始了解Apache前,我们先熟悉一下web服务器,因为apache也是web服务器的一种. Web系统由客户端(浏览器)和服务 ...
- 矩阵求逆的几种方法总结（C++）
矩阵求逆运算有多种算法: 伴随矩阵的思想,分别算出其伴随矩阵和行列式,再算出逆矩阵: LU分解法(若选主元即为LUP分解法: Ax = b ==> PAx = Pb ==>LUx = Pb ...
- Winfrom 提示消息框公共类
1.Winfrom项目经常会使用到消息提示,一般都使用MessageBox.Show方法,但是像错误提示,询问提示,警告提示写起来就有点复杂了,并且后面几种提示都带有图标,但是MessageBox.S ...
- 2-23c#基础循环语句
循环语句 必须具备四要素:初始条件.循环条件.循环体.状态改变 for (初始条件; 循环条件; 状态改变) { 循环体} 简单举例 for(int i=1;i<=10;i++)//就是 ...
- 简单说说NoHTTP
学习NoHttp的原因是由于公司之前做的产品使用的网络请求框架一直都是Volley(为什么使用Volley就不用多说了,最起码是谷歌开发团队自己搞的,总感觉权威一些),可是自从android6.0推出 ...
- 用php做省份的三级联动 附带数据库
可以把它做成小插件的形式,以后需要,可以随时调 来看一下怎么来做 先来写个div然后,再引入js包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 上传图片，多图上传，预览功能，js原生无依赖
最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...
- 提交Sublime Text 插件到Package Control
最近写了一个lua智能提示的插件LuaSmartTips.这个插件一直都是自己一个人在用,昨天突然想把插件提交到Package Control,如果其他的人有这样的需求就可以直接安装. Package ...