CSS创建和选择器

最新推荐文章于 2024-09-23 09:16:35 发布

Coder-Qian

最新推荐文章于 2024-09-23 09:16:35 发布

阅读量537

点赞数

分类专栏： H-C-J 文章标签： css html 选择器

本文链接：https://blog.csdn.net/ManagementAndJava/article/details/52860428

版权

H-C-J 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本篇博客我们整理下CSS的创建和常见几个选择器，内容来源：W3C

一、如何创建CSS
如何插入样式表
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：
1.外部样式表

    <head>
     <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>

2.内部样式表
    当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>
    标签在文档头部定义内部样式表，就像这样:

<head>
    <style type="text/css">
        hr {color: sienna;}
        p {margin-left: 20px;}
        body {background-image: url("images/back40.gif");}
    </style>
</head>

3.内联样式
    当样式仅需要在一个元素上应用一次时   ：

<p style="color: sienna; margin-left: 20px">
    This is a paragraph
</p>

4.多重样式：
    如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来，
    其涉及到CSS优先权问题，我们在下一篇博客中整理；

二、CSS选择器问题：
CSS规则有两个部分组成：选择器，以及一条或多条声明；

selector{declaration; declaration;...declaration}

declaration:
    是由属性和值组成；property:value

selector；
1.单个选择器：
    h1{color:green;}

2.选择器分组：
    h1,h2,h3,p{color:green;}

3.派生选择器：

li strong{
    font-style:italic;
    font-weight:normal;
}
<ol>
  <li>我是正常字体</li>
  <li><strong>我是斜体，因为我的strong元素位于li元素里面</strong></li>
</ol>

4.后代选择器(包含选择器)两个元素之间的层次间隔可以是无限的
    div.sidebar {background:blue;}
    div.maincontent {background:white;}
    div.sidebar a:link {color:white;}//class为sidebar的div中的超链接颜色为白色；
    div.maincontent a:link {color:blue;}//class为maincontent的div的超链接颜色为蓝色。

5.子元素选择器：后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
    您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
    h1 > strong {color:red;}
    这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
    table.company td > p
    上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，
    该 table 元素有一个包含 company 的 class 属性。

6.相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
    h1 + p {margin-top:50px;}
    这个选择器读作：选择紧接在 h1元素后出现的段落，h1和p元素拥有共同的父元素”。
    html > body table + ul {margin-top:20px;}
    选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，
    body 元素本身是 html 元素的子元素

7.id选择器：可以为标有特定 id 的 HTML 元素指定特定的样式， id 选择器以 "#" 来定义
    #red {color:red;}
    #green {color:green;}
    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>
    注意：id 属性只能在每个 HTML 文档中出现一次

    7.1 id选择器和派生选择器
        #sidebar p {
        font-style: italic;
        text-align: right;
        margin-top: 0.5em;
        }
        上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能
        是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素

8.类选择器：在 CSS 中，类选择器以一个点号显示：
    .center {text-align: center}
    <h1 class="center">
        This heading will be center-aligned
    </h1>
    <p class="center">
        This paragraph will also be center-aligned.
    </p>

    8.1和 id 一样，class 也可被用作派生选择器：
    .fancy td {
        color: #f60;
        background: #666;
    }
    类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为
    fancy 的更大的元素可能是一个表格或者一个 div）

9.属性选择器：对带有指定属性的 HTML 元素设置样式。
    IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择
    [title]
    {
        color:red;
    }
    为带有 title 属性的所有元素设置样式；
    9.2：属性和值选择器
    [title=W3School]
    {
        border:5px solid blue;
    }
    9.3：属性和值选择器 - 多个值
        [title~=hello] { color:red; }
        <h1>可以应用样式：</h1>
        <h2 title="hello world">Hello world</h2>
        <p title="student hello">Hello W3School students!</h1>