CSS选择器和文本属性

html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性，页面的维护也越来越困难。

与html相比，CSS支持更丰富的文档外观，CSS可以为任何元素的文本和背景设置颜色。

CSS，层叠（级联）样式表，Cascading Style Shett。

CSS是用来美化html标签的。

选择器

选择器 { 属性:值; }

选择器就是用来选择标签的过程。

常见的几个属性：

width:20px;

height:20px;

background-color:red;

font-size:24px;

text-align: left | center | right

text-indent:2em;

把选择器写明白了。

选择器分类

选择器分类：

基础选择器
复合选择器

基础选择器：

标签选择器
类选择器
ID选择器
通配符选择器

标签选择器

标签 { 属性: 值; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style type="text/css">
        /*样式表的内容*/
        div {
            font-size: 50px;
            color: green;
            background-color:yellow;
            width: 300px;
            height: 200px;
        }

        p {
            color: pink;
            font-size: 30px;
        }
    </style>
</head>
<body>

    <div>白居易</div>
    <div>柳宗元</div>
    <p>无边落木萧萧下</p>
    <p>不尽长江滚滚来</p>

</body>
</html>

颜色的表达方式

直接写颜色的名称

十六进制的显示颜色

#000000：前2位表示红色，中间2位表示绿色，后面2位是蓝色。

也就是RGB。

#ffffff：越接近f颜色越浅，越接近0颜色越深。

rgb(0, 0, 0)，用3位数来显示颜色。

rgba(102, 217, 239, 0.5) ，A for alpha，不透明度，取值为0到1之间。

类选择器

类选择器命名规则：

不能用纯数字或者数字开头

不能用特殊字符开头，_除外

不建议使用汉子定义类名

不建议使用属性名或者属性的值作为类名

常用的类名：

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        /*自定义类名*/
        .box {
            font-size: 40px;
            color: #ff0000;
            width: 400px;
            height: 300px;
            background-color: #999;
        }

        .miss {
            text-indent: 2em;
            text-align: left;
            color: red;
        }
    </style>
</head>
<body>

    <!--类的使用, 不需要加点号, 谁调用谁生效-->
    <!--一般情况下最多用两个-->
    <div class="box miss">人工智能</div>
    <div class="box"></div>
    <p class="box">一行白鹭上青天</p>
    <span class="miss">选择器学习</span>

</body>
</html>

ID选择器

#自定义名称 { 属性:值 }

一个ID选择器在一个页面只能使用一次。如果使用2次以上，不符合W3C规范，JS调用会出问题。

一个标签只能使用一个ID名称，经常配合JS使用。

一个标签可以同时使用ID选择器和类选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        #box {
            font-size: 40px;
            color: rgb(0, 0, 255);
            background-color: rgb(255, 255, 0);
            width: 300px;
        }
        #miss {
            text-align: center;
        }
        .box {
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="box" class="box">人工智能</div>
</body>
</html>

后续：通配符选择器，交集选择器，后代选择器，子代选择器，并集选择器，选择器综合练习，文本属性和属性值，文字的表达方式