CSS层叠样式表(Cascading Style sheets)

---------

----------------

-----------

---------------

-----------

---------------------

-------------

--------------------

不同选择器具有相同的样式我们可以一起写，如下：
<style type="text/css">
        h1,h2,h3,p{
            font-size:30px;
            font-family: "隶书";
        }
 </style>

--------------------

（1）html中代码的注释格式是<!--*****-->；

（2）/*这是注释*/  是css中的注释；

（3）//这是注释   是js代码中的单行注释；

/*这是注释*/   是js代码的多行注释方式。

--------------------

-----------------

---------------------------

----------------------

下面的HTML注释，是为了防止在低版本浏览器不识别<style>标签，而把h1,h2,h3,p的样式显示在浏览器中。

而高版本的浏览器则会忽略HTML注释的标签，而直接解释相应的样式表。

<style type="text/css">

<!--
        h1,h2,h3,p{
            font-size:30px;
            font-family: "隶书";
        }

-->
 </style>

-------------------

使用link链入外部样式，页面加载时会同时加载样式

----------------------------------

CSS导入式有两种，如下写法：

<style type="text/css>

　　@import "外部CSS样式";    或者使用  @import url( 外部CSS样式 );

</style>

---------------------------

-------------

使用外部样式比较多，好处如下；（不过还是要根据具体情况进行选择）

------------------------

以上说明1解释如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        @import url(1.css);
        p{color: blue;}
    </style>
    <link rel="stylesheet" type="text/css" href="2.css">  这里 link样式  大于  style里面的样式
</head>
<body>
    <p>我爱你</p>
</body>
</html>

-----------------------

-----------------------

-------------------

---------------

只要使用了类选择器，那么该标签就会使用该类样式。

----------------

解析：

p.red{font-size:50px;}  在所有p标签中，设置有class=“red”的p标签，字体才变成50px。

h1.red{font-size:20px} 只有设置了class="red"的h1标签，字体才设置为:20xp。

-----------------------

------------------

ID选择器，必须是必须是唯一的，一个标签不能添加两个ID，其他标签页不能使用该ID。

同一个ID选择器在CSS样式设置时，可以被多次使用。而且同一个网页文档中ID是唯一.

--------------------------

只有一条样式式，就使用一行，既美观有有利于阅读和维护。

---------------------------

-----

除了标签，类，id都可以使用群组选择器。其中要注意：class和 id 是区分大小写的。

------------------------

即通配符 权值：0

------------------------

------------------------

------------------------

------------------------

-----------------

------------

-----------------------

--------------

-----------------------

兼容性

低于IE6的浏览器是无法从父元素继承 font-size:18px;的属性值，所以就使用群组的方式进行解决

body,table,tr,td{

　　font-size:18px;

}

---------------------------

-------------------

优先级：

id选择器 > class选择器 > 标签选择器

同类样式多次引用，样式表中后定义的样式优先级高，即：就近原则

---------------------

--------------------

通配符就是*{....}就是星号，全部进行样式。

-----------------------------

!mportant的优先级最高！！！！！！

------------------

-----------------

-----------------

----------------------

=----------------------------------

CSS层叠样式表(Cascading Style sheets)的更多相关文章

  1. 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）

    标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...

  2. CSS（Cascading Style Sheet）简述

    CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...

  3. CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  4. How to include cascading style sheets (CSS) in JSF

    In JSF 2.0, you can use <h:outputStylesheet /> output a css file. For example, <h:outputSty ...

  5. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...

  6. CSS(Cascading Style Shee)

    1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...

  7. 【HTML/XML 7】CSS层叠样式表

    导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...

  8. CSS：CSS层叠样式表的概述

    CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...

  9. Qt Style Sheets帮助文档 Overview

    Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets, in ...

随机推荐

  1. J2EE导论 | 疑惑篇

    J2EE是Java程序员从新手进阶的一个必经之路.要体会所谓的工业级代码,就必须要融入和经历更为复杂的开发.部署环境,需要同更多的模块.组件做信息流交换,比较和使用不同的框架,逐一去琢磨和考察它们的必 ...

  2. Javascript高级编程学习笔记（36）—— DOM（2）Document

    Documet类型 了解了基础的Node类型过后,我们来聊聊Node中的Document类型 我们知道所有的节点都继承自Node类型 所以除了Node类型公有的方法和类型之外,Document类型还有 ...

  3. 吴恩达机器学习笔记13-正规方程(Normal Equation)

    到目前为止,我们都在使用梯度下降算法,但是对于某些线性回归问题,正规方程方法是更好的解决方案.如: 即: 运用正规方程方法求解参数: 注:对于那些不可逆的矩阵(通常是因为特征之间不独立,如同时包含英尺 ...

  4. Day1:html和css

    Day1:html和css 了解浏览器 掌握WEB标准 理解标签语义 掌握常用标签 掌握三种列表标签 前端开发工具: 浏览器是网页显示.运行的平台,IE.火狐(Firefox).谷歌(Chrome). ...

  5. Ubantu linux中使用PyCharm之---破解PyCharm,实现永久免费试用

    打开 http://idea.lanyus.com/ 这个网址,可以直接复制到浏览器打开 获取注册码 K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibG ...

  6. 超详细的 Redis Cluster 官方集群搭建指南

    今天从 0 开始搭建 Redis Cluster 官方集群,解决搭建过程中遇到的问题,超详细. 安装ruby环境 因为官方提供的创建集群的工具是用ruby写的,需要ruby2.2.2+版本支持,rub ...

  7. 请求被中止: 未能创建 SSL/TLS 安全通道

    出现“请求被中止: 未能创建 SSL/TLS 安全通道.”的问题. 在创建请求地址的前面加了这句代码就可以了 System.Net.ServicePointManager.SecurityProtoc ...

  8. asp.net core 2.0发布到IIS流程及报错解决方案

      我这是个新装的服务器,没有安装任何软件. 一.发布流程 1.安装AspNetCoreModule托管模块,同时会自动安装..net core runtime DotNetCore.2.0.8-Wi ...

  9. HW2018校招软件类笔试题

    一. 1.题目 输入一个字符串,输出字符串中最长的数字串.如果有多个数字串长度相等且都是最长的,则按照字符串顺序输出最后一个最长的数字串. 2.解答 [code] import java.util.* ...

  10. input01.sh: line 11: warning: here-document at line 4 delimited by end-of-file (wanted `EOF') input01.sh: line 12: syntax error: unexpected end of file

    写了个脚本用cat>>EOF报错如下: input01.sh: line 11: warning: here-document at line 4 delimited by end-of- ...