CSS部分语法1

<!-- 
第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>
猜你喜欢
