<1.内联样式,优点：控制精确，缺点：代码重用性差，页面代码乱。>

<div style="background-color:#0F0"></div>

<2.内嵌样式，优点：代码重用性好。缺点：控制不精确，写在<head>标签里面>

<style type="text/css">
*{
color:#0F3
}<!--*代表给所有内容改样式-->

</style>

<3.外部样式,优点：可以对多个页面，多个标签内容进行改样式；缺点：控制最不精确，新建一个css>

<link href="file:///D|/实训资料/自我练习/新建文件夹/Untitled-5.css" rel="stylesheet" type="text/css" />

样式的格式：
样式名：样式的值
多个样式之间，用；隔开。

 

选择器

1.*选择器

<style type="text/css">
*{
color:#0F3
   }<!--*代表给所有内容改样式-->

</style>

2.id选择器（精确控制）"#"

<head>

<style>
#aa{
color:#0C6}

</style>

</head>

<body>

<div id="aa">精确控制</div>

</body>

3.class选择器，用“.”

<head>

<style>
.a1{
color:#}

</style>

</head>

<body>
<div class="a1">这是第一个</div>
<div class="a1">这是第二个</div>
<div class="a1">这是第三个</div>
<div class="a1">这是第四个</div>
<div class="a1">这是第五个</div>

 </body>

 

4.标签选择器

<head>

<style>
div{
color:#}
</style>

</head>

<body>

<div></div>

</body>

5.复合选择器

（1）“，”代表并列

<style>
div,span{
    color:#F00}

</style>

</head>

<body>

<div>测试一</div>
<span>测试二</span>

（2）“空格”表示后代

<head>

<style>
#u1 li{
color:#F00}

</style>

</head>

<body>
<ul id="u1">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>

<body>

（3）“.”  标签选择含有class的

<head>

<style>
div.c1{ <-- div标签里的有class=“c1”的。 -->
color:#0F3}
</style>

</head>

<body>

<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<span class="c1"></span>

 </body>

<!--内联的样式，优先级最高。内嵌其次。
内联，内嵌同时控制一部分内容，以内联为准。-->

<!-- 选择器的优先级，-->
标签选择器的优先级大于*选择器
class选择器优先级大于标签选择器
id选择器优先级大于class选择器

html部分---样式表，选择器；的更多相关文章

  1. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  2. Html 初识样式表&选择器

    样式表&类选择器分类 样式表分类: 1.内联式样式表:在标签内部写样式代码,精确但不方便,增加工作量,后期修改麻烦. 2.嵌入式样式表:一般写在head内 以<style>.... ...

  3. Qt样式表——选择器详解（父子关系）

    在上一节中,小豆君给大家介绍了样式表的基本概念和大致用法.今天我们来详细了解下样式表中选择器的用法. 所谓选择器,就是指定你所设置的样式对哪个或哪些控件起作用. 到目前为止,Qt样式表支持CSS2中定 ...

  4. PHP初入，基础知识点整理（样式表&选择器的使用整理）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. 4、网页制作Dreamweaver（样式表CSS）

    样式表style 制作一个风格统一的网页,需要样式表对颜色.字体等属性的规范,同时也省去在body中多次定义的麻烦,所以一个样式表是必不可少的. 样式表有两种引用的方法:一种是直接写在html的< ...

  6. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  7. css样式表分类、选择器分类、css基础样式

    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...

  8. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  9. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  10. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

随机推荐

  1. MongoDB Aggregate Methods(2) MonoDB 的 3 种聚合函数

    aggregate(pipeline,options) 指定 group 的 keys, 通过操作符 $push/$addToSet/$sum 等实现简单的 reduce, 不支持函数/自定义变量 g ...

  2. java udp网络编程

    import java.net.*; /* 通过UDP传输发送文字数据 1.建立socket服务 2.提供数据,并封装到数据包中 3.通过sokect服务的发送功能,将数据包发送出去 4.关闭资源 * ...

  3. 压力测试工具——Galting

    为什么要写Gatling呢?网上已经有一些介绍Gatling的好文章了,比如两位TW同事的文章,可以看这里(我知道Gatling也是因为这位作者介绍的),还有这里.主要是因为最近在使用Gatling做 ...

  4. 后台获取不规则排列RadioButton组的值

    获取多个RadioButton的值,我们一般会使用服务器控件RadioButtonList: <asp:RadioButtonList ID="rbl" runat=&quo ...

  5. OpenCV函数解读之groupRectangles

    不管新版本的CascadeClassifier,还是老版本的HAAR检测函数cvHaarDetectObjects,都使用了groupRectangles函数进行窗口的组合,其函数原型有以下几个: C ...

  6. C++指针详解（二）

    指针是C/C++编程中的重要概念之一,也是最容易产生困惑并导致程序出错的问题之一.利用指针编程可以表示各种数据结构,通过指针可使用主调函数和被调函数之间共享变量或数据结构,便于实现双向数据通讯:指针能 ...

  7. ZOJ 2672 Fibonacci Subsequence（动态规划+hash）

    题意:在给定的数组里,寻找一个最长的序列,满足ai-2+ai-1=ai.并输出这个序列. 很容易想到一个DP方程 dp[i][j]=max(dp[k][i])+1. (a[k]+a[i]==a[j], ...

  8. MATLAB里的正则表达式 [转]

    正则表达式在处理字符串及文本时显得十分方便,在perl, python等脚本语言,以及java, .net等平台上都支援正则表达式.事实上,在MATLAB中也提供了正则表达式的支持.主要包含三个常用的 ...

  9. Access数据库参数没值

    OleDbParameter[] par = { new OleDbParameter(Par_Password,Info.Password), new OleDbParameter(Par_StuN ...

  10. 【LeetCode OJ】Reverse Words in a String

    Problem link: http://oj.leetcode.com/problems/reverse-words-in-a-string/ Given an input string, reve ...