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. static的加载先后顺序

    1.静态变量的声明和赋值是分开的,静态变量会先被声明,赋值操做被放在了静态代码块中. 2.静态变量的赋值和静态代码块的执行顺序和代码的先后书写顺序相关. 3.静态代码块优先执行,其次构造方法,最后普通 ...

  2. Webpack学习系列（一）

    一:全局安装: npm install webpack -g (-g全局安装) npm init -y   (初始化参数) npm install webpack --save-dev  (安装在当前 ...

  3. 创建Win32图形界面应用程序

    没有什么比创建一个Win32图形界面应用程序能让Win32汇编初学者更兴奋的了! 然而,对于像我这样没有代码便会陷入困境的人来说,看到下面的代码总能让人为之一振,百余行的代码使得Win32GUI编程并 ...

  4. WIn7下Ubuntu 14.04 安装

    1. 在Windows下下载Ubuntu14.04的ISO镜像,解压 2. 打开wubi.exe,填写用户名,密码等相关信息,在这里需要注意的是,磁盘空间最好选到最大(30G),执行安装 3. 按照提 ...

  5. Android 退出多Activity的application的方式

    在开发过程中,我们常常需要一个退出功能,来退出该应用的所有Activity.下面,我们列举一些退出应用的几种方式.以下用的源码点击查看源码地址 欢迎star,欢迎fork 利用ActivityCont ...

  6. 从零开始--Spring项目整合(2)整合SpringMVC

    1.pom.xml 定义版本 <properties> <spring.version>4.2.7.RELEASE</spring.version> <jac ...

  7. 启动genymotion后eclipse不能正常启动adb的处理办法

    很多时候在使用genymotion启动后,再在eclipse调试程序会在Console中提示 The connection to adb is down,and a server error has ...

  8. solr 学习之简介及安装

    一.solr简介 Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展,并对索 ...

  9. 基于 socket.io， 简单实现多平台类似你猜我画 socket 数据传输

    一.前言 socket.io 实现了实时双向的基于事件的通讯机制,是基于 webSocket 的封装,但它不仅仅包括 webSocket,还对轮询(Polling)机制以及其它的实时通信方式封装成了通 ...

  10. 【需求工程】KANO模型

    引言 1979年10月东京理工大学教授狩野纪昭(Noriaki Kano)和其同事 Fumio Takahashi发表的论文 <Motivator and Hygiene Factor in Q ...