css 层叠样式表

css选择器

派生选择器

根据其元素在其上下文关系来定义样式

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;">黄卫星说没有内容 ...

随机推荐

探讨关于C#中Foreach的本质
一.为什么数组和集合可以使用foreach遍历 01. 因为数组和集合都实现了IEnumerable接口,该接口中只有一个方法,GetEnumerator() 02.数组类型是从抽象基类型 Array ...
Linux questions
1.can not use ifconfig http://blog.csdn.net/zjt289198457/article/details/6918644 add this : export P ...
原生Android动作
ACTION_ALL_APPS:打开一个列出所有已安装应用程序的Activity.通常,此操作又启动器处理. ACTION_ANSWER:打开一个处理来电的Activity,通常这个动作是由本地电话拨 ...
《OpenCV入门》（三）
这部分主要讲形态学的,回头把代码跑跑再来说下代码的感受:http://blog.csdn.net/poem_qianmo/article/details/24599073
(转)搞ACM的你伤不起
劳资六年前开始搞ACM啊!!!!!!!!!! 从此踏上了尼玛不归路啊!!!!!!!!!!!! 谁特么跟劳资讲算法是程序设计的核心啊!!!!!! 尼玛除了面试题就没见过用算法的地方啊!!!!!! 谁再跟 ...
iPhone取消软件更新上边的1
去除设置的更新+1小红点提示主要分为越狱和非越狱设备两种方法. 越狱状态下方法: 首先将你的设备进行越狱: 越狱后安装ifile(这个自行搜索安装): 用ifile打开/System/Library/ ...
重新编译安装gcc-4.1.2(gcc版本降级)之TFS安装
wget http://gcc.parentingamerica.com/releases/gcc-4.1.2/gcc-4.1.2.tar.gz tar -zxfv gcc-4.1.2.tar.gz ...
Redis和Memcache的区别分析
1. Redis中,并不是所有的数据都一直存储在内存中的,这是和Memcached相比一个最大的区别. 2. Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,hash等数据结构 ...
Mac 下 Chrome 浏览器快捷键
⌘-Option-I 打开“开发人员工具”. ⌘-Option-J 打开“JavaScript 控制台”. ⌘-Option-U 打开当前网页的源代码. 转自: http://www.harbin-s ...
cocos2d c++ 代码规范（译文）
原文在http://cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d_c++_coding_style,我觉得这个规范非常全面,写的非常好,我只捡一些我认为比 ...

css 层叠样式表

css 层叠样式表的更多相关文章

随机推荐

热门专题