zoukankan      html  css  js  c++  java
  • 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可以识别的标记。

  • 相关阅读:
    列表基本操作——1
    条件判断与嵌套
    数据拼接与数据转换
    变量与赋值
    打印数与type()函数
    print()函数与打印字符串
    arduino开发ESP8266学习笔记二----按键控制LED灯
    arduino开发ESP8266学习笔记一 ----点亮一个LED灯
    无线充电
    EMC设计总结
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9726548.html
Copyright © 2011-2022 走看看