<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. (DFS)hdoj1010-Tempter of the Bone

    #include<cstdio> #include<cmath> #include<stdlib.h> ][]={{,},{,-},{,},{-,}},escape ...

  2. 戴文的Linux内核专题:06配置内核(2)

    转自Linux中国 这一部分我们讲配置内核IRQ子系统.中断请求(IRQ)是硬件发给处理器的一个信号,它暂时停止一个正在运行的程序并允许一个特殊的程序占用CPU运行. 这个目录中的第一个问题属于内核特 ...

  3. MainActivity获取fragment控件button监听报空指针错误

    原因是是新版SDK创建项目时默认引入的fragment.xml,我的button是定义在fragment.xml里面的,而findviewbyid却是在main.activity里面调用的,而这样是获 ...

  4. APP store 官方统计工具的常见的Q&A

    Apple最近在iTunesConnect里最新发布了官方统计工具,提供了现有友盟统计平台和自有统计平台无法统计的数据,具有自己的独有特点,尤其是下面几个最让人头疼的流量分析转化,可以在App Ana ...

  5. STM32之GPIO端口位带操作

    #ifndef __SYS_H #define __SYS_H #include "stm32f10x.h" //位带操作 //把“位带地址+位序号”转换别名地址宏 #define ...

  6. iis提示“另一个程序正在使用此文件,进程无法访问。(异常来自HRESULT:0x80070020)

    看看IIS的网站,惊人的发现default web site是停止状态.印象中没有停止它啊.右键->管理网站->启动.点击启动后居然弹出:“另一个程序正在使用此文件,进程无法访问.(异常来 ...

  7. linux 用户、组,修改文件权限

    文件权限 -rwxrw-r‐-1 root root 1213 Feb 2 09:39 abc - 10个字符确定不同用户能对文件干什么 - 第一个字符代表文件(-).目录(d),链接(l) - 其余 ...

  8. FZU 2072 - Count

    题意:给一个数组,每次查询输出区间内数字x出现的次数. 每次查询数字x是与其它数字无关的,所以我们可以以每个数字为索引建立一个链表,里面存放它出现的下标,这里可以保证是递增的.每次查询数字x,就在x的 ...

  9. (转)深入理解javascript的function

    原文:http://www.cnblogs.com/sharpxiajun/archive/2011/09/16/2179323.html javascript笔记:深入理解javascript的fu ...

  10. C++ shared_ptr deleter的实现

    #include <iostream>#include <memory>using namespace std; #include<iostream>class s ...