css

cascdaing style sheet 层叠样式表,简称CSS

层叠:通过CSS的属性等把页面层叠起来

样式:设置页面每一块的样式

表:页面排版

css语法

css规则有两个主要的部分构成:选择器,已及一条或多条声明,如果重复定义会被覆盖

selector {declaration1; declaration2; ... declarationN }

基本选择器

选择器通常是需要改变样式的HTML元素,每条声明有一个属性和一个值组成,属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

selector {property: value}

属性选择器

将h1标签的文字颜色改为红色,同时将体大小设置为 14 像素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 在style中修改h1标签,body的h1标签都会被修改-->
    <style>
        h1 {
            color: red;
　　　　　　　font-size: 14px;
        }
    </style>
</head>
<body>
<h1>我是一级标签</h1>
</body>
</html>

id选择器

标签选择器:通过标签名直接就可以选择到标签,页面中所有符合条件的标签都会被选择

id选择器:id选择器可以为标有特定id的HTML元素指定特定的样式,id选择器以"#"来定义,id名不能以数字开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 在style中修改h1标签,body的h1标签都会被修改-->
    <style>
        h1 {
            color: red;
            font-size: 14px;
        }
        #box {
            width: 100px;
            height: 20px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box"></div> 
</body>
</html>

得到一个宽100px,高20px,背景颜色为红色的块儿级标签

类选择器

类选择器以"."定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 在style中修改h1标签,body的h1标签都会被修改-->
    <style>
        .class {
            text-align: center;
        }
    </style>
</head>
<body>
<h2 class="class">我是h2</h2>
</body>
</html>

其他选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         后代选择器
        body li {
            color: red;
        }
        /* 子代选择器 */
        body ul >p {
            color: green;
        }
        /* 毗邻选择器*/
        h1+h2 {
            color: lawngreen;
        }
        组合选择器
        h1~h2,li,h1{
            color:firebrick ;
        }

    </style>
</head>
<body>
<h1>你好</h1>
<h2>世界</h2>
<div>
    <ul>
        <li>对三</li>
        <li>王炸</li>
        <p>苍老师</p>
        <li>一个三</li>
        <p>小泽老师</p>
        <li>四个二</li>

    </ul>
</div>
<h1>你好</h1>
</body>
</html>
后代/子代/毗邻

伪类选择器

 

posted @ 2018-12-26 23:18  答&案  阅读(137)  评论(0)  编辑  收藏  举报