CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

Zerore

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量366

点赞数

分类专栏：前端技术

10 篇文章 0 订阅

订阅专栏

CSS指层叠样式表（Cascading Style Sheets），为了解决内容与样式分离的问题，可提高工作效率，多个样式定义可层叠为一。

当同一个HTML元素被不止一个样式定义时，会使用哪个样式？
一般而言，所有的样式会根据如下规程层叠于一个新的虚拟样式表中，其中4拥有最高的优先权。

1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于head标签内部）
4.内联样式（在HTML元素内部）

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ...declarationN}

选择器是要改变样式的HTMl元素，每条声明由一个属性（property）和一个值（value）组成。

selector {property: value}

如下是把h1元素内的文字颜色定义为红色，字体大小设置为14像素：

h1 {color:red; font-size:14px;}

代码结构如下：
这里写图片描述

通过依据元素在其位置的上下文关系来定义样式，可以使标记更简洁。
在CSS1种，被称为上下文选择器（contextual selectors）;在CSS2种，被称为派生选择器。
比如，仅希望列表中的strong元素变为斜体，而不是通常的粗体，可以如下定义：

li strong {
    font-style: italic;
    font-weight: normal;
    }

则只有在li标签内的strong标签内元素为斜体。

id选择器以“#”来定义，为标有特定id的HTML元素指定特定的样式。
如下两个id选择器

#red {color:red;}
#green {color:green;}

则在如下代码中，id属性对应显示颜色：

<p id="red">红色</p>
<p id="green">绿色</p>

注意：id属性只能在每个HTML文档中出现一次。

现代布局中，id选择器常常用于建立派生选择器。

#sidebar p{
        font-style: italic;
        text-align:right;
        margin-top:0.5em;
        }

#sider{
      border: 1px dotted #000;
      padding: 10px;
      }

在CSS中，类选择器以一个点号显示：

.center {text-align: center}

如上例子中，所有拥有center类的HTML元素均为居中。
在如下的HTML代码中，h1和p元素都有center类，则都遵守”.center”选择器的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

和id一样，class也可被用作派生选择器：

.fancy td{
        color: #f60;
        background: #666;
        }

如上表示类名为fancy的元素内部的表格单元会被影响。
元素也可以基于他们的类而被选择：

td.fancy {
        color: #f60;
        backgroung: #666;
        }
<td class="fancy">

如上表示类名为fancy的表格单元会被影响。

对带有指定属性的HTML元素设置样式。
可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。

[title]
{
color:red;
}

title=w3School]
{
border:5px solid blue;
}

如下例子为包含指定值的title属性的所有元素设置样式。适用于由空格分隔的属性值。

[title~=hello] { color:red; }

如下例子为带有指定值的lang属性的所有元素设置样式。适用于由连字符分隔的属性值。

[lang|=en] { color:red; }

关注

专栏目录