• css


    从使用span元素我们可以看到,css的基本语法。

    <元素名 style="属性名:属性值;属性名:属性值2;"/>

    元素可以是html的任意元素;

    属性名:属性值  要参考w3c组织给出的文档。

    css的分类:内部css和外部css。

    .style1,表明style1是一个类选择器。

    怎么让网页中的背景变成黑白,如彩色图片变成黑白的。用到了滤镜。

    选择器是CSS中非常重要的概念。css中有三种不同的选择器。

    1.类选择器,通常也叫class选择器。

    2.id选择器

    3.HTML选择器

    4.通配符选择器

    .类选择器名{

    属性名:属性值

    ...

    }

    /*style1就是类选择器*/
    .style1{
    font-weight:bold;
    font-size:30px;
    background-color:pink;
    }

    id选择器

    之所以叫id选择器,那是因为用id属性来引用它的。

    id选择器用法

    基本语法:

    #id选择器名{

    属性名:属性值;

    }

    案例:

    #style2{
    font-size:20px;
    backgroud-color:sliver;
    }

    在html文件中如果要引用id选择器,则

    <元素 id='id选择器名'>

    html选择器

    就是改变html元素的样式,如

    /*HTML的选择器*/
    body{
    color:orange;
    }

    结论:当一个元素同时被id选择器和类选择器修饰时,优先级是:

    id>类选择器>html选择器.

    在选定样式时,是使用优先级高的选择器,但是不是优先级高的选择器完全替代优先级低的选择器,而是优先级高的选择器和优先级的选择器的相冲突的样式发生时,选用的是优先级高的样式,而没有冲突时,优先级低的选择器设定的样式仍然会显示。

    回顾:

    div使用存放html元素的,文字,图片,视频等元素。

    css是叠层样式表,用于指定div中内容的样式。

    .类选择器名{

    }

    #id选择器名{

    }

    id选择器名>类选择器名>html选择器名。

    通配符选择器

    *{}

    如果希望所有的元素都要符合某一种样式,那么可以使用通配符选择器。

    样例:

    <p><span>some text.</span>some other text.</p>

    如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。

    <body link="red" text="blue" topmargin="0" leftmargin="0">
    你好!!!!!!!!!!<br/>

    使得左边距和上边距为0.

    当然可以在通配符选择器中这样做。

    *{

    margin-top:10px;

    margin-left:0px;

    }

    子类选择器。

    #style2{
    font-size:20px;
    background-color:silver;
    color:black;
    }

    /**/
    #style2 span{
    font-style:italic;
    color:red;
    }

    在一个选择器中再定义标签的样式。

    针对:

    <span id="style2">这是一则<span>非常重要</span>的新闻</span><br/>

    my.css添加了一个父子选择器。

    #style2 span{
    font-style:italic;
    color:red;
    }

    注意:子选择器标签是html可以识别的标记。

  • 相关阅读:
    第02周学习提升建议:【python安装、变量、输入输出、流程、循环】--【第五篇】流程、循环
    向gitlab上传本地项目
    [jenkins+gitlab+postman] 持续集成
    linux 上安装newman
    【python】读取cfg/ini/txt配置文件
    【CI/CD】docker部署gitlab,并且本地拉取gitlab代码成功
    【CI/CD】docker部署Jenkins
    【TCP知识】03_Linux查看TCP连接状态
    【nginx知识】02_【转载】nginx反向代理时保持长连接
    【TCP/IP知识】02_【转载】TCP 半连接队列和全连接队列
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9726548.html
Copyright © 2020-2023  润新知