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. 《Effective Objective-C 2.0》 读后总结

    感觉自己最近提升很慢了.然后去找了一些面试题看看.发现自己自大了.在实际开发中,让我解决bug.编写功能,我有自信可以完成.但是对项目更深层的思考,我却没有.为了能进到自己的目标BAT.也为了让自己更 ...

  2. C:\Users\用户名\AppData里面的文件可以删除吗

    很多人发现电脑中C:\Users\用户名\AppData 占据了很大的空间,那么可以将其删除吗?下面为大家详细介绍相关知识! C:\Users\用户名\AppData里面一般有三个文件夹,分别是Loc ...

  3. linux下常用语言的语法检查插件整理

    linux下常用语言的语法检查插件 可以结合vim语法检查插件syntastic使用,具体请参考syntastic使用说明 如php,sql,json,css,js,html,shell,c等语法插件 ...

  4. 不想当程序员的CEO不是好投资人：小米雷军23年前所写代码曝光

    众所周知,雷军是小米创办人,董事长兼CEO,但是较少人知道,其实雷军是程序员出身,并且在程序员这个行业里一做就是十年.有网友曝光了一段23年前雷军所写的代码,一起来看下. 可以看出这段代码写于1994 ...

  5. 操作符、语句、函数——Javascript高级程序设计

    1.操作符 一元操作符:++.--放在变量前后的区别,+.—表示正负 位操作符:64位存储.32位计算,对NOT.AND.OR.XOR.<<.>>.>>>的掌 ...

  6. 简学Python第四章__装饰器、迭代器、列表生成式

    Python第四章__装饰器.迭代器 欢迎加入Linux_Python学习群  群号:478616847 目录: 列表生成式 生成器 迭代器 单层装饰器(无参) 多层装饰器(有参) 冒泡算法 代码开发 ...

  7. LOGISTIC回归分析

    前面的博客有介绍过对连续的变量进行线性回归分析,从而达到对因变量的预测或者解释作用.那么如果因变量是离散变量呢?在做行为预测的时候通常只有"做"与"不做的区别" ...

  8. Asp.net mvc 4.0 高级编程 百度云下载

    Asp.net mvc 4.0 高级编程 百度云下载地址:链接:http://pan.baidu.com/s/1o6zFvOe 密码:xyss 1.基于 ASP.NET MVC4.0 + WebAPI ...

  9. 页面添加数据的PHP

    (接前面写的) 第一个页面tianjia.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  10. 四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样

    去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言 当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个问题:能不能把某 ...