css的存在方式

  1. 　　元素内联
  2. 　　页面嵌入
  3. 　　外部引入

元素内联

　　直接在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选择器

  1. 标签选择器 　　     p { color:green; }

　　　　凡是在body中使用这种标签的都会应用该样式

  1. id选择器              #info { background:#ff0; }   是益“#”开始的

　　　　 在body元素中指定了该di的元素会引用该样式，在开发中不同的元素的指定的id都不应该相同，所以该样式最好只能被一个元素引用

  1. class属性选择器    .info { background:#ff0; }

　　　　在body元素中通过class="样式名"来引用，这是最常见的引用方式

  1. *通用元素选择器    匹配所有的标签

上面4种是基础的选择器，都是选择单一的标签，如果要选择多元素的话就要使用组合选择器下面来看一下常用的组合选择器

  1. 多元素选择器，同时匹配多个元素，元素之间用逗号分隔      　
  2. 后代元素选择器，比如 E F 匹配所有属于E元素后代的F元素，E和F之间用空格分隔
  3. 子元素选择器，比如 E>F 匹配所有E元素的子元素F
  4. 毗邻元素选择器，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. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  2. 学习总结：CSS(一)定义方式、选择器、选择器权重

    一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...

  3. Unit 4.css的导入方式和选择器

    一.什么是css CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...

  4. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  5. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  6. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  7. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  9. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

随机推荐

  1. MVC分页控件

    1.下载MvcPager.dll文件并引用到MVC项目中 2.在控制器中引用命名空间using Webdiyer.WebControls.Mvc; 3.获取数据集合,数据的总记录数(数据集合有多少条数 ...

  2. arcpy.mapping常用四大件-MapDocument

    arcpy.mapping常用四大件-MapDocument by 李远祥 点开arcpy.mapping的帮助,可以看到其有限的几个类,看起来东西不是很多,但却是非常的使用.由于arcpy定位就是粗 ...

  3. android Android性能优化之如何避免Overdraw

    什么是Overdraw? Overdraw就是过度绘制   怎么来消灭overdraw呢?总的原则就是:尽量避免重叠不可见元素的绘制,基于这个原则,我们大概可以想出以下几招: 第一招:合理选择控件容器 ...

  4. Python抓取第一网贷中国网贷理财每日收益率指数

    链接:http://www.p2p001.com/licai/index/id/147.html 所需获取数据链接类似于:http://www.p2p001.com/licai/shownews/id ...

  5. 使用devstack搭建openstack Newton 版本的坑

    国外源访问速度慢怎么办? 使用国外源,加之带宽紧张,搭建过程是很累的,这里推荐大家使用一下源: devstack包源.:http://git.trystack.cn pip源: [global] in ...

  6. stringBuffer的使用及字符串比较的区别

    /* * 关于equals()和==: 对于String简单来说就是比较两字符串的Unicode序列是否相当,如果相等返回true; * 而==是比较两字符串的地址是否相同,也就是是否是同一个字符串的 ...

  7. js DOM操作---登录例子总结

    简单的总结下用 javascript DOM 实现简易登录框例子,下面是简单的模拟登录,没有具体的登录样子,但只是模拟,整理下思路. 页面简单布局,我这个确实太简单了,看代码: <body> ...

  8. 每天一个linux命令(42)--traceroute命令

    通过traceroute 我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不 ...

  9. 批量删除的PHP

    第一个页面shanchu.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  10. JavaScript知识点总结

    JavaScript学习总结1.JavaScript是作用于网络和HTML的一个编程语言.2.JavaScript代码必须放在<script></script>标签之间,Jav ...