CSS选择器基本介绍

一、web标准

所谓的web标准就是用来衡量我们当前的网页书写是否规范的一系列要求，这个标准是由W3C组织制定，在web标准中具体的要求就是结构、样式、行为三者相分离

结构：通过HTML标签来搭建的网页“架子”

样式：指的就是用CSS语言来对具体的HTML结构进行类化修饰

行为：指的就是通过javascript(js)让用户与网页当中进行交互

二、CSS基本使用

1.定义：CSS 指层叠样式表 (Cascading Style Sheets)或称为级联样式表，他的作用是修饰当前网页中的HTML元素

2.基本使用步骤

a.CSS和HTML可以看成是相互独立的语言，此时如果想用CSS来操作HTML，那么就需要将两者建立关系

b.此时在HTML当中就准备了一个叫style的标签（它是一个双标签），在这个标签对之前就可以写我们的CSS代码

c.通过CSS的选择器找到我们想要操作的元素，然后给它设置样式（写在style标签对之间）

三、体验CSS

1.常见的CSS属性

width:定义元素宽度，单位是PX

height：定义元素高度，单位PX

background-color:设置背景颜色

2.CSS代码的固定书写语法

选择器{CSS代码}

3.建议：CSS代码样式分行写，且每行以分号结束

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>体验CSS</title>
        <style type="text/css">
            p {
                width:200px;
                height:200px;
                background-color: green;}
        </style>
    </head>
    <body>
        <p>从今天开始学习CSS，写一个段落，设置宽度200PX，高度200PX，背景颜色绿色</p>
        
    </body>
</html>

CSS选择器基本介绍

四、CSS选择器

1.定义：所谓的CSS选择器就是CSS当中已经定义好的用来选中某些元素的固定语法，他的作用就是选中我们想要设置样式的元素

2.CSS选择器的分类

在CSS中有多种选择器，认为的分为两大类：简单选择器和复合选择器

3.简单选择器

a.标签名选择器:通过具体的HTML标签名来选择元素（会将当前网页中所有叫这个名字的标签都选中）

b.类名选择器：通过标签类名来选择元素

1.为什么需要类名选择器？

一个完整的网页需要很多标签组合在一起进行编写实现，所以同名的一个标签就会出现很多次，此时要对这些同名的标签设置不同的样式，使用标签名选择器是没有办法实现的，这种情况下可以使用类名选择器

2.类名选择器的基本使用步骤

定义HTMIL的网页结构，然后再想选中的元素身上设置Class属性

将想要一起选中的元素身上设置相同的class属性值（类名）

此时我们只需要再style标签中接着固定的语法来调用我们的类名： .点类名{ }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>体验CSS</title>
        <style type="text/css">
            .aa{
                width:300px;
                height:200px;
                background-color: green;
                color: white;}
        </style>
    </head>
    <body>
        <p class="aa">从今天开始学习CSS</p>
        <h1 class="aa">设置p标签和h1标签的样式为：宽度300PX，高度200PX，背景颜色绿色，字体为白色</h1>
        <a href="#">百度一下，你就知道</a>
    </body>
</html>

View Code