CSS学习1_基础标签和选择器

css基本使用

外部定义

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

标签内部定义

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

引用外部

将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。 rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

选择器

类选择器

使用“.”（英文点号）进行标识，后面紧跟类名

<head>
    <meta charset="utf-8">
    <style>
        span {
            font-size: 100px;
        }
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
</head>
<body>
<span class="blue">G</span>
<span class="red">e</span>
<span class="red green">e</span>
</body>

id选择器

使用“#”进行标识，后面紧跟id名

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

通配符选择器

用“*”号表示，能匹配页面中所有的元素

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

交集选择器

两个选择器构成，其中第一个为标签选择器，第二个为class选择器

eg: div.class1 选择的是：类名为 .class1 的 div标签。

并集选择器

各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等）只要逗号隔开的，所有选择器都会执行后面样式。

比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。通常用于集体声明。

子元素选择器

为某元素子元素的元素

.table > tr > td.large_content_td{
    white-space: normal;
    overflow: auto;
    text-overflow: unset;
}

若.table、tr、td.large_content_td中拥有的相同属性字段，则优先使用td.large_content_td