8. HTML——定义CSS样式(CSS选择器)

作者: TheRightPath1 | 来源:发表于2020-08-15 17:12 被阅读0次

Sublime 学习web的css
CSS选择器
CSS选择器
学习笔记-CSS-2017.2.14
8. HTML——定义CSS样式(CSS选择器)
CSS简介
css 基本
ccs基础
day02
初识CSS ①选择器

1.几种样式定义:

9.定义CSS样式.png

2.几种样式说明:
(1)HTML标记定义:
例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器定义方式</title>
    <style type="text/css">
        body{
    background-color: green;
}
h1{
    color: white;
    background-color: gray;
    font-size: 30px;
}
p{
    color: red;
    background-color: yellow;
    font-size: 50px;
}
    </style>
</head>
<body>
    <h1 style="color: white">HTML标记定义</h1>
    <p>HTML标记定义</p>
</body>
</html>

(2)class定义:类定义的方式为 .类名{属性:属性值; 属性:属性值...}
例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器定义方式</title>
    <style type="text/css">
        /*此处会将div标签下的p标签中的内容一起修改为相同的样式*/
        .p{ background-color: red; font-size: 40px}
        /*当对父标记的类定义属性后要想对下面的子标记单独定义,需要使用.类名 标记名{属性名:属性值}*/
        .p p{background-color: gray; font-size: 60px; color: green}
    </style>
</head>
<body>
    <div class="p">HTML标记定义
        <p>HTML标记定义</p>
    </div>
</body>
</html>

(3)id定义:id定义的方式为 #id{属性:属性值; 属性:属性值...}
(4)优先级问题: 以上三种定义方式的属性优先级为id> class> HTML,当同级的选择器对同一个内容操作时会执行离元素最近的属性
(5)组合选择器
例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器定义方式</title>
    <style type="text/css">
        h1, h2, h3, h4, h5, h6, .p, #pp{font-size: 50px; color: red}
    </style>
</head>
<body>
    <h1>组合选择器</h1>
    <h2>组合选择器</h2>
    <h3>组合选择器</h3>
    <h4>组合选择器</h4>
    <h5>组合选择器</h5>
    <h6>组合选择器</h6>
    <div class="p">组合选择器</div>
    <p id="pp">组合选择器</p>
</body>
</html>