css 层叠样式表
css选择器
派生选择器
根据其元素在其上下文关系来定义样式
<style type="text/css">
body{
font-size:12px;
color:red;
}
</style>
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
id选择器
<html>
<head>
<meta charset="utf-8" />
<link href="10.css" type="text/css" rel="stylesheet" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p>
<strong>p标签hello</strong>
</p>
<ul>
<li>
<!--如何给li标签单独加样式，派生 li strong{属性： 属性值}-->
<strong>li标签hello</strong>
</li>
</ul>
</body>
</html>
li strong {
color:red;
}
strong{
color:blue;
}
id选择器#
<html>
<head>
<meta charset="UTF-8" />
<link href="11.css" type="text/css" rel="stylesheet" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p id="pid">hello css</p>
</body>
</html>
#pid {
color:red}
<html>
<head>
<meta charset="UTF-8" />
<link href="11.css" type="text/css" rel="stylesheet" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p id="pid">hello css
<a href="#">欢迎来到</a></p>
<div id="divid">这是div
<p>这是第一个div</p></div>
</body>
</html>
#pid {
color:red}
#pid a{
color:pink;
}
#divid p{
color:green;
}
派生选择器和ID选择器同时使用
类选择器.
<html>
<head>
<meta charset="UTF-8" />
<link href="12.css" type="text/css" rel="stylesheet" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p class="pclass">这是一个class效果
<a href="#">这是一个链接</a></p>
<div class="divclass">这是一个div的class</div>
</body>
</html>
.pclass{
color:blue;
}
.pclass a{
color:pink;
}
.divclass{
color:red;
}
属性选择器
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
[title]{color:green;}[title=te]{color:red;} </style>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p title="t">属性选择器</p>
<p title="te">属性aa选择器</p>
</body>
</html>
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
<style type="text/css">
.first>span{border:1px solid red;}
</style>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
把文字内容的“我还是一个胆小如鼠的小女孩”这一句话加入红色边框。效果图如下：
css 层叠样式表的更多相关文章
- CSS层叠样式表(Cascading Style sheets)
CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...
- 《精通CSS层叠样式表》
书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完
- CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
- css:层叠样式表-网页布局基础
css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...
- 【HTML/XML 7】CSS层叠样式表
导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...
- 实验时css层叠样式表不更新的情况
自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有视图的公共文件,如下: <!DOCTYPE html> <html& ...
- 前端内容之CSS层叠样式表
CSS(Cascading Style Sheet层叠样式表) 把HTML认为是网页的骨架 那么CSS就是用于对HTML骨架进行修饰,比如加背景色.显示方式.位置等等属性 CSS语法形式: 一个完整的 ...
- CSS层叠样式表的层叠是什么意思（转自知乎）
转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...
- css层叠样式表
css的三种声明方式 1.行内样式 通过每个标签都有的style属性 <div style="color:red;">黄卫星说没有内容 ...
随机推荐
- redis和memcached比较
1.Memcached采用客户端-服务器的架构,服务器维护了一个键-值关系的数据表,服务器之间相互独立,互相之间不共享数据也不做任何通讯操作.客户端需要知道所有的服务器,并自行负责管理数据在各个服务器 ...
- linux shell 流程控制
导读 和Java.PHP等语言不一样,linux shell有一套自己的流程控制语句,其中包括条件语句(if),循环语句(for,while),选择语句(case).下面我将通过例子介绍下,各个语句使 ...
- 如何让Ubuntu系统支持WebP图片格式
本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP图片 Google开发并推出 WebP 图片 ...
- NGUI例子Scroll View场景中item添加点击后自动滑到终点
http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...
- UIImage 和 iOS 图片压缩UIImage / UIImageVIew
UIImageView 制作气泡 stretchableImageWithLeftCapWidth http://blog.csdn.net/justinjing0612/article/detail ...
- virgo虚拟桌面
转载: http://www.appinn.com/virgo-virtual-desktop-for-windows/ virgo 是一款 Windows 下的极简虚拟桌面,源程序自身只有 7KB, ...
- ssh tar 命令把远程文件拉回来或推过去
ssh tar 命令把远程文件拉回来或推过去 2010-09-11 21:55:35 分类: LINUX 登录22后tar 压缩/var/log目录输出到标准输入通过管道传到本地22_log. ...
- c++关键字之#define typedef const
[#define] #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查. [typedef] typedef只是为了增加可读性而为标识符另起的新名称 在自己的作用域内给一个已经存 ...
- 45. Singleton类的C++/C#实现[Singleton]
[题目] 设计一个类,我们只能生成该类的一个实例. [分析] 单例模式的意图是保证一个类仅有一个实例,并提供一个访问它的全局访问点.让类自身负责保存它的唯一实例.这个类可以保证没有其他实例可.以被创建 ...
- Solr5.3.1整合IKAnalyzer
由于solr5.3.1本身不支持中文分词,而msseg4j的分词效果不明显.因而采用IK进行分词,然而参考http://www.superwu.cn/2015/05/08/2134/在google上下 ...