CSS基础

2019-08-20 本文已影响0人 131413

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS 可以通过以下方式添加到HTML中:

1. 内联样式- 在HTML元素中使用"style"属性

 <div style="opacity: 0.3;padding: 30px;background-color:#8AC007 "></div>

2.内部样式表 -在HTML文档头部 <head> 区域使用<style>--元素--来包含CSS，具体分为以下中使用方式:

1.ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{...}（S为选择器名）。例：id为name的标签会匹配下面的样式

<style>
#IDName{
            color: black;
            margin-left: 30px;
            font-size: 13px;
        }
</style>
          <p id="IDName">这个段落</p>

2.类选择器（class selector，CS）：使用 . 标识selector，语法格式：.S{...}（S为选择器名）

<style>
 /*class选择器*/
        .calssValue{
            color: red;
            margin-left: 100px;
            font-size: 23px;
        }
</style>
<p class="calssValue">center text</p>

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

<style>
p.center
{
    text-align:center;
}
</style>
</head>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>

PS : .A B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示

<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

</body>

3.元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式

<head>
    <style>
        h1{font-family: Verdana;font-size: 36px;}
        h2{color: blue;font-size: 18px;}
        p{margin-left: 50px}
        a:link{color: green}
        a:visited{color: blue}
        a:hover{color: chocolate}
        a:active{color: aquamarine}
    </style>
</head>

4.包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

1. 子选择器（sub-selector，SS）：指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为包含选择器对应的标签内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

6.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的-->
</div>

3. 外部引用 - 使用外部 CSS文件
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
    <meta charset="UTF-8">
    <title>CSS实例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

样式表应该以 .css 扩展名进行保存。里边的具体语法格式跟内部样式表相同。

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

.CSS中
h2{color: blue;font-size: 18px;background-color: burlywood}
内链中
 <style>
        h2{background-color: lawngreen}
 </style>

一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>测试！</h3>
</body>

CSS基础

什么是CSS

CSS 可以通过以下方式添加到HTML中:

多重样式

猜你喜欢

热点阅读