Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS 基本概念及常用选择器
Blogger Information
Blog 29
fans 0
comment 0
visits 11082
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS 基本概念及常用选择器
尹辉
Original
309 people have browsed it

CSS 基本概念

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

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

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

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

1，语法格式

  1. 选择器{
  2.     属性名:属性值;
  3.     属性名:属性值;
  4.     ......
  5. }

其中：

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

2，添加方式

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

  • 内联样式（行内样式）

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

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

    示例：

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

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

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

    示例：

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

  • 外部样式

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

    样式文件示例（common.css）：

    1. p{
    2.     font-size: 12px;
    3.     color: blue;
    4.     font-weight: bold;
    5. }
    7. a{
    8.     text-decoration: none;
    9. }
    10. ......

    在需要设置样式的页面中<head>标签内使用<link>引用外部样式：

    1. <head>
    2.     ......
    3.     <link rel="stylesheet" href="common.css">
    4. </head>

选择器

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

1，类型选择器

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

  1. h1{
  2.     color:red;
  3. }
  4. /* 所有的<h1>元素 */

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

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. /* 所有的元素 */

2，属性选择器

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

  1. 元素标签名[属性条件]

例如：

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

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

  1. [class="myColor"]{
  2.     color: red;
  3. }
  4. /* 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 选择器

    以#开头：

    1. #center{
    2.     text-align:center;
    3. }
    4. /* ID 属性值为 center 的元素 */
    5. /* 等同于 [id="center"] */
    7. p#center{
    8.     text-align:center;
    9. }
    10. /* ID 属性值为 center 的 <p> 元素 */
    11. /* 等同于 p[id="center"] */

  • 类选择器

    以.开头

    1. .big{
    2.     font-size:20px;
    3. }
    4. /* class 属性值为 big 的元素 */
    5. /* 等同于 [class="big"] */
    7. p.center{
    8.     font-size:20px;
    9. }
    10. /* class 属性值为 big 的 <p> 元素 */
    11. /* 等同于 p[class="big"] */
    13. .big.center{
    14.     font-size:20px;
    15. }
    16. /* 多类选择器，中间不能有空格 */
    17. /* class 属性同时拥有 big 和 center 两个属性值的元素 */

3，关系选择器

  • 子元素选择器

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

    1. <style>
    2.     div>p{
    3.     color:blue;
    4. }
    5. /* div 的直接子元素 p */
    6. </style>
    8. <div>
    9.     <p>直接子元素，可以被选择</p>
    10.     <article>
    11.         <p>不是直接子元素，不能被选择</p>
    12.     </article>
    13. </div>

  • 后代选择器

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

    1. <style>
    2.     div p{
    3.     color:blue;
    4. }
    5. /* div 的后代元素 p */
    6. </style>
    8. <div>
    9.     <p>直接子元素，可以被选择</p>
    10.     <article>
    11.         <p>不是直接子元素，也能被选择</p>
    12.     </article>
    13. </div>

  • 相邻兄弟选择器

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

    1. <style>
    2.     h2+p{font-weight:bold;}
    3. </style>
    5. <h2>第一个标题</h2>
    6. <p>第一个标题下的第一个段落</p>    <!-- 被选中，粗体显示 -->
    7. <p>第一个标题下的第二个段落</p>    <!-- 不能被选中 -->
    8. <h2>第二个标题</h2>
    9. <p>第二个标题下的第一个段落</p>    <!-- 被选中，粗体显示 -->
    10. <p>第二个标题下的第二个段落</p>    <!-- 不能被选中 -->

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

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

    1. <style>
    2.     .first~.item{background: green;}
    3.     /* 这里的.item可以用通配符*代替，可以减轻选择器权重 */
    4. </style>
    6. <ul class="list">
    7.     <li class="item first">item1</li>
    8.     <li class="item second">item2</li>    <!-- 被选中，绿色底 -->
    9.     <li class="item third">item3</li>    <!-- 被选中，绿色底 -->
    10. </ul>
    1. <style>
    2.     .first~.third{background: green;}
    3. </style>
    5. <ul class="list">
    6.     <li class="item first">item1</li>
    7.     <li class="item second">item2</li>
    8.     <li class="item third">item3</li>    <!-- 被选中，绿色底 -->
    9. </ul>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：条理清晰，很好，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post