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. cordova StatusBar插件的使用（设置手机状态栏颜色和页面头部颜色一致），做出和原生一样的页面效果体验

    cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验设置设备状态栏背景颜色StatusBar.backgroundColorByHexSt ...

  2. lable 以及cell的高度自适应

    1.先cell自适应 可以先拿到 这个lable里文字的高度 //lable自适应的高度 -(CGFloat)heightWithString:(NSString *)aString { CGRect ...

  3. 移动端地图技术分享-- 百度高德SDK

    http://blog.csdn.net/zkl99999/article/details/50961155

  4. java程序测试之字节流

    package filestream; import java.io.FileInputStream; import java.io.FileNotFoundException; import jav ...

  5. Repeater中使用倒计时

    <asp:Label ID="lblTime" runat="server" Text='<%# FormatDateString(Eval(&qu ...

  6. Win32/MFC/COM学习推荐书籍

    以前有不少朋友问关于学习各种技术的推荐书籍的问题,这里把我觉得比较好的一些书籍列一下,希望能起到抛砖引玉的作用就好了:) Win32开发 Programming Windows by Charles ...

  7. iptables禁止ping入

    iptables禁止ping入 以下设置将允许自己往外ping 不允许别人ping自己 vi /etc/sysconfig/iptables 加入如下2条规则 -A INPUT -p icmp --i ...

  8. devexpress设置皮肤、字体以及折叠菜单、伸缩Panel的实现

    1.为了体现系统的个性化,越来越多的系统增加了换肤功能.这里例举一个devexpress实现换肤的案例,效果图对比: 第二张图片中更换了皮肤与字体. 2.皮肤数据源绑定代码: //循环添加皮肤名称 f ...

  9. 纪中集训 Day 5

    不知不觉已经day 5了啊 今天早上醒来，觉得要AK的节奏，结果就立flag了 - - 30分QAQ 其实第一题应该得想得到的，还有T2也能够解决的（话说后来看别人的代码写的好赞啊QAQ） 然后下午就 ...

  10. php查询，多条件查询

    单条件查询: 1.先要有一张表,显示出表中的数据: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...