CSS 基本概念及常用选择器

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
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>
【文章原创作者：武汉网页设计 http://www.1234xp.com/wuhan.html 欢迎留下您的宝贵建议】
更多阅读