• HTML 第4章初始CSS3


    什么是CSS?

    CSS全称为层叠样式表,通常又称为风格样式表。

    引用CSS样式:

    语法:

    <h1 styske="color:red;">style属性的应用</h1>

    <p style="font-size:14px;color:green;">直接在HTML标签中设置样式</p>

    内部样式表:

    把CSS代码写在<head>的<style>标签中,与HTML内容在位于同一个HTML文件中。

    外部样式表:

    链接外部样式表:

    语法:

    <head>

    。。。

    <link href="style.css"rel="stlesheet"type="text/css">

    。。。。

    </head>

    导入外部样式表:

    语法:

    <head>

    。。。。。。

    <style>

    <!--

    @import url("common.css");

    -->

    </style>

    </head>

    CSS3的基本选择器:

    (1):标签选择器;

    (2):类选择器;

    (3):ID选择器;

    CSS3的高级选择器:

    (1)层次选择器:
    选择器                           类型                                         代码  <style type="text/css>

    E F                         后代选择器                           body p{ background:red;}</style>

    E>F                        子选择器                              body>p{background:pink;}</style>

    E+F                         相邻兄弟选择器                 body+p{background:green;}</style>

    E-F                          通用兄弟选择器                  body-p{backgroound:yellow;}</style>

    (2)结构伪类选择器:

    E:first-child;

    E:last-child;

    E F:nth-child;

    E:fisrt-of-type;

    E:last-of-type;

    E F:nth-of-type;

    (3)属性选择器:

    选择器                                                代码                         

    E[attr]                                   a[id]{background:yellow;};        a[id][target]{background:yellow;]

    E[attr=val]                             a[id=first]{background:red;]

    E[attr$=val]                          a[class*=links]{backgrond:red;}

    E[attr^=val]                          a[hreff^=http]{background:red;}

    E[attr*=val]                           a[href$=png]{background:red;}

    实例代码:

    (1);

    <html>

    <head lang="en">

    <meta charset="UTF-8">

    <title>样式引用优先级问题</title>

    <!--外部样式表-->

    <style>

    h1{

    color:green;

    }

    </style>

    </head>

    <body>

    <h1 style=color:red">。。。</h1><!--行内样式-->

    <p>。。。。</p>

    <p>。。。。。</p>

    </body>

    </html>

    (2):

    <html>

    <head lang="en">

    <meta charset="UTF-8">

    <title>三种基本选择器的优先级</title>

    <style type="text/css">

    p{

    font-size:14px;

    color:red;

    }

    h1{

    color:blue;

    }

    .h1{

    color:pink;

    }

    #h1{

    color:green;

    }

    </style>

    </head>

    <body>

    <h1 class="h1" id="h1">。。。</h1>

    <p>。。。。</p>

    </body>

    </html>

  • 相关阅读:
    java中Map遍历的四种方式
    Java从网络读取图片并保存至本地
    spring整合问题分析之Write operations are not allowed in readonly mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.
    element 中table表格多选,翻页或者切换不同数据后保存之前选择的数据并返显选中的状态
    nvm的安装与使用(Mac 版)
    常用正则表达式
    uniapp开发微信小程序
    关于elementui select组件change事件只要数据变化就会触发的解决办法
    elementui的表单重置方法resetFields()的坑
    Element中vfor动态数据循环表单验证的处理
  • 原文地址:https://www.cnblogs.com/wsnb8/p/7455392.html
Copyright © 2020-2023  润新知