• CSS 入门基础


     

    一、CSS 介绍什么是CSS

    CSS 指的是层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术,

    可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

    CSS 的基础语法

    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

    h1{
       color:red;
       font-size:14px;
    }

    属性大于 1 个之后,属性之间用分号隔开。这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

    css 高级语法

    1.选择器的分组

    h1,h2,h3,h4,h5,h6{
          color:red;
       }

    2.继承

    根据 CSS,子元素从父元素继承属性

    body{
         color:green;
    }

    通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。

    派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁。

    比方说,你希望列表中的 strong 元素变为红色,而不是通常的黑色,可以这样定义一个派生选择器:

    li strong{
        color: red;
    }
    <p><strong>我是黑色,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
            <u1>
                <li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li>
            </u1>

    id 选择器

    1.id 选择器: id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义

    2.id 选择器和派生选择器: 目前比较常用的方式是 id 选择器常常用于建立派生选择器

    <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link  href="MyCss.css" type="text/css" rel="stylesheet">
        </head>
        <body>
            <p id="pid">hello css<a href="www.shiyanlou.com">shiyanlou</a></p>
            <div id="divid">this is a div</div>
    
        </body>
    </html>

    #pid a{ color:#00755f; } #divid { color: red;

    MyCss.cs文件

    类选择器

    (1)在 CSS 中,类选择器以一个点号显示

    .divclass {
        color: red;
    }

    下面的 html 代码中,div 元素含有 divclass 类,意味着它要遵守.divclass的规则。

    <div class="divclass">
    hello div
    </div>

    (2)和 id 一样,class 也可被用作派生选择器:

    .pclass a{
        color: green;

    属性选择器

    对带有指定属性的 HTML 元素设置样式。

    (1)下面的例子为带有 title 属性的所有元素设置样式:

    <style>
    [title] {color:red;}
    </style>

    属性和值选择器

    <style>
    [title=te]{
                    color: red;
                }
    </style>
  • 相关阅读:
    1030
    Android网络:开发浏览器(二)——功能完善之长按网页图片菜单
    表达式(四则运算)计算的算法
    [置顶] 得失寸心知
    参考storm中的RotatingMap实现key超时处理
    分布式事务 & 两阶段提交 & 三阶段提交
    遗传算法
    模拟退火算法
    Mysql死锁问题解决方式 & 聚簇索引、隔离级别等知识
    Mysql表锁、行锁、页锁
  • 原文地址:https://www.cnblogs.com/wangshouchang/p/6656834.html
Copyright © 2020-2023  润新知