zoukankan      html  css  js  c++  java
  • html添加css——样式选择器

    如何给html添加样式。两种方法:

    一、新建立一个css样式表,与原html同目录,然后通过link标签链接。如:<link type="text/css" rel="stylesheet" href="lounge.css">(link标签是一个void元素,无结束标签。)

    二、直接在html源码中使用style标签。如:<style>样式</style>,style标签嵌入head中。

    html中插入style,则会涉及到五种样式选择器。

    1、元素选择器,给某一元素添加样式

    如下:p元素与h1元素内的文本应用大括号内的样式

    <style>

    p,h1{color:grey;

    background-color:red;

    font-family:sans-serif;}

    </style>

    2、类选择器,class属性

    <style> 标签中创建一个名为 blue-text 的CSS类,然后将类应用于HTML元素。

    如:

    <style>

    .blue-text{color:black;}

    </style>

    <p class="blue-text">

    注意,在CSS样式元素中,类选择器应该添加.为前缀。而在HTML元素的类声明中,类属性不能添加.为前缀。

    类选择器不一定只针对某一标签,只要元素应用了class标签,则就使用此css类。

    3、id属性设置样式

    与class类似,为元素定义一个id,给id创建一个声明。例:

    <p id="important"></p>

    <style>

    #important{color:black;}

    </style>

    注意:与class不同的是,在css样式元素中,应添加#为前缀,html中没有前缀。一个id对应一个css属性。

    4、属性选择器,选择某个元素应用样式

    如:*[title]{color:red;}

    所有包含title属性的元素都可应用以上样式。

    5、后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

    根据上下文选择元素

    可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

    举例来说,如果希望只对 h1 元素中的 em 元素应用样式,可以这样写:

    h1 em {color:red;}

    上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:

    <h1>This is a <em>important</em> heading</h1>
    <p>This is a <em>important</em> paragraph.</p>

    再比如说:一个div元素中 要对其中一个元素进行样式改变,比如h2,因为在前面有一个类已经定义了所有h1.h2的样式,而h2又有一部分留在div中,
    所以不允许直接对上面的class类中的h1和h2进行样式改变。因而可以使用后代选择器:div h2{}

    附:p>em{color;red;}表示紧挨着p的em元素使用此样式。
    p+em{}与p元素紧邻的em元素使用此样式。
    h1+p{}h1后面紧邻的p应用此样式。


  • 相关阅读:
    js-link下载文件
    sql-优化建议
    Studio-环境变量设置
    Studio
    Docker下安装ElasticSearch和Kibana
    sklearn 中的 r2_score
    R语言将所有列数据正交化/缩放
    R语言 random forests out-of-bag prediction
    R语言 coalesce 函数
    R语言 case_when 函数
  • 原文地址:https://www.cnblogs.com/myblogs-1118/p/8017039.html
Copyright © 2011-2022 走看看