首页 > 博客列表 > CSS 基本概念及常用选择器

博主信息

博文 29

粉丝 0

访问量 19614

专题推荐

更多>

CSS 基本概念

CSS 全称 Cascading Style Sheets，缩写为 CSS。

CSS（层叠样式表）用于设置网页的样式及布局。比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其他装饰性的特征。

元素样式的来源主要有三种：

用户代理样式：浏览器为用户预定的默认样式
自定义样式：程序员自己写的样式，这是我们要学习的
继承样式：继承自父元素的样式

1，语法格式

选择器{
    属性名:属性值;
    属性名:属性值;
    ......
}

其中：

选择器（Selector）用于选择出一部分元素进行样式设置。
样式由一组属性进行设置，属性名和属性值有特定的含义。属性名和属性值之间用冒号:（英文标点）分隔。
每条属性声明结尾加分号;（英文标点）作为结束标记。

2，添加方式

CSS 样式的添加方式分为内联样式、内部样式和外部样式。不同添加方式的位置不同，作用范围不同，优先级也不同。

内联样式（行内样式）

行内样式是用 style 属性将样式添加到标签内部，只对当前元素起作用。格式如下：

<标签名 style = "属性名:属性值; 属性名:属性值; ......">

示例：

<p style="font-size: 12px;color: blue;font-weight: bold">
    行内样式
</p>
<!-- 将当前<p>元素的文本设置为12像素大小、蓝色、加粗 -->

内部样式（内嵌样式、文档样式）

内部样式用<style>标签将样式添加到 HTML 文档的 <head>标签内部，这里的样式只对当前页面起作用。

示例：

<head>
    ......
    <style>
        p{
            font-size: 12px;
            color: blue;
            font-weight: bold"
        }
    </style>
</head>
<!-- 将当前页面中所有的<p>元素的文本设置为12像素大小、蓝色、加粗 -->

外部样式

如果需要将多个页面统一设置公共的样式，则应将样式定义在单独的样式文件中（ .css 文件），然后再相关页面中引用这个文件。

样式文件示例（common.css）：
```
p{
    font-size: 12px;
    color: blue;
    font-weight: bold;
}
a{
    text-decoration: none;
}
......
```
在需要设置样式的页面中<head>标签内使用<link>引用外部样式：
```
<head>
    ......
    <link rel="stylesheet" href="common.css">
</head>
```

选择器

CSS 选择器大致可以分为类型选择器、属性选择器、关系选择器、伪类和伪元素、层叠与继承等。

1，类型选择器

类型选择器有时也叫做“标签选择器”或者是”元素选择器“，选择器的名称就是标签名称。

h1{
    color:red;
}
/* 所有的<h1>元素 */

类型选择器中有个特殊的选择器：全局选择器，名称为*，作用于所有的元素。

*{
    margin: 0;
    padding: 0;
}
/* 所有的元素 */

2，属性选择器

属性选择器用于帅选出属性符合条件的元素，格式为：

元素标签名[属性条件]

例如：

a[target] {
  background-color: yellow;
}
/* 含有 target 属性的<a>元素 */

元素标签名可以不写，此时表示所有符合属性条件的元素：

[class="myColor"]{
    color: red;
}
/* class 属性值为 “myColor”的所有元素 */

不同属性条件的列表：

属性选择器<br />（E为元素标签名，foo为属性名）	说明
E[foo]	含有foo属性的E元素
E[foo=”bar”]	属性foo的值为bar的元素
E[foo~=”bar”]	属性foo的值按空格分开后的单词列表中包含bar的元素
E[foo^=”bar”]	属性foo的值以bar开头的元素
E[foo$=”bar”]	属性foo的值以为bar结尾的元素
E[foo*=”bar”]	属性foo的值包含bar的元素

属性中的 id（ID）和 class（类）因为高频使用，有专用的简便用法：

ID 选择器

以#开头：

#center{
    text-align:center;
}
/* ID 属性值为 center 的元素 */
/* 等同于 [id="center"] */
p#center{
    text-align:center;
}
/* ID 属性值为 center 的 <p> 元素 */
/* 等同于 p[id="center"] */

类选择器

以.开头

.big{
    font-size:20px;
}
/* class 属性值为 big 的元素 */
/* 等同于 [class="big"] */
p.center{
    font-size:20px;
}
/* class 属性值为 big 的 <p> 元素 */
/* 等同于 p[class="big"] */
.big.center{
    font-size:20px;
}
/* 多类选择器，中间不能有空格 */
/* class 属性同时拥有 big 和 center 两个属性值的元素 */

3，关系选择器

子元素选择器

用>连接两个元素，表示其直接子元素：

<style>
    div>p{
    color:blue;
}
/* div 的直接子元素 p */
</style>
<div>
    <p>直接子元素，可以被选择</p>
    <article>
        <p>不是直接子元素，不能被选择</p>
    </article>
</div>

后代选择器

用空格连接两个元素，表示其内的子元素，包含孙元素、重孙元素……：

<style>
    div p{
    color:blue;
}
/* div 的后代元素 p */
</style>
<div>
    <p>直接子元素，可以被选择</p>
    <article>
        <p>不是直接子元素，也能被选择</p>
    </article>
</div>

相邻兄弟选择器

用+连接两个元素，表示紧跟其后的（第一个）兄弟元素：

<style>
    h2+p{font-weight:bold;}
</style>
<h2>第一个标题</h2>
<p>第一个标题下的第一个段落</p>    <!-- 被选中，粗体显示 -->
<p>第一个标题下的第二个段落</p>    <!-- 不能被选中 -->
<h2>第二个标题</h2>
<p>第二个标题下的第一个段落</p>    <!-- 被选中，粗体显示 -->
<p>第二个标题下的第二个段落</p>    <!-- 不能被选中 -->

同级选择器（通用兄弟选择器）

用~连接两个元素，表示选中一个元素的兄弟元素，即使它们不直接相邻：

<style>
    .first~.item{background: green;}
    /* 这里的.item可以用通配符*代替，可以减轻选择器权重 */
</style>
<ul class="list">
    <li class="item first">item1</li>
    <li class="item second">item2</li>    <!-- 被选中，绿色底 -->
    <li class="item third">item3</li>    <!-- 被选中，绿色底 -->
</ul>

<style>
    .first~.third{background: green;}
</style>
<ul class="list">
    <li class="item first">item1</li>
    <li class="item second">item2</li>
    <li class="item third">item3</li>    <!-- 被选中，绿色底 -->
</ul>

批改老师：

PHPz

批改状态：合格

老师批语：条理清晰，很好，继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Chrome 和 VS Code 的安装与常用配置

2023-03-15 16:15:07