<!--

第1部分 CSS规则特性

    1 继承性：父元素样式可以被子元素继承，一般只能继承颜色和字体；

    2 层叠性：给一个元素设置不同声明，效果会叠加；

    3 优先级：给同一个元素设置相同声明，效果以后者为准，也叫就近原则；

第2部分 选择器

    1 元素选择器   略；

    2 类选择器：选择class等于某值的所有元素，是程序员根据逻辑给元素增加的分类；

    3 id选择器：选择id等于某值的惟一的元素；

    4 选择器组：写出一组选择器，选中每个选择器所对应的目标的“并集”；

    5 派生选择器：

            后代选择器：选择某元素所有后代（子孙）元素

            子元素选择器：选择某元素的所有子元素

    6 伪类选择器：：用于像某些选项添加特殊的效果

        使用冒号（ ：）作为结合号，结合号左边是其他选择器，右边是伪类

        常用伪类：

        -:link

        -:active

        -:visited

        -:hover

        -focus:

 -->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>demo3</title>

    <style>

        /*1 继承性：父元素样式可以被子元素继承，一般只能继承颜色和字体*/

        body{

            font-family:"微软雅黑","文泉驿正黑","黑体"; /*三个字体分别支持windows、linux、mac,一般都写*/

            background-color:silver;        //背景颜色

            color:blue;      //字体颜色

            }

        /*2 层叠性：给一个元素设置不同声明，效果会叠加*/

        h2{

            font-family:"微软雅黑";

        }

        /*此处省略无数行声明，写着写着忘了加一个申明可以另写，会叠加*/

        h2{    color:red;

            font-size:50px;

        }

        /*3 优先级：给同一个元素设置相同声明，效果以后者为准，也叫就近原则*/

        h3{

            color: gray;

        }

        /*此处省略无数行声明*/

        h3{

            color:green;

        }

        /*选择器就是用来选择页面上的元素 */

        /* 1 元素选择器 前面都有 略 */

        /* 2 类选择器：选择class等于某值的所有元素，是程序员根据逻辑给元素增加的分类 */

        .girl{

            color:pink;

            font-size:40px;

        }

        /*3 id选择器：选择id等于某值的惟一的元素*/

        #p3{

            color:yellow;

            font-size:50px;

        }

        /* 4 选择器组：写出一组选择器，选中每个选择器所对应的目标的“并集” */

        p.girl,#p3{

            font-weight:bold;   /*加粗*/

        }

        /* 5 派生选择器：

            后代选择器：选择某元素所有后代（子孙）元素

            子元素选择器：选择某元素的所有子元素

        */

        /*5.1 选择某元素的子孙*/

        #p5 b{

            color:red;

        }

        /*5.12选择某元素的儿子*/

        #p5>b{

            color:yellow;

        }

        /*6 伪类选择器：：用于像某些选项添加特殊的效果

        使用冒号（ ：）作为结合号，结合号左边是其他选择器，右边是伪类

        常用伪类：

        -:link

        -:active

        -:visited

        -:hover

        -focus:

        */

    </style>

</head>

<body>

    <h1>老许</h1>

    <h2>盼盼</h2>

    <h3>哈哈</h3>

    <p class = "girl">小倩</p>

    <p class = "girl">小乔</p>

    <p id = "p3">大蛇</p>

    <p>牛魔王</p>

    <p id="p5">

        <u>安徽省<b>马鞍山市</b>安徽工业大学  </u>  <br>

        红豆生南国，<br>

        春来发几枝。<br>

        问君多采撷，<br>

        此物最相思。<br>

    </p>

        <ol>

            <li>第一</li>

            <li>第二</li>

            <li>第三</li>

        </ol>

</body>

</html>

CSS部分语法1的更多相关文章

  1. CSS 高级语法 ---- 继承和选择器的分组

    1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; ...

  2. 1.css的语法标准

    css(Cascading Style Sheets),中文名称为层叠样式表,主要用于对html的样式设置. 在使用CSS的时候,要注意其优先级情况,优先级由下所示(数字越高,优先级越高): 浏览器缺 ...

  3. 常用的CSS缩写语法一些方法小结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...

  4. CSS代码语法

    css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到 ...

  5. css 基本语法及页面引用：

    css基本语法: css的定义方法是: 选择器{ 属性:值; 属性:值; 属性:值; } 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性,每个属性有一个或多个值. 如: div{ w ...

  6. css基本语法及页面引用

    css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值.代码示例: div{ w ...

  7. web（七）css的语法规则、注释

    css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...

  8. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  9. HTML&CSS基础-CSS的语法

    HTML&CSS基础-CSS的语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.dome.html源代码 <!DOCTYPE html> <html ...

  10. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

随机推荐

  1. w3wp.exe进程占用内存过高解决方法

    解决CPU占用过多: 1.在IIS中对每个网站进行单独的应用程序池配置.即互相之间不影响. 2.设置应用程序池的CPU监视,不超过25%(服务器为4CPU),每分钟刷新,超过限制时关闭. 根据w3wp ...

  2. centos 7 selinux开启关闭

    1 查看selinux状态 [root@localhost ~]# sestatus SELinux status: disabled 2 关闭 零时关闭 [root@localhost ~]# se ...

  3. redux 简介

    概述 Redux 本身是个极其简单的状态管理框架, 它的简单体现在概念少, 流程明确. 但是, 正是因为简单, 使用上没有强制的约束, 所以如果用不好, 反而会让状态管理更加混乱. 我觉得, 用好 R ...

  4. Python基础之注释，算数运算符，变量，输入和格式化输出

    Python的注释 注释的作用:用自己熟悉的语言,对某些代码进行标注说明,增强程序的可读性: 在python解释器解释代码的过程中,凡是#右边的,解释器都直接跳过这一行: 注释的分类 单行注释 # 这 ...

  5. vue启动时候报错

    使用vue时,在已经安装模块完毕的情况下,依旧会报错,如: Module build failed: Error: %1 is not a valid Win32 application. 这个时候只 ...

  6. 逆向学习-PE文件格式

    从DOS头到节区头是PE头部分,其下的节区合称PE体.文件中使用偏移(offset),内存中使用VA(Virtual Address,虚拟地址)来表示位置.文件加载到内存时,情况就会发生变化(节区的大 ...

  7. ASP.NET Core 搭配 Nginx 的真实IP问题

    一.前言 Nginx(Engine X)是一个高性能HTTP和反向代理服务,是由俄罗斯人伊戈尔·赛索耶夫为访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发 ...

  8. Elasticsearch 通关教程（四）： 分布式工作原理

    前言 通过前面章节的了解,我们已经知道 Elasticsearch 是一个实时的分布式搜索分析引擎,它能让你以一个之前从未有过的速度和规模,去探索你的数据.它被用作全文检索.结构化搜索.分析以及这三个 ...

  9. centos 6.8 配置 Redis3.2.5

    配置Redis3.2.5 与 php-redis 一.配置Redis 1.下载Redis3.2.5安装包 [root@zhangsan /] wget http://download.redis.io ...

  10. plus.webview更新上一个页面的信息

    let currentWebview = plus.webview.currentWebview();       let backWebview = currentWebview.opener(); ...